拉斐尔用鼠标绘制路径答案

【问题标题】：Raphael draw path with mouse拉斐尔用鼠标绘制路径
【发布时间】：2011-05-20 09:45:46
【问题描述】：

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

目前唯一的方法似乎是在他们单击时创建一个路径，在他们移动鼠标时不断删除并重新绘制它，然后在他们再次单击时再次创建它，跟踪绘图模式整个过程j。虽然这可行，但它有点令人费解和混乱（尤其是构建 'Mx yLx y' 字符串来定义新路径），我想知道是否有更好的方法来做到这一点。关于路径的 raphael 文档还有一些不足之处。

谢谢！

【问题讨论】：

伙计们，我试图在过去 3 个小时内实现这一点，但我有点卡住了.. So8res 或其他人，你能发布一些（示例）代码吗？

标签： javascript raphael

【解决方案1】：

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

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

如何为路径设置动画：

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

【讨论】：

你知道如何为数组设置动画吗？ jsfiddle.net/dxyJN谢谢

【解决方案2】：

实际上有一个更好的方法可以做到这一点，使用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

【讨论】：