连接列表javascript中的元素

Question

如何用曲线连接列表中的2个元素。

下面是使用SO边栏的示例：

我正在寻找一个弯曲的答案，以使它们在彼此经历时看起来不一样，但是它们不必刻意回避。我认为这样做的一种好方法是根据线的长度计算曲线。

我认为不使用库就可以很简单地做到这一点。 combined question中的几乎所有答案都涉及大约600kbs的外部因素。

例如，我喜欢以下答案：https://stackoverflow.com/a/35493737/663447，但我正在寻找的是曲线而不是直线。

Answer 1

这就是我想出的。我正在使用画布在其上绘制线条，并使用getBoundingClientRect获得单个元素的位置。 它使用的是香草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>