5

I've come to a conceptually difficult problem.

In short, I need to find the vector path of two vector paths combined 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?

Ryan Allred
  • 389
  • 3
  • 13
  • 1
    Post your sample code, that will be helpful! – turtledove Sep 28 '12 at 04:31
  • 2
    I have been asking [this][1], may be it it helps you [1]: http://stackoverflow.com/questions/11880739/javascript-curve-library-with-boolean-operations – philipp Sep 28 '12 at 08:07
  • Looks like PaperJS has this, if JS is you preferred language. http://paperjs.org/examples/boolean-operations/ – Sid Datta Sep 15 '22 at 23:16
  • @SidDatta, It does now. But it didn't in 2012. – Ryan Allred Sep 16 '22 at 16:06
  • @RyanAllred The comment 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 Sep 18 '22 at 00:23

3 Answers3

3

There 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.

nicholaswmin
  • 21,686
  • 15
  • 91
  • 167
  • I've used JSClipper and found it very powerful not only for Boolean operations, but also for offsets of polylines and polygons. Other versions of the framework are available in many programming languages, e.g. C++, C#, Delphi, Python, Perl, Ruby and Haskell. – Jack Mar 18 '21 at 19:25
1

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.

Erik Dahlström
  • 59,452
  • 12
  • 120
  • 139
0

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.

Robert Longson
  • 118,664
  • 26
  • 252
  • 242