Search code examples
svgpaperjs

'Release' shapes from CompoundPath

I have a complex shape that was generated using a CompoundPath with multiple Path children. This is an example shape:

enter image description here

I want to know if there's some method on paperjs or some other way to generate simple Paths with the different shapes generated from the combination of all the Paths in the CompoundPath, something like the Release operation Adobe Illustrator as stated here.

I need this in order to be able to fill the different Path with colors using the fillColor property which is not possible when they are inside a CompoundPath.

Solution

  • I finally solved it as stated here. Quoting @iconexperience:

    I think what you need to do is to call setClockwise(true) on your CompoundPath and then call reorient(). This will set the orientation (clockwise/counter-clockwise) of each child path so that if several paths are stacked above each other, their orientation will be alternating. starting with clockwise for the bottom path. After that, if the orientation of a child in the CompoundPath is clockwise it represents a 'hole' or white area in your image. a clockwise orientation means that the path is filled.

    If you then clone the children of the CompoundPath and fill the ones with clockwise orientation in brown color and the other ones in white color, you should have a result that will look like the original.

    reorient() will only work if there are no intersections between the paths. Also, please note that reorient() is only available in the development version of Paper.js.