相关疑难解决方法(0)

我如何(或哪些工具可用)在两个或多个元素之间绘制一条线来连接它们？HTML/CSS/JavaScript/SVG/Canvas的任意组合都可以.

如果您的答案支持其中任何一项,那么请提及:

• 可拖动的元素
• 可拖动/可编辑的连接
• 元素重叠避免

此问题已更新,以巩固其中的众多变体.

在我的页面上,我有一组div元素,应该用我在下图中显示的行连接.我知道用画布我可以在这些元素之间画线,但是有可能在html/css中用另一种方式吗？

我需要在html页面上的2个元素之间画线

结果应该是这样的:http: //img2.timg.co.il/forums/1_173873919.JPG

我想知道最好的办法是什么

1. 使用canvas和html5
2. 使用背景图像.
3. 由ajax制作动态图像

我想知道什么是最好的方式,如果在网上有一个简单的演示

谢谢

我也有一些问题,即获取元素中心的坐标也是绝对位置的其他元素的子元素. 在这里,您可以看到包含元素顺序的屏幕截图.

为了更好地理解这个问题,您可以访问GitHub上的我的存储库.index.html位于"/ Resources"文件夹中

所以,我在其他一些可拖动的窗口中有一些可拖动的窗口(带有interact.js),我想通过line-div连接它们的中心(它们是使用带有一些转换的div绘制的).

我使用这种方法来渲染线条(这里可能存在一些问题).我试图使用jsPlumb绘制线条,但我失败了:(

有得分x和y.

// bottom right        
var x1 = offset1.left - margin1.left + size1.width/2 - (this.dom.getAttribute('data-x') || 0);
var y1 = offset1.top - margin1.top + size1.height/2 - (this.dom.getAttribute('data-y') || 0);
// top right
var x2 = offset2.left - margin2.left + size2.width/2 - (this.dom.getAttribute('data-x') || 0);
var y2 = offset2.top - margin2.top + size2.height/2 - (this.dom.getAttribute('data-y') || 0);

(this.dom.getAttribute('data-x')|| 0) - 这是针对Interact.js的.

function getMargins(elem) {
    var top = 0, left = …

这是我想要实现的一个例子,可能还有几个对象:

重要的是这两个块是div,所以我并不是真的在寻找一个能帮我收到类似图片的绘图库.

关于我可以使用的任何方向？