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

【问题标题】：How to draw a bezier line between two DOM elements如何在两个 DOM 元素之间绘制贝塞尔线
【发布时间】：2018-03-12 11:35:04
【问题描述】：

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

两条线应该画在中间

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

和

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

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

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

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

【问题讨论】：

为什么不能使用画布？
您尝试在元素之间绘制的三次贝塞尔曲线是什么？见stackoverflow.com/help/mcve
@PatrickEvans 因为盒子是 DOM 元素。 AFAIK，我将不得不重叠画布和盒子容器。
没有什么能阻止你这样做。覆盖画布，将其 pointer-events 设置为 none 并根据需要进行绘制

标签： javascript jquery html dom drawing

【解决方案1】：

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

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

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

祝你好运！ :)

【讨论】：