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);

拉斐尔用鼠标绘制路径

2 个答案:

如何为路径设置动画：