在网站上用曲线连接元素

Question

我正在寻找一个轻量级的库或代码段来连接网站上的任何两个元素，并用曲线。元素不在画布上 - 可以是任何DOM元素 - 当浏览器窗口调整大小时，曲线应该重绘。

我想要实现的一个例子可以在这里看到：http://tinypic.com/r/2cia0k8/9。

我试过jsPlumb，但我正在寻找更轻量级的解决方案。

Answer 1

这是一个自己动手的解决方案。制作一个svg元素（不可见）覆盖整个文档。插入一个svg path元素，其开始和结束坐标是根据要连接的div的位置计算出来的，并且根据这些开始和结束坐标以您想要的任何方式创建其曲线。

对于下面的例子，点击“Run code snippet”，然后点击“Full page”按钮，然后调整窗口的大小以查看效果。

该示例有两个div通过其水平内侧边缘的中间连接。曲线的细节当然取决于你。该连接器使用svg path的d属性构造。在本例中，“M”是“moveTo”坐标，其中路径将开始，“C”点是三次贝塞尔曲线的第一个和第二个控制点以及最终坐标。你将不得不去look those up了解它们是什么，但它们是在svg元素中创建平滑曲线的一般方法。

一个更复杂的文档需要更多的注意来确定svg path元素的开始和结束坐标，但这个例子至少给你一个开始的地方。

var divA  = document.querySelector("#a"); 
 
var divB  = document.querySelector("#b"); 
 
var connector = document.querySelector("#connector"); 
 

 
var drawConnector = function() { 
 
    var posnA = { 
 
    x: divA.offsetLeft + divA.offsetWidth, 
 
    y: divA.offsetTop + divA.offsetHeight/2 
 
    }; 
 
    var posnB = { 
 
    x: divB.offsetLeft, 
 
    y: divB.offsetTop + divA.offsetHeight/2 
 
    }; 
 
    var dStr = 
 
     "M" + 
 
     (posnA.x  ) + "," + (posnA.y) + " " + 
 
     "C" + 
 
     (posnA.x + 100) + "," + (posnA.y) + " " + 
 
     (posnB.x - 100) + "," + (posnB.y) + " " + 
 
     (posnB.x  ) + "," + (posnB.y); 
 
    connector.setAttribute("d", dStr); 
 
}; 
 

 
window.addEventListener("resize", drawConnector); 
 

 
drawConnector();

html, 
 
body { 
 
    width: 100%; 
 
    height: 100%; 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 
div { 
 
    color: white; 
 
    text-align: center; 
 
    padding: 10px; 
 
    position: fixed; 
 
    width: 200px; 
 
    height: 100px; 
 
} 
 
#a { 
 
    background-color: blue; 
 
    top: 20px; 
 
    left: 20px; 
 
} 
 
#b { 
 
    background-color: red; 
 
    bottom: 20px; 
 
    right: 20px; 
 
}

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"> 
 
    <path id="connector" fill="none" stroke="black" stroke-width="10" /> 
 
</svg> 
 
<div id="a">This is a regular HTML div.</div> 
 
<div id="b">So is this.</div>