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

Question

我如何在两个非静态的DOM元素之间绘制贝塞尔曲线，就像这样：

这两条线应该在此CodePen的

<div class="brick small">线开始位置</div>

和

<div class="brick small">线结束位置</div>

之间绘制：https://codepen.io/anon/pen/XeamWe

请注意，方块可以拖动。如果其中一个元素改变了位置，则应相应地更新线条。

如果我没错的话，我不能使用画布，对吗？那我可以用什么代替？

- adelriosantiago

---

为什么你不能使用画布？ - Patrick Evans

你尝试在元素之间绘制的立方贝塞尔曲线是什么？请参阅 https://stackoverflow.com/help/mcve - guest271314

@PatrickEvans 因为这些框是DOM元素。据我所知，我必须重叠画布和框容器。 - adelriosantiago

而且没有任何阻止你这样做的事情。覆盖画布，将其 pointer-events 设置为无，根据需要进行绘制。 - Patrick Evans

Answer 1

让我指向你所寻找的答案，它是一种名为“SVG”的DOM元素类型，大多数现代Web浏览器都支持它（因此您不需要插入任何外部内容）。在其中，您可以绘制线条、形状，应用类似于Photoshop的图形滤镜以及许多其他有用的功能，但这里要指出的是所谓的“路径”，这是一个由直线和锐角或曲线（贝塞尔）或两者组合而成的形状。

创建这样的路径最简单的方法是首先在Illustrator中绘制它们，将该形状保存为SVG格式，在文本编辑器中打开该文件，然后将生成的标记代码复制并粘贴到您的HTML中，因为它在那里得到支持。这将导致所绘制的形状显示在您的网站上。但在您的情况下，您无法避免对路径进行稍微复杂的结构化，因为您希望使用JavaScript控制它，因此我建议首先通过从Illustrator导出来创建一些简单的路径，研究这些代码，然后在JavaScript中操纵其贝塞尔值，直到您掌握了它们的工作原理，一旦您做到了这一点，就能够创建准确的贝塞尔形状，然后（知道您想连接的元素的位置）将它们定位以连接您的框。

路径甚至可以用标记进行装饰，比如在路径的末尾或开头加上箭头，你甚至可以根据自己的喜好设计自己的标记等等，如果你深入挖掘，还有更多的功能。祝你好运！:)

- Johan Granqvist