search

embiem / react-canvas-draw

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

Add eraser mode #44

Open embiem opened 4 years ago

embiem commented 4 years ago

In #34, an eraser prop was proposed. This could be a new eraser boolean prop on the component. When active, drawn lines intersecting with the pointer are removed instead of drawn.

WallTack commented 4 years ago

I've put together an eraser prop, you can demo it here. We could also implement an 'eraserColor' prop rather than having it hard-coded. The one current downside is that all of the eraser lines are added the same way that brush lines are added, adding some unnecessary length where eraser points aren't intersecting brush points. I can fix this, but I just wanted to check if this is headed in the direction that you had in mind.

Also, if you take a look at the 'export' button in the demo, I could add this as a prop to make it more readily accessible (as I see there's already an issue open for this).

rish6696 commented 4 years ago

hey WallTack can you share the source code how you implemented the eraser in the library.

embiem commented 4 years ago

@WallTack great demo, thanks for sharing! I'd also like to know more about the implementation. If you want, you can add a PR.

Regarding the export functionality: if you have the time, please submit a PR. For coordination, please use issue #43 and PR #67, where some work on it has already been done.

ivanloy commented 4 years ago

I needed an eraser mode myself, I saw some issues in the one from @WallTack that did not fit in my use case 1 - It does not erase directly, just paints a color line and erases later, I needed it to erase the same way as it would paint 2 - If its a hardcoded color, it will not work with background images.

I made the eraser mode and also a sticker mode to put stickers on the canvas passing svg or png images. Is this wanted in a PR?, I've seen there are 7 open already

ziaongit commented 4 years ago

I needed an eraser mode myself, I saw some issues in the one from @WallTack that did not fit in my use case 1 - It does not erase directly, just paints a color line and erases later, I needed it to erase the same way as it would paint 2 - If its a hardcoded color, it will not work with background images.

I made the eraser mode and also a sticker mode to put stickers on the canvas passing svg or png images. Is this wanted in a PR?, I've seen there are 7 open already

I can see that?

scloutier75 commented 2 years ago

@WallTack @ziaongit Is the code of your erasers is available somewhere, the canvas is amazing but this functionality is a must for me?

scloutier75 commented 2 years ago

@WallTack Nevermind, just found the code in your repos, thanks.