将Poilu raphael布尔运算(并、减)与SVG-edit集成

Question

我正在修改svg-edit，更具体地说是标记为McKays方法https://github.com/duopixel/Method-Draw。

我想使用我找到的拉斐尔库：https://github.com/poilu/raphael-boolean，它允许我在画布内的路径上执行布尔(设置)操作。

现在，我已经在编辑器中实现了一个按钮，它将启动一个函数：

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

好的，在点击按钮时，编辑器不是应该返回一个带有椭圆的联合(焊接)路径吗？

还是我搞错了？

我认为，由于svg-edit为画布使用了不同的名称，所以必须对var paper = Raphael(" canvas "，250,250)；行进行一些更改，但我不知道如何处理它。

任何帮助都将深表感谢，因为我已经为此苦苦挣扎了一段时间。

更新:这个库不能处理多对象焊接，自相交和许多其他情况。只有当我们想要在两个简单的对象上执行操作时，它才能工作。这可能与手头的问题不直接相关，但我认为不管怎样，提及它是明智的。

如果您正在寻找SVG元素上的布尔操作，请参考此问题：Boolean Operations on SVG paths

Answer 1

您发布的代码在隔离状态下工作，如下所示：http://jsfiddle.net/5SaR3/

您应该能够将拉斐尔构造函数行更改为类似以下内容：

var paper = Raphael(canvas);

其中canvas是对svg-edit使用的SVG元素的对象引用。