0

我正在修改 svg-edit，更具体地说是 Mark McKays Method draw：https ://github.com/duopixel/Method-Draw 。

我想使用我发现的这个 Raphael 库：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();

好的，单击按钮后，编辑器不应该返回带有椭圆的联合（焊接）路径吗？

还是我弄错了？

我认为var paper = Raphael("canvas", 250, 250); 必须改变一些东西。行，因为 svg-edit 为画布使用了不同的名称，但我不知道该怎么做。

任何帮助将不胜感激，因为我已经为此苦苦挣扎了一段时间。

更新：该库无法处理多对象焊接、自相交和许多其他情况。只有当我们想对 2 个简单对象执行操作时，它才有效。这可能不会立即与手头的问题相关，但我认为无论如何提及它是明智的。

如果您正在寻找 SVG 元素上的布尔运算，请参阅此问题：SVG 路径上的布尔运算

4

1 回答 1

1

您发布的代码是独立工作的，如下所示：http: //jsfiddle.net/5SaR3/

您应该能够将 Raphael 构造函数行更改为：

var paper = Raphael(canvas);

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

于 2013-03-05T22:39:06.350 回答