Question

任何人都有示例代码，用于在Raphael的两个形状之间绘制橡皮筋风格的路径。

我在How to draw a vector path progressively? (Raphael.js)

处逐渐看到了关于绘制路径的几个问题

但我的要求是能够点击一个形状并将鼠标移动到另一个形状，当鼠标移动时，鼠标后面应该有一个像橡皮筋一样的线路。一旦点击发生在第二个形状上，就必须锁定线路径。

我和拉斐尔一起尝试过Joint.js http://www.jointjs.com/，但它可以划线但不能互动。

Answer 1

以下是帮助您入门的基本代码：

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

您可以在此处查看演示：http://jsfiddle.net/57myn/

RaphaëlJS。两个形状之间的Rubberband路径

1 个答案: