連接列表中的元素javascript

Question

我將如何用曲線連接列表中的 2 個元素。

這是使用 SO 側邊欄的示例：

我正在尋找一個彎曲的答案，這樣它們在互相穿過時看起來就不一樣了，但它們不需要刻意避開對方。 我認為這樣做的一個好方法是根據線的長度計算曲線。

我認為這在不使用庫的情況下應該很簡單。 合並問題中的幾乎所有答案都涉及大約 600kbs 的外部數據。

例如，我喜歡這個答案： https : //stackoverflow.com/a/35493737/663447但我正在尋找曲線而不是直線。

Answer 1

所以這就是我想出的。 我正在使用畫布在其上繪制線條並使用getBoundingClientRect來獲取單個元素的位置。 它使用的是 vanilla JS，因此沒有 600 kB 的依賴項。

https://codepen.io/kwiniarski97/pen/VqNjbm?editors=1111

 var c = document.getElementById("canvas"); var li1 = document.getElementById("1"); var li1Pos = li1.getBoundingClientRect(); var li2 = document.getElementById("2"); var li2Pos = li2.getBoundingClientRect(); var li3 = document.getElementById("3"); var li3Pos = li3.getBoundingClientRect(); var li4 = document.getElementById("4"); var li4Pos = li4.getBoundingClientRect(); var ctx = c.getContext("2d"); drawLine(li1Pos, li4Pos, 30); drawLine(li2Pos, li3Pos, 20); function drawLine(from, to, deepness){ ctx.beginPath(); ctx.moveTo(from.x, from.y); ctx.bezierCurveTo(from.x + deepness, from.y , to.x+deepness, to.y, to.x, to.y); ctx.stroke(); }

 div{ display:flex; } canvas{ margin-left: -45px; }

 <div> <ul> <li id="1">1</li> <li id="2">2</li> <li id="3">3</li> <li id="4">4</li> </ul> <canvas id="canvas"></canvas> </div>