raphael.boolean.js - perform boolean operations with Raphaël

This plugin provides boolean operations for the javascript vector library Raphaël (https://github.com/DmitryBaranovskiy/raphael).

You can use single elements (not sets) to perform

• union [A + B | A OR B]
• difference [A - B | A NOT B]
• intersection [A * B | A AND B]
• exclusion [A ^ B = (A + B) - (A * B) | A XOR B]

Additionally it provides a toPath method which converts a shape (rectangle, circle, ellipse) into a path. This function is also used internally by the plugin to make boolean operations possible on those elements. Another utility method is getPathInters, which returns the intersections of two paths and can be helpful for debugging.

Usage / Example

In your application load the plugin after the Raphaël library.

<script type="text/javascript" src="raphael-min.js"></script>
<script type="text/javascript" src="raphael.boolean.js"></script>

Create a Raphaël canvas (e.g. on <div id="canvas" ></div>) and at least two elements.

var paper = Raphael("canvas", 250, 250);

var path = paper.path("M 43,53 183,85 C 194,113 179,136 167,161 122,159 98,195 70,188 z");
path.attr({fill: "#a00", stroke: "none"});

var ellipse = paper.ellipse(170, 160, 40, 35);
ellipse.attr({fill: "#0a0", stroke: "none"});

Now you can perform one of the operations which delivers a string for the resulting path. Every of the four methods has two parameters for the Raphaël elements to process.

var newPathStr = paper.union(path, ellipse);

//draw a new path element using that string
var newPath = paper.path(newPathStr);
newPath.attr({fill: "#666"});

// as they aren't needed anymore remove the other elements
path.remove();
ellipse.remove();

Enjoy clipping!

Note: Currently the plugin is not able to handle self intersecting (sub-)paths properly. This is concerning fills in SVG due to default non-zero fill rule.