拉斐尔用鼠标绘制路径

Question

我正在使用raphael javascript库,我想用鼠标绘制一条直线.我想让用户单击某处,放置路径的单个点,然后让线跟随鼠标直到再次单击,此时线将永久放置在画布上.

现在唯一的方法就是在他们点击时创建一个路径,在移动鼠标时不断移除和重绘它,然后再次点击时再次创建它,跟踪整个绘图模式.虽然这有效,但它有点复杂和混乱(特别是建立'Mx yLx y'字符串来定义新路径),我想知道是否有更好的方法来做到这一点.关于路径的raphael文档有点不尽如人意.

谢谢!

Answer 1

实际上有更好的方法,使用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

Answer 2

据我所知，你做得对。我要说的唯一一件事是，您可以从一个路径到另一条路径制作动画，而不是替换旧路径，并且您可以强制执行最大帧速率（例如每秒不超过 5 条路径更新，但您需要尝试看看什么有效）为你）。

至于路径的文档，我认为没有什么可说的了。该方法接受 SVG 路径字符串并绘制它。您需要阅读的可能是路径的 SVG 文档。

如何为路径设置动画：

p = canvas.path("M0 0L100 0");
p.animate({path: [["M", 0, 0], ["L", 0, 100]]}, 4000);