在網站上用曲線連接元素

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>