以零碎的方式构建Raphael路径对象

Question

我正在尝试创建一个小手绘图应用程序，并找出一种方法将路径段（例如“L10,10”）添加到Raphael路径元素。 This answer表明这是不可能的。

我尝试过这样的事情：

var e = paper.path("M0,0L100,100")
e.attr("path").push(["L",50,100])

...它确实改变了e.attr("path")返回的数组，但没有改变图形，所以我想这是不支持的行为。

Answer 1

看起来您必须调用.attr（）的setter版本来更新显示。以下似乎有效：

var e = paper.path("M0,0L100,100");
e.attr("path").push(["L",50,100]);
e.attr("path", e.attr("path"));

虽然这看起来很笨拙。不过，我真的没有看到使用push（）的更好方法。

Answer 2

在浏览Raphael 2源代码后，我找到了一种有效创建增量路径的方法：

1. 使用Raphael API初始化路径w / elem = paper.path()

2. 附加mousemove处理程序直接改变SVG DOM路径，通过elem.node.setAttribute("d", elem.node.getAttribute("d")+newLineSegment); Raphael使用'd'属性在内部设置路径字符串，这样应跨浏览器兼容的AFAICT（更新：实际上我错了;这只适用于兼容SVG的浏览器，而不适用于VML），同时绕过一大堆代码，我们不需要在内部运行环

3. 完成绘图后，通过Raphael的API显式设置路径元素的路径属性，这样它就可以在Element上进行所有正确的内务管理，例如：elem.attr( {path: elem.node.getAttribute("d") })

   < / LI>

   这在Chrome以及我测试的其他现代浏览器上表现相当不错。

   我已经为使用它的草图完成了一个jQuery UI小部件。如果您觉得这样的东西可以作为开源使用，请发表评论。如果有兴趣的话，我会看看能否实现这一目标。

Answer 3

我可以证明这是有效的：

var arr = somePath.attrs.path;
arr.push(["L", x, y]);
somePath.attr({path: arr});