Subtract one path from another?

1,034 views
Skip to first unread message

bootsmaat

unread,
Sep 17, 2011, 10:53:43 AM9/17/11
to Paper.js
I am trying to build a tool that works like the eraser in Illustrator
or Photoshop: when dragging the mouse over an existing shape I want
the cursor to erase the specific area from the shape.

I'm trying to get my head around this problem. I think the easiest way
to achieve this would be to draw another path (when dragging the
mouse) and subtract this path from the shape.

Does this make sense? How would you go solve this problem?

Jürg Lehni

unread,
Sep 17, 2011, 11:43:27 AM9/17/11
to pap...@googlegroups.com
Hi,

What you need for this are boolean geometric path operations:

http://scriptographer.org/tutorials/paths/geometric-operations/

Support for these is planned, but work on it has not started yet. The math behind it is rather complex.

Until they are available, you could always visually fake it by layering new item over the item to remove from, using the background color.

Jürg

bootsmaat

unread,
Sep 20, 2011, 4:09:06 AM9/20/11
to Paper.js
Thanks. I had planned to "reveal" something (a raster) underneath the
item that I erase, so using the background color to fake an eraser
won't work. Mh.

Jürg Lehni

unread,
Sep 20, 2011, 4:22:57 AM9/20/11
to pap...@googlegroups.com
In this case you should be able to work with clipMasks:

http://paperjs.org/reference/group#clipped
http://paperjs.org/reference/item#clipmask

bootsmaat

unread,
Sep 20, 2011, 8:23:38 AM9/20/11
to Paper.js
Thanks Jürg. If I understand this correctly, I can reveal parts of an
Item by creating a clipMask on top of it. The thing is, I want to do
both: make parts of an item disappear (let's call it item A) and
reveal parts of another item underneath it (item B). Think of a wall
with two layers of wallpaper: I erase parts of the top layer only to
reveal the wallpaper underneath it. Can this be done with the methods
that are already availably in paper.js?

One idea: three items on top of each other.
–– invisible copy of item B
–– item A (gets "erased")
–– item B

Instead of erasing parts of item A I use clipMask to reveal the
invisible copy of item B. It covers up parts of item A and makes it
look like parts of item B are revealed underneath item A.

Hope this makes sense.

On 20 Sep., 10:22, Jürg Lehni <li...@scratchdisk.com> wrote:
> In this case you should be able to work with clipMasks:
>
> http://paperjs.org/reference/group#clippedhttp://paperjs.org/reference/item#clipmask

Rohit Agarwal

unread,
Apr 14, 2012, 2:00:26 AM4/14/12
to pap...@googlegroups.com
The HTML5 Canvas implements composite operations. Something like destination out would be helpful here. Is there some sort of an implementation in Paper js for such operations?

Oliver Beattie

unread,
Apr 15, 2012, 2:18:07 PM4/15/12
to pap...@googlegroups.com
Paper.js doesn't support this, no. It's something I needed back in November and I added the functionality to clipped Groups back then. I opened a pull request for it, but (just as with every pull request I've opened it seems) it's just sat there uncommented/not acted upon since then :\

In any case, feel free to use the modified code: https://github.com/paperjs/paper.js/pull/59

I've also extended this a bit further/updated it a bit since I opened the pull request in our fork at https://github.com/luckyvoice/paper.js if you want to take a look at that too.

Matthew Lenton

unread,
Dec 3, 2012, 11:25:02 PM12/3/12
to pap...@googlegroups.com
Hey Oliver,

Looks like this update could be of use to us, too - is there an example of how to use this new clipMask functionality?  Your help would be greatly appreciated.
This email comes from the Lovatts Media Group Pty Ltd For information on Lovatts crossword and puzzle magazines including news, tutorials and subscriptions, visit www.lovattspuzzles.com Play online games & puzzles with a chance to win prizes at www.youplay.com Order Lovatts syndicated puzzles for your own publication, website or other platform from www.puzzlexperts.com

Disclaimer: This communication contains information which is confidential. If you are not the intended recipient of this communication please delete and destroy all copies and do not copy, disclose or distribute this communication without the prior authority of Lovatts Media Group. Any views expressed in this communication are those of the individual sender, except where the sender specifically states them to be the views of Lovatts Media Group. Except as required by law, Lovatts Media Group does not represent, warrant and/or guarantee that the integrity of this communication has been maintained.
Please consider the environment before printing this email. 

Jürg Lehni

unread,
Dec 4, 2012, 2:52:42 AM12/4/12
to pap...@googlegroups.com
Hi Matthew,

The reason why your pull requests sat uncommented is that neither Jonathan nor I had much time to spend on the library for most of the year. We have only started working on it again more intensively about two months ago.

I'd like to finally look into this. But it seems the requests can't be merged now. Would you mind making new ones out of your changes?

Thanks your work, and apologies for the delay.

Jürg

Matthew Lenton

unread,
Dec 4, 2012, 4:21:23 PM12/4/12
to pap...@googlegroups.com
Hi Jürg,

Actually, this is Oliver's grat work, that I'm just seeking some clarification with. 

I may not be in the best position to create the new pull requests, though maybe if Oliver is willing, he would certainly know the exact changes to merge better than I would IMHO.

Thanks again for the great work, would have liked to have seen your lecture last night  ;-)

Jürg Lehni

unread,
Dec 4, 2012, 7:12:48 PM12/4/12
to pap...@googlegroups.com
Ha, how funny! The different worlds start to mix. My lecture's tonight, in case you're in LA :)

http://hammer.ucla.edu/programs/detail/program_id/1501
Reply all
Reply to author
Forward
0 new messages