在2个div之间画一条线

Question

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

以下是我的HTML代码.我需要从带有id friend1的div到带有id 的div 绘制一条线friend2.

<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最简单的解决方案:

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

帆布

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

WebGL的

用于Web的OpenGL(3D).可能对你来说太重了,但我会列出它的完整性.