Question

Anyone has sample code for drawing a rubber band style path between two shapes in Raphael.

I saw few questions around drawing path progressively at How to draw a vector path progressively? (Raphael.js)

But my requirement is to be able to click on one shape and move the mouse to the other shape and while the mouse moves, there should be a line path following the mouse like a rubber band. Once the click happens on the second shape the line path has to be locked in.

I tried the Joint.js http://www.jointjs.com/ with Raphael but it can draw lines but not interactively.

Answer 1

Here is the basic code to get you started:

var w = window.innerWidth;
var h = window.innerWidth;
var paper = Raphael(0, 0, w, h);
var nodes = paper.set();

var circle1 = paper.circle(w/8, h/3, w/16)
    .attr({fill: "#000"})
    .click(line);
var circle2 = paper.circle(w - w/8, h/3, w/16).attr({fill: "#000"})
    .attr({fill: "#000"})
    .click(line);


function line() {
  var band = paper.path("M 0 0").attr({"stroke-width": 5})
  band.node.style.pointerEvents = "none";
  dimensions = this.getBBox();
  var x = dimensions.x + dimensions.width/2;
  var y = dimensions.y + dimensions.height/2;
  if (!window.onmousemove) {
    window.onmousemove = function(e){
        band.attr({path: "M " + x + " " + y + "L " + e.x + " " + e.y});
    }
  }
  else {
     window.onmousemove = null;
  }
}

You can check out a demo here: http://jsfiddle.net/57myn/