javascript - Drawing a line between 2 divs - Stack Overflow

admin管理员组

文章数量:1295320

I need to draw a line between 2 divs. I currently use jQuery.

The following is my HTML code. I need to draw a line from the div with id friend1 to the div with id friend2.

<div style="top:30px;left:95px" id="friend1" original-title="Rafael Rosenberg1">
    <a href="./profile.php?id=1"><img src="" 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="" border="0" height="50" width="50"/></a>
</div> 

I need to draw a line between 2 divs. I currently use jQuery.

The following is my HTML code. I need to draw a line from the div with id friend1 to the div with id friend2.

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

• javascript
• jquery

Share Improve this question Follow edited Dec 22, 2011 at 1:21 Kevin Ji 10.5k44 gold badges4343 silver badges6565 bronze badges asked Dec 22, 2011 at 1:05 qweqwe qweqweqwe qwe 39388 silver badges1616 bronze badges 2

• and what have you tried? – Indranil Commented Dec 22, 2011 at 1:12
• Drawing lines in DHTML is not an easy thing to do. You might want to consider using a graphics library like SVG or a canvas element. Its hard for us to help you without more information. – Ring Commented Dec 22, 2011 at 1:13

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 5

Here is a small library that can draw a line together with jQuery:

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

So there are a lot of ways of drawing on a document and it really depends on your actual need.

Plain Old DHTML

It's difficult to draw on a plain HTML document. CSS3 provides some solutions, as you can rotate and I believe it has more transparency features.

But, you COULD create a div that is the length of the distance between the two points (which you can get by your positioning - top right bottom left). Fill this div with a background color and give it some width. Position one end of the div at your first point, then figure out the angle to the second point (also using positioning and some trigonometry), and use CSS3 to rotate the div into position.

Needless to say, techniques like this are cumbersome.

SVG

Vector graphics embedded in your document. You can draw lines easily and apply rotations, as well as add image elements. This would probably be the easiest solution WITH CAVEATS:

1. SVG is not well supported or documented, so there is a learning curve. Browser support for SVG seems to be increasing, however. IE just started supporting it in version 9.
2. SVG is an embedded technology and exists in some "viewbox" on your page. So, if you want this to be happening inline with regular HTML elements, it will be more difficult. However, SVG does provide functions that map its internal coordinate system to screen pixels, so it's also doable.

Canvas

Canvas is raster-based graphics embedded in your document. It's good for images, a bit harder for lines, but totally doable given some of the libraries out there. Like SVG, browser support is limited but growing every day, and it also is difficult to interact with the rest of the page in an inline way.

WebGL

OpenGL (3D) for the web. Probably way too heavy for you, but I'll list it for pleteness.

here's a link to a gist that uses javascript (jquery) to draw a path (and redraw it in case of window resizing) between any 2 html elements.

demo

本文标签： javascriptDrawing a line between 2 divsStack Overflow