以零碎的方式构建Raphael路径对象 [英] Building a Raphael path object in piecemeal fashion
问题描述
我正在尝试创建一个小手绘图应用程序，并找出一种方法将路径段（例如L10,10）添加到Raphael路径元素。 这个答案表明这是不可能的。
I'm trying to create a little free-hand drawing app, and to figure out a way to add path segments (e.g. "L10,10") to a Raphael path Element. This answer suggests that isn't possible.
我尝试过这样的事情：
var e = paper.path("M0,0L100,100")
e.attr("path").push(["L",50,100])
...它确实改变了由 e.attr（path）返回的数组，但是没有改变图形，所以我猜这不是'支持的行为。
...which does alter the array returned by e.attr("path") but doesn't change the graphic, so I guess this isn't supported behavior.
推荐答案
在浏览Raphael 2源代码后，我找到了一种有效创建增量路径的方法：
After looking through the Raphael 2 source I figured out a method to create an incremental path efficiently, by:
-
使用Raphael API初始化路径w /
elem = paper.path（）
通过 elem.node.setAttribute（d）附加mousemove处理程序以直接更改SVG DOM路径，elem.node.getAttribute（d）+ newLineSegment）; Raphael使用'd'属性在内部设置路径字符串，这样应该跨浏览器兼容AFAICT（更新：实际上我错了;这只适用于兼容SVG的浏览器，而不适用于VML），同时绕过一大堆我们不需要在内循环上运行的代码
attaching the mousemove handler to alter the SVG DOM path directly, via elem.node.setAttribute("d", elem.node.getAttribute("d")+newLineSegment); Raphael uses the 'd' attribute to set path string internally so this should be cross-browser compatible AFAICT (Update: actually I'm mistaken; this only works for the SVG-compatible browsers, not VML), while bypassing a whole mess of code we don't need to have run on an inner loop
完成绘图后，通过Raphael的API显式设置路径元素的路径属性，这样它就可以在元素上进行所有正确的内务管理，例如： elem.attr（{path：elem.node.getAttribute（d）}）
when done drawing, set the path attribute for the path element explicitly through Raphael's API, so it can do all the proper housekeeping on the Element e.g.: elem.attr( {path: elem.node.getAttribute("d") })
这在Chrome和我测试过的其他现代浏览器上表现相当不错。
This performs reasonably well on Chrome, and other modern browsers I tested on.
我已经为使用它的草图完成了一个jQuery UI小部件。如果您觉得这样的东西可以作为开源使用，请发表评论。如果有兴趣的话，我会看看能否做到这一点。
I've finished a jQuery UI widget for a sketchpad that uses this. Please leave a comment if you would find such a thing useful as open source. If there's interest I'll see if I can make that happen.
这篇关于以零碎的方式构建Raphael路径对象的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
