search

SVG-Edit / svgedit

Powerful SVG-Editor for your browser
MIT License
6.69k stars 1.56k forks source link

Boolean path operations #117

Closed onlymega closed 2 years ago

onlymega commented 8 years ago

Is it possible to add boolean operations like Union, Xor, Difference for path?

Here is a link to the JS library that supports this operations: http://jsclipper.sourceforge.net/6.1.3.2/main_demo.html

Second library: https://github.com/poilu/raphael-boolean

jarek-foksa commented 8 years ago

As of 2016, Paper.js has the most advanced implementation of boolean operations. Raphael does not support all the edge cases, while Clipper can output only polygons.

codedread commented 8 years ago

I'm not 100% certain but I seem to remember that its license was not compatible.

On Tue, Jun 28, 2016, 10:01 AM Jarek Foksa notifications@github.com wrote:

As of 2016, Paper.js has the most advanced and reliable implementation of boolean operations.

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/SVG-Edit/svgedit/issues/117#issuecomment-229076756, or mute the thread https://github.com/notifications/unsubscribe/AAGIDH6W9FEZXcD027FhiYJRbv3q3k_nks5qQTc5gaJpZM4IpXEI .

jarek-foksa commented 8 years ago

@codedread Paper.js is released under MIT license.

nicholaswmin commented 7 years ago

FWIW Paper.js boolean operations are intrinsically connected with it's own Path implementation - not a breeze in the park to prune out BoolOps and plug them in svg-edit, see: https://github.com/paperjs/paper.js/issues/1325#issuecomment-306788194

As for the second library, raphael-boolean, it is really not a reliable solution. I don't have any test cases that fail at the moment but I've gave that lib a test run back in 2014 and it failed in any non-trivial shape combination. Hasn't been updated since

An alternative could be Javascript Clipper which handles nearly all shape configurations with the sole problem that it deals with Polygons instead of Bezier curves. It's fairly straightforward to "polygonise" a curve before performing BoolOps on it - the result would be a polygon nonetheless - it can be turned back to curves by doing some kind of curve fitting over the result - but that would distort the original curve handle positions etc and it sounds like really dirty business.

IMO, best bet would be to port Paper's BoolOps code

jarek-foksa commented 7 years ago

@nicholaswmin Paper's Path can be easily constructed from SVG path and later serialized back to SVG. The main drawback would be the size of Paper.js library which contains a lot of code unrelated to the boolean operations.

nicholaswmin commented 7 years ago

@jarek-foksa

Paper's Path can be easily constructed from SVG path

That's definitely one way to do it

The main drawback would be the size of Paper.js library

We could defer/async Paper.js lib so it doesn't impact the load time

Do this as a "stopgap" perhaps?

yisibl commented 3 years ago

Is there any progress?