Raphael draw path with mouse

Question

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

Answer 1

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

Answer 2

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