javascript - Raphael draw path with mouse - Stack Overflow

admin管理员组

文章数量:1345578

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.

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.

Thanks!

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.

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.

Thanks!

• javascript
• raphael

Share Follow edited Sep 10, 2013 at 13:34 George Marmaridis 1,94011 gold badge1313 silver badges1515 bronze badges asked Dec 5, 2010 at 1:43 So8resSo8res 10.4k99 gold badges5959 silver badges8888 bronze badges 1

• Guys I'm trying to make this happen for the last 3 hours but I'm kinda stuck.. So8res or someone else, can you please post some (example) code? – Faarbhurtz Commented Jan 13, 2014 at 14:14

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

There's actually a better way to do this, using path.attr('path'). path is an array of path part arrays, e.g.

[
  ['M', 100, 100],
  ['L', 150, 150],
  ['L', 200, 150],
  ['Z']
]

If you update it then you don't need to draw the path from scratch each time.

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

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

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.

How to animate a path:

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

本文标签： javascriptRaphael draw path with mouseStack Overflow