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

Posted

技术标签:

【中文标题】如何在两个 DOM 元素之间绘制贝塞尔线【英文标题】:How to draw a bezier line between two DOM elements 【发布时间】: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

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

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

【问题讨论】:

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

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

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

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

祝你好运! :)

【讨论】:

以上是关于如何在两个 DOM 元素之间绘制贝塞尔线的主要内容,如果未能解决你的问题,请参考以下文章

如何使用 Swift 在 SpriteKit 上绘制贝塞尔曲线?

如何使用缓冲测量法在两个点之间用鼠标向下绘制三个js中的动态线

如何将两个模型的pr曲线绘制到一起

在 React 中将 mapbox 线变成 turf.js 曲线(贝塞尔)线

如何检测贝塞尔曲线和圆形物体之间的碰撞?

如何在 pandas / matplotlib 中绘制多条线