如何在两个 DOM 元素之间绘制一条贝塞尔曲线

Question

如何在两个非静态DOM 元素之间绘制贝塞尔线，如下所示：

这两条线应该画在

<div class="brick small">Line starts here</div>

和

<div class="brick small">Line ends here</div>

这个CodePen的： https://codepen.io/anon/pen/XeamWe

请注意，可以拖动框。 如果其中一个元素更改其 position，则应相应地更新该行。

如果我没记错的话，我不能使用 canvas，对吧？ 我可以用什么代替？

Answer 1

让我向您指出我相信您正在寻找的答案，它是一种称为“SVG”的 dom 元素类型，即使不是所有的 Web 浏览器也都支持它（因此您不需要插入任何外部的东西），您可以在其中绘制线条、形状、应用图形滤镜，就像在 Photoshop 中一样以及许多其他有用的东西，但这里要指出的是所谓的“路径”，一种可以由两条直线和尖角组成的形状，或曲线（贝塞尔曲线）或两者结合。

创建此类路径的最简单方法是首先在 Illustrator 中绘制它们，以 SVG 格式保存形状，在文本编辑器中打开该文件，然后几乎只需复制生成的标记代码并将其粘贴到您的 html 中，因为它那里支持。 这将导致绘制的形状显示在您的站点上。 但是在您的情况下，您不会遇到路径的有点复杂的结构，因为您希望使用 javascript 来控制它，所以我建议首先通过从 Illustrator 导出以这种方式制作一些简单的路径，在代码中研究这些，然后在 javascript 中操作它们的贝塞尔值，直到你掌握了它们的工作原理，一旦你完成了这些，你将能够创建你想要的准确的贝塞尔形状并且（知道元素的位置你想连接）定位它们，以便它们连接你的盒子。

路径甚至可以用标记来装饰，例如路径末端或开头的箭头，您甚至可以根据自己的喜好设计自己的标记，如果您愿意深入研究，还可以设计更多。

祝你好运！ :)

Answer 2

Leader Line就是一个很好的库。

如前所述： https ://stackoverflow.com/a/61481292/5037146