search

embiem / react-canvas-draw

React Component for drawing in canvas
https://embiem.github.io/react-canvas-draw/
MIT License
892 stars 315 forks source link

Question - Problems with loadSaveData #82

Closed Andreashoj closed 2 years ago

Andreashoj commented 4 years ago

Hey, we have some problems with live sharing of the canvas (loadSaveData). We have a getSaveData function that emits to other socket users when a user makes a change on the canvas, they then recieve the data and we run a loadSaveData function on the data. It works fine, but the problem is that we want the "live-drawing" effect so we set the immediate argument to false but it doesn't really append the newly added lines but it "live-draws" all the lines. We looked at the source code and it seems like there's a _this.clear function before the simulation is run and we suspect that's the reason. But just in case, is there a way to achieve the behavior we intend? Where the newly drawn lines are appended instead of loadSaveData recreating the whole thing?

MiYazJE commented 4 years ago

Hello, i'm triying to develop the same thing... @Andreashoj if you solved this pls let me know :D

loriopatrick commented 4 years ago

I ended up changing a good bit of how the rendering works in a personal fork. My updates support the features you're looking for. I'm not sure when I'll find the time to prepare a PR to upstream, but you can find it here: https://github.com/loriopatrick/react-canvas-draw. See demos (I suggest you clone and toy with it locally to see if it fits your needs).

MiYazJE commented 4 years ago

I had no more time so I had to develop by myself. bI saw what you did and it's nice. Good job!

rohitkrishna094 commented 3 years ago

@loriopatrick Quick question, if I want to use your fork, how do I use it in my react project for example? I mean when I do npm install react-canvas-draw, it will download the upstream source code afaik. And since your fork is most likely not deployed to npm, how can I use it?

New to npm, hence the beginner-like question. Thanks.

loriopatrick commented 3 years ago

Hi @rohitkrishna094, I think npm install loriopatrick/react-canvas-draw should do the trick. npm will first lookup the package in its registry and then try resolving to Github. So loriopatrick/react-canvas-draw should map to https://github.com/loriopatrick/react-canvas-draw. If you add a # you can also specify a revision (commit / tag / branch). So npm install loriopatrick/react-canvas-draw#9040778ef4ab36ab7d6c7d8e6a837e901f5041e5 should ensure you pull down the commit that is currently on master.

rohitkrishna094 commented 3 years ago

Thank you so much @loriopatrick. Will try that.

embiem commented 2 years ago

Thanks for reporting this & thanks for tackling it @loriopatrick.

It seems related to #93, so I will track the work in that issue.