在2格之間畫一條線

我需要在2格之間畫一條線。我目前使用jQuery。在2格之間畫一條線

以下是我的HTML代碼。我需要從編號爲friend1的div中劃出一條線到編號爲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>

來源

2011-12-22 Roth zerg

和你嘗試過什麼？ – Indranil 2011-12-22 01:12:25

在DHTML中畫線不是一件容易的事情。您可能要考慮使用像SVG或canvas元素這樣的圖形庫。如果沒有更多信息，我們很難幫助您。 – Ring 2011-12-22 01:13:52

這裏是一個小型庫，可與jQuery一起畫一條線：

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

來源

2011-12-22 01:15:24

+1 - 看起來很酷 - 歡迎投票！ :) – 2011-12-22 01:16:38

感謝您的答案+1 – 2011-12-22 01:20:56

所以有很多的文檔上繪製的方式，它真的取決於你的實際需要。

普通老式DHTML

這是很難畫上一個普通的HTML文檔。 CSS3提供了一些解決方案，你可以旋轉，我相信它有更多的透明度功能。

但是，你可以創建一個div，這是兩點之間的距離（你可以通過你的位置獲得 - 右上角的左下角）的長度。用背景色填充這個div，並給它一些寬度。將div的一端放在第一個點上，然後找出第二個點的角度（也使用定位和一些三角），並使用CSS3將div旋轉到位。

不用說，像這樣的技術是麻煩的。嵌入文檔中

SVG

矢量圖形。您可以輕鬆繪製線條並應用旋轉，以及添加圖像元素。這可能是CAVEATS最簡單的解決方案：

SVG沒有很好的支持或記錄，所以有一條學習曲線。但是，瀏覽器對SVG的支持似乎正在增加。 IE剛剛開始在版本9中支持它。
SVG是一種嵌入式技術，存在於您頁面上的某個「視圖框」中。所以，如果你想讓這種情況與普通的HTML元素髮生聯繫，那將會更加困難。但是，SVG確實提供了將內部座標系映射到屏幕像素的功能，所以它也是可行的。

帆布

Canvas是嵌入文檔中基於光柵的圖形。這對圖像來說很好，對線條來說有點難度，但對於一些圖像庫來說，完全可行。與SVG一樣，瀏覽器支持也是有限的，但每天都在增長，而且以內聯方式與頁面的其他部分進行交互也很困難。

WebGL的

的OpenGL（3D）爲網絡。可能對你來說太重了，但我會列出它的完整性。

來源

2011-12-22 01:25:23

嗯我剛剛遇到這個令人難以置信的庫，使用JQuery和畫布：http://jsplumb.org/jquery/demo.html – 2011-12-22 02:05:30

這裏有一個link到使用任何2個html元素之間的JavaScript（jquery的）來繪製的路徑（和窗口大小調整的情況下，重新繪製）一個要點。

demo

來源

2014-04-26 18:09:24 user3254083

在2格之間畫一條線

回答

相關問題