如何在两个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

请注意，可以拖动这些框。如果其中一个元素改变了它的位置，那么该行应该相应地更新。

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

Answer 1

让我指出您所希望的答案，这是一种称为'SVG'的dom元素类型，当今大多数（即使不是全部）网络浏览器都支持它（因此您无需插入任何东西外部），您可以在其中绘制线条，形状，应用图形滤镜，就像在Photoshop和其他许多有用的东西中一样，但是此处要指出的是所谓的“路径”，即可以由两条直线组成的形状尖角或曲线（贝塞尔曲线），或两者兼而有之。

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

甚至可以用标记来修饰路径，例如在路径的末端或开始处的箭头，您甚至可以根据自己的喜好设计自己的标记，如果您要对其进行更深入的研究，则更多。

祝你好运！ ：）