Eraser tool

[Francesco Crecchi]

Hi mates,

i'm tryng to develop a decent sketch pad and i really need to implement an eraser tool.

I've read something about using clipping to fake the functionality and to obtain the effect,

but i'can't really figure it out how.

So can you please help me providing me an example?

F.

[Stewart Smith]

Hi Francesco

I sympathize. Personally, I took the route of embracing the vector functionality so the goal was no longer to “erase” bits of a drawing, but to delete (or merely edit!) Paths. The example’s two years old and has limitations, but still functions. Load it up and click the “Draw” tab where you’ll be greeted with a pencil, a direct selector (for moving or deleting Paths), and an indirect selector (for moving anchor Points). You can use key commands for Cut, Copy, and Paste as well as Delete for removing entire Paths. 

http://chatttr.com

s

--
You received this message because you are subscribed to the Google Groups "Paper.js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to paperjs+u...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.

[Francesco Crecchi]

Thanks for the answer but i think that you don't understand what i mean.. I'm making an MS Paint looks alike draw pad so when the user selects the eraser tool he expect a precise behaviour from the pad that is i erase the part of the path that you are going over with the mouse.
So i can' t make an eraser tool that you need to select the path and then delete that as is in the chattr example.

F.

[Stewart Smith]

I do understand. That was my polite and constructive way of saying you’re using the wrong tool for the job ;)

[Francesco Crecchi]

Yeah but vector or rasters the user know what to expect from a drawing tool ;) so anyone can help me with this?

[Bojan Hribernik]

Here's how I would do it.

1. create eraser tool

2. create eraser circle (transparent fill, 1px stroke, variable size depending on user choice for example)

3. when tool is activated, show the circle and sync it with mouse cursor

4. when tool is mousedown, calculate and remove intersections (http://paperjs.org/examples/path-intersections/)

#4 is the tricky part, because you will have to test intersections with every single path in the canvas.

+1 for path.getIntersections(NULL) which return ANY intersected path

[Francesco Crecchi]

Yeah that's what i was looking for and i'm working on it! But i can't understand what you mean there:

+1 for path.getIntersections(NULL) which return ANY intersected path

by now the problem is that when i get the intersections point array i can't subtract those points from the path intersected

because i think that paper.js will interpolate the path.

Should i create many sub-path like: 

- Path1 => [start , intersectionPoint1)

- Path2 => (intersectionPoint1 , intersectionPoint2)

(...)

- PathN => (intersectionPointN-1 , end] ?!

[Bojan Hribernik]

For the path1.getIntersections(path2) you need to specify path2. Usually you have many layers which contain many paths. Let's say you're working on the active layer which contains 5 paths. On every tool mousemove you would have to loop through every path in the active layer and calculate intersections with path1, right? It would be great if you could do something like path.getIntersections(path|layer|null) so you could get path1 intersections for all the paths in the specified layer or all paths in the project (null).

But from looking at the source code, I think you can already do something like path1.getIntersections(layer). BTW Layer extends Group. So I guess you're ready to go ;)

[Jürg Lehni]

Actually, this should be possible now: As of recently, paper.js supports all canvas globalCompositeOperation modes through the blendMode property, so you should be able to create an erasing stroke by using 'destination-out':

https://developer.mozilla.org/samples/canvas-tutorial/6_1_canvas_composite.html

Please not that this will not export correctly as SVG though.

I hope this helps,

Jürg

[Jürg Lehni]

Here an example of this in action:

var path1 = new Path.Circle({
center: [100, 100],
radius: 100,
fillColor: 'red'
});

var path2 = new Path.Circle({
center: [150, 100],
radius: 100,
fillColor: 'black',
blendMode: 'destination-out'
});

[Francesco Crecchi]

Thanks for the hint but the question now is: i'm saving the path when i create it (on MouseUp event) because i need it to make the editor multipage, if i use the destination-out method

how can i modify the path that i've saved before removing "deleted" points?

I'm looking to the split() method but i can't understand completely how it works..I mean: if i have a path and i want to delete a point contained in it how can i do it with the split method?

[Jay Zehngebot]

Jürg, Thank you so much for your incredible work with paper.js - it is allowing me to build the things I want to build, and so I am endlessly thankful for that.

 I'm here because I'm also looking to build a "true eraser" -

 

the post above is very helpful  - so I now have an eraser working, but as you predicted, when I try to export as an SVG, it breaks...

well - rather, it exports fine, but then the eraser paths re-appear as standard paths.

you predicted this. do you have any ideas for a potential workaround? If necessary, I'll go the hit-detection and path.split route, but this seems so close, hopefully theres some way to take full advantage of the newest canvas features? 

 

Ok! Thank you for all your help. 

 

 

[Jay Zehngebot]

An update. Played with the Import/Export JSON features and this works. interesting. I think that I'll need to be rendering SVG's though, outside of paper view's.... So, likely still things I need to sort out..

[Jürg Lehni]

Well SVG does not support the blend mode you're using for erasing, which is what I predicted. JSON is our internal format for exchanging in a lossless way between paper.js canvases.

In order to get the eraser exported as SVG you will have to:

1) expand the strokes to outlines
2) use boolean operations to subtract the eraser strokes form all other strokes.

