拉斐尔用鼠标绘制路径 [英] Raphael draw path with mouse

问题描述

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

I'm using the raphael javascript library, and I'd like to draw a straight line using the mouse. I'd like to let the user click somewhere, place a single point of the path, and then have the line follow the mouse until they click again, at which point the line is placed permanently on the canvas.

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

Right now the only way to do that seems to be to create a path when they click, constantly remove and redraw it when they move the mouse, and then create it once more when they click again, keeping track of the drawing mode all throughoutj. While this works, it's a bit convoluted and messy (especially building up 'Mx yLx y' strings to define the new path), and I was wondering if there's a better way to do this. The raphael documentation on path leaves a little to be desired.

谢谢！

推荐答案

从我可以告诉你的做法是正确的。我唯一要做的就是你可以从一个路径动画到另一个路径，而不是替换旧路径，你可以强制实施最大帧速率（比如说每秒不超过5个路径更新，但是你需要尝试查看哪些有效为了你）。

From what I can tell you're doing it right. The only thing I will ad is that you could animate from one path to another instead of replacing the old one and you could enforce a maximum frame rate (say no more than 5 path updates per second, but you need to try and see what works for you).

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

As for the documentation for path I don't think there is anything more that can be said. The method accepts a SVG path string and draws it. What you need to read may be the SVG documentation for path.

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

这篇关于拉斐尔用鼠标绘制路径的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！