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, 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!

Answer 1

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