Search code examples
svgraphaeljquery-svglibrsvgsvg-edit

Integrating Poilu raphael boolean operations(union,substraction) with SVG-edit

I am doing a modification of svg-edit, more specifically Mark McKays Method draw: https://github.com/duopixel/Method-Draw.

I want to use this Raphael library i found: https://github.com/poilu/raphael-boolean that allows me to perform boolean(set) operations on paths within my canvas.

Now i have implemented a button within the editor that fires up a function:

 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"});


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();

Okay, upon clicking the button isnt the editor supposed to return a unioned(welded) path with an ellipse?

or am i getting this wrong?

i am figuring that something must change with the var paper = Raphael("canvas", 250, 250); line since svg-edit is using a different name for the canvas but i have no idea how to go about it.

Any help will be deeply appreciated as i have been struggling for sometime with this.

UPDATE: This library is unable to handle multi-object welding, self intersections and many other cases. It is only working if we want to perform operations on 2 simple objects. This might not be immediately relevant to the question at hand but i thought it is wise to mention it anyway.

Refer to this question if you are looking for Boolean Operations on SVG elements: Boolean Operations on SVG paths

Solution

  • The code you posted works in isolation, as shown here: http://jsfiddle.net/5SaR3/

    You should be able to change the Raphael constructor line to something like:

    var paper = Raphael(canvas);

    where canvas is an object reference to the SVG element used by svg-edit.