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

【问题标题】：Building a Raphael path object in piecemeal fashion以零碎的方式构建 Raphael 路径对象
【发布时间】：2012-01-17 04:06:48
【问题描述】：

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

我试过做类似的事情：

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

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

【问题讨论】：

【解决方案1】：

看来您必须调用 .attr() 的 setter 版本才能更新显示。以下似乎有效：

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

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

【讨论】：

【解决方案2】：

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

使用带有 elem = paper.path() 的 Raphael API 初始化路径
附加 mousemove 处理程序以直接更改 SVG DOM 路径，通过 elem.node.setAttribute("d", elem.node.getAttribute("d")+newLineSegment);Raphael 使用 'd' 属性在内部设置路径字符串，因此这应该是跨浏览器兼容的 AFAICT （更新：实际上我弄错了；这只适用于兼容 SVG 的浏览器，不适用于 VML），同时绕过了我们不需要在内部循环上运行的一大堆代码
绘制完成后，通过 Raphael 的 API 显式设置路径元素的路径属性，这样它就可以在 Element 上进行所有适当的内务管理，例如：elem.attr( {path: elem.node.getAttribute("d") })

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

我已经为使用它的画板完成了一个 jQuery UI 小部件。如果您发现开源这样有用的东西，请发表评论。如果有兴趣，我会看看我是否可以做到这一点。

【讨论】：

【解决方案3】：

我可以确认这是可行的：

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

【讨论】：