I've e to a conceptually difficult problem.
In short, I need to find the vector path of two vector paths bined through different boolean operations. Such as the Union, the Difference, the Intersection, and Subtraction. It would be nice if I could do it similar to how Canvas does it's globalCompositeOperation.
How in the world would I go about doing this?
I've e to a conceptually difficult problem.
In short, I need to find the vector path of two vector paths bined through different boolean operations. Such as the Union, the Difference, the Intersection, and Subtraction. It would be nice if I could do it similar to how Canvas does it's globalCompositeOperation.
How in the world would I go about doing this?
Share Improve this question asked Sep 28, 2012 at 4:09 Ryan AllredRyan Allred 4144 silver badges13 bronze badges 5- 1 Post your sample code, that will be helpful! – turtledove Commented Sep 28, 2012 at 4:31
- 2 I have been asking [this][1], may be it it helps you [1]: stackoverflow./questions/11880739/… – philipp Commented Sep 28, 2012 at 8:07
- Looks like PaperJS has this, if JS is you preferred language. paperjs/examples/boolean-operations – Sid Datta Commented Sep 15, 2022 at 23:16
- @SidDatta, It does now. But it didn't in 2012. – Ryan Allred Commented Sep 16, 2022 at 16:06
- @RyanAllred The ment is for other people who land in this page, like me :-P . And in the small chance you are still working on the same project and haven't found the solution. – Sid Datta Commented Sep 18, 2022 at 0:23
3 Answers
Reset to default 3There is a JavaScript library that allows for boolean operations on SVG paths under the condition that the path is a polygon. Using a high enough sampling, the beziers can be polygonized to such a high quality that the visual result is almost identical to a true curve.
The library is called JavaScript Clipper and it is a port of Angus Johnson's Clipper (written in Delphi, C++, C# and Python), which in turn is based on Bala R. Vatti's clipping algorithm. It is able to handle all polygon cases, including the self-intersecting ones. The library has many extra functions, including all of the boolean operations and a node lightening algorithm for reducing the node count.
If you need to create new geometric shapes that consist of a number of other shapes intersected, unioned and so on you'll either have to handle it yourself in script, or use a vector graphics editor (Inkscape and Illustrator both offer this functionality) to do this for you.
The equivalent of globalCompositeOperation is the feComposite filter in SVG. Here's an example that looks similar to this in canvas which works in Opera.