Question

我正在对svg-edit进行修改，更具体地说是Mark McKays方法绘制：https://github.com/duopixel/Method-Draw。

我想使用我发现的这个Raphael库：https://github.com/poilu/raphael-boolean允许我在画布中的路径上执行布尔（set）操作。

现在我在编辑器中实现了一个按钮来激活一个函数：

 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元素的布尔运算，请参阅此问题：Boolean Operations on SVG paths

Answer 1

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

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

var paper = Raphael(canvas);

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

将Poilu raphael布尔运算（并集，减法）与SVG编辑集成

1 个答案: