Question

我需要在2个div之间画一条线。我目前使用jQuery。

以下是我的HTML代码。我需要从ID为friend1的div中绘制一行到ID为friend2的div。

<div style="top:30px;left:95px" id="friend1" original-title="Rafael Rosenberg1">
    <a href="./profile.php?id=1"><img src="http://graph.facebook.com/100000796250125/picture" border="0" height="50" width="50"/></a>
</div> 
<div style="top:30px;left:250px" id="friend2" original-title="Rafael Rosenberg2">
    <a href="./profile.php?id=1"><img src="http://graph.facebook.com/100000796250125/picture" border="0" height="50" width="50"/></a>
</div>

Answer 1

这是一个可以与jQuery一起画线的小型库：

http://www.openstudio.fr/Library-for-simple-drawing-with.html

Answer 2

因此，有很多方法可以在文档上绘图，这实际上取决于您的实际需求。

普通旧DHTML

在纯HTML文档上绘图很困难。 CSS3提供了一些解决方案，因为您可以旋转，我相信它具有更多透明度功能。

但是，您可以创建一个div，它是两点之间距离的长度（您可以通过定位获得 - 右上角左下角）。用背景颜色填充这个div并给它一些宽度。将div的一端定位在第一个点，然后计算出与第二个点的角度（也使用定位和一些三角法），并使用CSS3将div旋转到位。

毋庸置疑，这样的技术很麻烦。

<强> SVG

文档中嵌入的矢量图形。您可以轻松绘制线条并应用旋转，以及添加图像元素。这可能是CAVEATS最简单的解决方案：

SVG没有得到很好的支持或记录，因此存在学习曲线。但是，对SVG的浏览器支持似乎正在增加。 IE刚刚开始在版本9中支持它。
SVG是一种嵌入式技术，存在于一些＆＃34;视图框中。在你的页面上。因此，如果您希望将此内容与常规HTML元素一起使用，则会更加困难。但是，SVG确实提供了将其内部坐标系映射到屏幕像素的功能，因此它也是可行的。

<强>帆布

Canvas是嵌入在文档中的基于栅格的图形。它对图像有好处，对于线条来说有点难度，但考虑到一些库，完全可行。与SVG一样，浏览器支持有限但每天都在增长，并且难以以内联方式与页面的其余部分进行交互。

<强> WebGL的

用于网络的OpenGL（3D）。可能对你来说太沉重了，但我会把它列为完整性。

Answer 3

这里是一个link的gist，它使用javascript（jquery）在任何2个html元素之间绘制一个路径（并在窗口大小调整的情况下重绘它）。

demo

在2个div之间画一条线

3 个答案: