Canvas 拉法ë;l JS。两个形状之间的橡胶带路径
任何人都有在Raphael中的两个形状之间绘制橡皮筋样式路径的示例代码 我看到了一些关于绘制路径的问题 但我的要求是能够点击一个形状并将鼠标移动到另一个形状,当鼠标移动时,应该有一条线路径像橡皮筋一样跟随鼠标。在第二个形状上单击后,必须锁定线路径Canvas 拉法ë;l JS。两个形状之间的橡胶带路径,canvas,svg,raphael,Canvas,Svg,Raphael,任何人都有在Raphael中的两个形状之间绘制橡皮筋样式路径的示例代码 我看到了一些关于绘制路径的问题 但我的要求是能够点击一个形状并将鼠标移动到另一个形状,当鼠标移动时,应该有一条线路径像橡皮筋一样跟随鼠标。在第二个形状上单击后,必须锁定线路径 我用Raphael尝试了Joint.js,但它可以画线,但不能交互。以下是入门的基本代码: var w = window.innerWidth; var h = window.innerWidth; var paper = Raphael(0, 0,
我用Raphael尝试了Joint.js,但它可以画线,但不能交互。以下是入门的基本代码:
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;
}
}
您可以在此处查看演示: