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



我正在修改svg-edit,更具体地说,是Mark McKays Method draw: 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();

点击按钮后,编辑器不应该返回一个带椭圆的联合(焊接)路径吗?

还是我理解错了?

我认为必须改变var paper = Raphael("canvas", 250,250);行,因为svg-edit是使用不同的名称为画布,但我不知道如何去它。

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

更新:此库无法处理多对象焊接,自相交和许多其他情况。只有当我们想对2个简单对象执行操作时,它才有效。这可能与手头的问题没有直接关系,但我认为无论如何提到它是明智的。

如果您正在寻找SVG元素上的布尔操作,请参阅此问题:SVG路径上的布尔操作

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

你应该能够将Raphael构造函数行修改为:

var paper = Raphael(canvas);

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

最新更新