Raphaël JS. Rubberbandweg tussen twee vormen

Iedereen heeft voorbeeldcode voor het tekenen van een pad in rubberen bandstijl tussen twee vormen in Raphael.

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

Maar mijn vereiste is om in staat te zijn op één vorm te klikken en de muis naar de andere vorm te verplaatsen en terwijl de muis beweegt, moet er een lijnpad zijn dat de muis volgt als een rubberen band. Zodra de klik op de tweede vorm plaatsvindt, moet het lijnpad worden vergrendeld.

Ik heb de Joint.js http://www.jointjs.com/ met Raphael geprobeerd maar het kan lijnen tekenen maar niet interactief.

0

1 antwoord

Hier is de basiscode om u op weg te helpen:

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/

1
toegevoegd