Javascript 以分段方式构建Raphael路径对象

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

我试过这样做：

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

---

…它确实改变了由

e.attr（“path”）

返回的数组，但没有改变图形，因此我猜这是不受支持的行为。

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

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

---

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

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

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

---

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

我可以证实这是可行的：

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

---

我可以证实这是有效的：

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

---

通过查看Raphael 2源代码，我找到了一种高效创建增量路径的方法，方法是：

使用Raphael API w/

elem=paper.path（）初始化路径

通过

elem.node.setAttribute（“d”，elem.node.getAttribute（“d”）+newLineSegment），附加mousemove处理程序以直接更改SVG DOM路径

Raphael使用“d”属性在内部设置路径字符串，因此这应该是跨浏览器兼容的AFAICT（更新：实际上我错了；这只适用于SVG兼容的浏览器，而不是VML），同时绕过了我们不需要在内部循环上运行的一大堆代码

绘制完成后，通过Raphael的API显式设置path元素的path属性，这样它就可以在

元素上执行所有适当的内务管理，例如：
elem.attr（{path:elem.node.getAttribute（“d”）}）

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

---

我已经完成了一个用于sketchpad的jQueryUI小部件，它使用了这个。如果你觉得开源这样的东西有用，请留下评论。如果有人感兴趣，我会看看我是否能做到这一点。

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

使用Raphael API w/

elem=paper.path（）初始化路径

通过

elem.node.setAttribute（“d”，elem.node.getAttribute（“d”）+newLineSegment），附加mousemove处理程序以直接更改SVG DOM路径

Raphael使用“d”属性在内部设置路径字符串，因此这应该是跨浏览器兼容的AFAICT（更新：实际上我错了；这只适用于SVG兼容的浏览器，而不是VML），同时绕过了我们不需要在内部循环上运行的一大堆代码

绘制完成后，通过Raphael的API显式设置path元素的path属性，这样它就可以在

元素上执行所有适当的内务管理，例如：
elem.attr（{path:elem.node.getAttribute（“d”）}）

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

---

我已经完成了一个用于sketchpad的jQueryUI小部件，它使用了这个。如果你觉得开源这样的东西有用，请留下评论。如果有人感兴趣，我会看看是否能做到。

是吗？不知道你的意思，但这似乎是一个类似的问题。不管怎样，我在下面回答。是吗？不确定你的意思，但这似乎是一个类似的问题。不管怎样，我在下面回答。