2) already works, but 1) is missing right now from the library.

The good news is that Hari is working on this, but we don't have a timeframe at the current moment for when it'll be ready.

If you don't need vectors in the end, you can always export the scene as an image:

var img = view.element.toDataURL("image/png");

Best,

Jürg

[Jay Zehngebot]

Thanks for the response, its good to know you've got stuff like this under consideration

your last suggestion - for the time being - is the route I'm going to go - using both a PNG and the JSON object.

Thanks for your support. 

[Jay Zehngebot]

I've run into another strange thing and I figure this isn't a bad place to ask about it.

Last night I saw the "eraser" path successfully employing blendMode to remove another "pen" path..

the action (actually seeing the path disappear) was taking place onMouseUp. In my mouseup function, I just happened to have a path.strokeColor call, which turns out to have been important to rendering the blendmode:destination-out

so, i moved that strokeColor call into the onDrag function, and now the eraser is performing the way I would expect - as I drag and eraser is selected, the path disappears

however, it seems really strange that I'd need to be continually defining the color of the path, no?

I looked at the docs for strokeColor but it doesn't give me insight. Thank you for your time.

copy/pasted code : 

function onMouseDown(event) {

        // If we produced a path before, deselect it:

        if (path) {

            path.selected = false;

        }

        if (selectedToolType=='eraser'){

            path = new Path();

            path.add(event.point);

            path.strokeWidth = '30';

            path.strokeCap = 'round';

            path.blendMode = 'destination-out';

        }

        if (selectedToolType=='pen'){

            path = new Path();

            path.add(event.point);

            path.strokeColor = 'black';

            path.strokeWidth = '7';

            path.strokeCap = 'round';

        }

    }

    // While the user drags the mouse, points are added to the path

    function onMouseDrag(event) {

        if (selectedToolType!=null){

            path.add(event.point);

            // this is what is weird

            // setting path.strokeColor on drag

            // creates the eraser effect I want

            // but this seems strange, no?

            path.strokeColor='black'

        }

    }

[Jay Zehngebot]

And I continue to run into new things - after figuring out the funny work around above, I worked on adding a second layer that has a different pen style  - a demo of this can be toyed with @

http://beastjam.herokuapp.com/sticker-builder

if you start just drawing on the canvas (mouseclick on canvas on default top layer ), and then erase on that same layer, then switch layers (bottom layer, white pen) the erase path on the top layer also hides the bottom path.

starting to think i'm going to have to go the path hit detect and split / remove path.. any tips?

[Jürg Lehni]

try setting path.strokeColor='black'; inside if (selectedToolType=='eraser'){

it's simple: as long as your path has no fill color defined, it will not be filled with the chosen blend mode.

[Rishi Khandelwal]

Hello Jay Zehngebot

I saw the threads and found that you are working on eraser tool functionality. I am also working on this but not getting it.

I tried with blendMode proeprty, but this is not working for me.

I tried with path1.getInteraction(path2) concept and tried to delete intersected paths, but then it joins rest of points of the path. That is not fully eraser.

 If any user is erasing some part then it should be disapear but instead of this it just joins to another points.

Please help me out to solve my issues.

thanks