使用鼠标在 Raphael 中绘制路径

Question

我正在使用raphael javascript库，想要用鼠标画一条直线。我希望用户点击某处，放置路径上的单个点，然后让线跟随鼠标移动，直到再次点击，此时线就被永久地放置在画布上。

目前唯一的方法似乎是在点击时创建路径，在移动鼠标时不断删除并重新绘制它，然后再次点击时创建它，一直跟踪绘图模式。虽然这样可以工作，但有些复杂和混乱（特别是构建'Mx yLx y'字符串来定义新路径），我想知道是否有更好的方法来实现这一点。raphael关于路径的文档还有待改进。

谢谢！

- So8res

---

大家好，我已经尝试了3个小时，但是卡住了... So8res或其他人，你们能否请发一些（示例）代码？ - Faarbhurtz

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

- Skilldrick

Answer 2

据我所知，您正在正确地进行操作。唯一需要补充的是，您可以将动画从一个路径转换为另一个路径，而不是替换旧路径，并且您可以强制执行最大帧速率（例如每秒不超过5个路径更新，但您需要尝试并确定适合您的速率）。

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

如何对路径进行动画：

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

- Alin Purcaru

---

你知道如何将数组动画化为多个路径吗？ http://jsfiddle.net/dxyJN/ 谢谢 - cristiano matos