如何在两个DOM元素之间绘制bezier线
如何在两个非静态 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
请注意，可以拖动这些框。如果其中一个元素更改了其位置，则应相应地更新行。
如果我没记错的话，我就不能用画布了，对吧？我可以用什么来代替呢？
回答 1
Stack Overflow用户
发布于 2019-04-16 04:37:04
让我告诉你我相信你正在寻找的答案，它是一种叫做'SVG‘的dom元素类型，它被当今大多数(如果不是所有)的web浏览器所支持(所以你不需要插入任何外部的东西)，你可以在其中绘制线条，形状，应用图形滤镜，就像Photoshop和许多其他有用的东西一样，但这里要指出的是所谓的'path'，一种形状，可以由带有尖角的直线组成，也可以由曲线(bezier)或两者结合组成。
创建这样的路径最简单的方法是首先在Illustrator中绘制它们，将形状保存为SVG格式，在文本编辑器中打开该文件，然后复制生成的标记代码并将其粘贴到html中，因为html支持它。这将导致绘制的形状显示在您的网站上。但是在你的例子中，你不会绕过路径的一些复杂的结构，因为你希望使用javascript来控制它，所以我建议首先通过从Illustrator导出来创建一些简单的路径，在代码中研究这些路径，然后在javascript中操作它们的bezier值，直到你掌握了它们是如何工作的，一旦你做到了，你就可以创建你想要的准确的bezier形状(知道你想要连接的元素的位置)，这样它们就可以连接你的盒子。
路径甚至可以用标记来装饰，就像路径末尾或开始处的箭头一样，你甚至可以根据自己的喜好设计自己的标记，如果你想深入挖掘的话，可以设计更多。
祝你好运！:)
https://stackoverflow.com/questions/46507862
复制相似问题
腾讯云开发者
