连接javascript列表中的元素

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

下面是一个使用SO侧栏的示例：

我在寻找一个弯曲的答案，这样它们在穿过对方时看起来就不一样了，但它们不需要刻意避开对方。我认为一个很好的方法是根据直线的长度来计算曲线

我认为这应该很简单，不用使用库。几乎所有的答案都涉及到大约600kbs的外部数据

---

例如，我喜欢这个答案：但我要找的是曲线而不是直线。

所以这就是我想到的。我使用画布在上面画线，并

getBoundingClientRect

获得单个元素的位置。 它使用的是vanilla JS，因此没有600 kB的依赖项

var c=document.getElementById（“画布”）；
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”）；
抽绳（li1Pos、li4Pos、30）；
抽绳（li2Pos，li3Pos，20）；
功能抽绳（从、到、深度）{
ctx.beginPath（）；
ctx.moveTo（from.x，from.y）；
ctx.bezierCurveTo（从.x+深度，从.y，到.x+深度，到.y，到.x，到.y）；
ctx.stroke（）；
}

div{
显示器：flex；
}
帆布{
左边距：-45px；
}

1
2
3
4

这个问题似乎在不断地重新出现和消失。这是怎么回事？@UlugToprak我以前肯定看过一次。上周，我相信我之前发布过一次。在早期版本中，这个问题可能太让人困惑了，但即使在修改了这个问题之后，仍然骚扰人们重新审视这个问题似乎不是正确的做法，因此我选择重新发布它。如果需要改进，请留下一些意见。提前感谢，并为重新发布的家伙感到抱歉！这些行是静态生成的还是动态生成的？@karoluS动态生成谢谢，回答得很好。