我正在使用raphael javascript库,我想用鼠标绘制一条直线 . 我想让用户单击某处,放置路径的单个点,然后让线跟随鼠标直到再次单击,此时线将永久放置在画布上 .
现在唯一的方法就是在他们点击时创建一个路径,在移动鼠标时不断移除和重绘它,然后再次点击时再次创建它,跟踪整个绘图模式 . 虽然这有效,但它有点复杂和混乱(特别是 Build 'Mx yLx y'字符串来定义新路径),我想知道是否有更好的方法来做到这一点 . 关于路径的raphael文档有点不尽如人意 .
谢谢!
从我可以告诉你做得对 . 我唯一要做的就是你可以从一个路径动画到另一个路径,而不是替换旧路径,你可以强制实施最大帧速率(比如说每秒不超过5个路径更新,但是你需要尝试查看哪些有效为了你) .
至于路径的文档我不认为还有什么可以说的 . 该方法接受SVG路径字符串并绘制它 . 您需要阅读的内容可能是路径的SVG文档 .
p = canvas.path("M0 0L100 0"); p.animate({path: [["M", 0, 0], ["L", 0, 100]]}, 4000);
实际上有一种更好的方法,使用 path.attr('path') . path 是路径部分数组的数组,例如
path.attr('path')
path
[ ['M', 100, 100], ['L', 150, 150], ['L', 200, 150], ['Z'] ]
如果您更新它,那么您不需要每次都从头开始绘制路径 .
Raphael.el.addPart = function (point) { var pathParts = this.attr('path') || []; pathParts.push(point); this.attr('path', pathParts); }; var path = paper.path(); path.addPart(['M', 100, 100]); //moveto 100, 100 path.addPart(['L', 150, 150]); //lineto 150, 150 path.addPart(['L', 200, 150]); //lineto 200, 150 path.addPart(['Z']); //closepath
2 回答
从我可以告诉你做得对 . 我唯一要做的就是你可以从一个路径动画到另一个路径,而不是替换旧路径,你可以强制实施最大帧速率(比如说每秒不超过5个路径更新,但是你需要尝试查看哪些有效为了你) .
至于路径的文档我不认为还有什么可以说的 . 该方法接受SVG路径字符串并绘制它 . 您需要阅读的内容可能是路径的SVG文档 .
如何为路径设置动画:
实际上有一种更好的方法,使用
path.attr('path')
.path
是路径部分数组的数组,例如如果您更新它,那么您不需要每次都从头开始绘制路径 .