How to make eraser tool using paper.js

[Rishi Khandelwal]

Hello,

I am trying make editor with paper.js. I am able to make drawing tool, pointer tol, text tool etc, but not getting the way that how to make eraser tool. 

I tried so much but not getting solution.

Please help me out.

Thanks in advance.

[Nicholas Kyriakides]

How about a freehand tool with a large white stroke? It will look like an eraser would it not?

I'm not sure if it's the best solution though.

This message and its attachments are private and confidential. If you have received this message in error, please notify the sender and remove it and its attachments from your system.

The University of Westminster is a charity and a company limited by guarantee. Registration number: 977818 England. Registered Office: 309 Regent Street, London W1B 2UW.

[Jürg Lehni]

Did you look through the mailing list archives? This has been discussed before.

--
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/d/optout.

[Rishi Khandelwal]

Hello Nicholas Kyriakides 

You solution would work when background is white. My background color is not fixed. In this case, it will not work

[Rishi Khandelwal]

Hello Jurg Lehmi

Yes, I saw the threads, but did not problem solve. Still facing issue in making eraser tool.

I tried with blendMode property, but it did not work for me.

I can not use the concept of drawing background color because my background is color is not fixed i.e. gradient color.

 Then i used path1.getInteraction(path2) concept. In this case i deleted the intersected points but when i deleted these points then paper.js joins the rest of the points. this is not acceptable.

If any user is trying to delete any portion of a drawing then it shoul disappear from there, instead of happening this, paper.js joins the res of the points.

So this is also not going to work. Please help me out to solve this. I have tried so much and getting frustrated.

Thanks

[Jürg Lehni]

How did blendMode "not work"? If you're more specific, maybe somebody here can help.

Other than that I can't suggest much else. If you want to erase pixels, you will have to draw in pixels, and then paper.js is not the right framework since it's based on vector graphics.

Once we have path offsetting implemented (shouldn't be too far off now), you will be able to calculate the outlines of your erasing path, and then subtract that from the other path using the boolean operations that are already implemented.

J

[Rishi Khandelwal]

I said that blendMode didn't work for me because :

 

Following is the blendMode example :

var background = new Path.Rectangle(view.bounds);

background.fillColor = 'white';

var circle = new Path.Circle({

    center: [80, 50],

    radius: 35,

    fillColor: 'red'

});

var circle2 = new Path.Circle({

    center: new Point(120, 50),

    radius: 50,

    fillColor: 'blue'

});

// Set the blend mode of circle2:

circle2.blendMode = 'destination-out';

In this case it works fine, because background color is white.

But in my case, background color is not fixed. It could be anything.

I modified above example as :

var background = new Path.Rectangle(view.bounds);

background.fillColor = 'green';

var circle = new Path.Circle({

    center: [80, 50],

    radius: 35,

    fillColor: 'red'

});

var circle2 = new Path.Circle({

    center: new Point(120, 50),

    radius: 50,

    fillColor: 'blue'

});

// Set the blend mode of circle2:

circle2.blendMode = 'destination-out';

In this case, background color is green. Now blendMode will not work as it should.

Now please give me your thoughts on this. I am stucked.

[Jürg Lehni]

Yes now I understand.

I am planning to have each Layer raster itself into a separate, layered canvas, to allow performance optimizations. For example, you can then have all static things in one layer, and all changing things above in another.

Another advantage of this approach will be that destination-out will only apply to the contents of the layer.

This would solve your problem, correct?

[Rishi Khandelwal]

yeah, looks like...

But one suggestion I want from your side, that currently I am getting intersection points of eraser and drawing then removing those points from path but it is behaving strange. 

suppose i have drawn a line at point 1,2,3,4,5,6. and i rubbed eraser at 3,4,5 then 3,4,5 will be removed from path but point 2 will join to point 6, then again a straight line will be there. 

In real , point has deleted, but paper.js joins points in path therefore, it joins non intersected path. SO, it ruins my logic....

But i am thinking for another solution, that is taking background color of an image.

Like, I will draw that image on canvas and will draw a line there. then when i will try to erase then i will get background color and will draw drawing of that color. By doing this, no tension of intersection point and it will look like eraser. Is it make sense for you ? 

[Rishi Khandelwal]

I got a problem in background color image solution as well.

The problem is that :

suppose i have a line with blue color from point 1 to 10. User rubbed eraser from 3 to 6 point then i will try to paint those points with background color. But suppose point 3 have pink background color and point 6 have yellow background color. In this case what color i will choose for erasing because a single path can take only a single color but erasing points have 2 background color.  I am stucked here now..

I am not getting proper solution for erasing tool.   Please guide me for this.

[Tielman Nieuwoudt]

Hi Rishi, 

Did you manage to find a solution to this problem?

[KAmp]

Hi guys,

Mind if you share your solution for this issue? I'm making same eraser tool.

Regards.