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

Question

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

两条线之间应画出

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

和

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

此CodePen：https://codepen.io/anon/pen/XeamWe

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

如果我没错，我不能使用画布，对吧？我可以用什么呢？

Answer 1

让我指出你正在寻找的答案，它是一个名为'SVG'的dom元素类型，它支持当今大多数（如果不是全部）Web浏览器（所以你不需要插入任何外部的东西），你可以在Photoshop和许多其他有用的东西中绘制线条，形状，应用图形滤镜，但这里要指出的是所谓的“路径”，这种形状可以包括带有尖角的直线，或曲线（bezier）或两者结合。

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

路径甚至可以用标记装饰，如路径末端或路径开头的箭头，您甚至可以根据自己的喜好设计自己的标记，如果要深入挖掘它们，还可以设置更多。

祝好运！ :)