Рисование линии между двумя divs

Мне нужно нарисовать линию между двумя div. В настоящее время я использую jQuery.Рисование линии между двумя divs

Следующий мой код HTML. Мне нужно нарисовать линию от div с id friend1 до div с 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.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

Рисование линий в DHTML - непростая задача. Возможно, вам захочется использовать графическую библиотеку, такую как SVG или элемент canvas. Его трудно для нас, чтобы помочь вам без дополнительной информации. – Ring

Вот небольшая библиотека, которая может нарисовать линию вместе с JQuery:

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

источник

2011-12-22 01:15:24

+1 - выглядит здорово - добро пожаловать на голосование! :) –

спасибо за ваш ответ helk +1 –

Таким образом, есть много способов нанесения на документ, и это действительно зависит от фактической потребности ,

Plain Old DHTML

Это трудно сделать на простом HTML документе. CSS3 предоставляет некоторые решения, поскольку вы можете вращаться, и я считаю, что он имеет больше возможностей прозрачности.

Но вы МОЖЕТЕ создать div, который является длиной расстояния между двумя точками (что вы можете получить по своему позиционированию - вверху справа внизу слева). Заполните этот div цветом фона и придайте ему некоторую ширину. Поместите один конец div в первую точку, затем определите угол ко второй точке (также используя позиционирование и некоторую тригонометрию) и используйте CSS3 для поворота div в положение.

Излишне говорить, что такие методы громоздки.

SVG

векторной графики, встроенные в документ. Вы можете легко рисовать линии и применять вращения, а также добавлять элементы изображения. Это, вероятно, было бы самым легким решением с CAVEATS:

SVG плохо поддерживается или не документирован, поэтому есть кривая обучения. Однако поддержка браузера для SVG возрастает. IE только начал поддерживать его в версии 9.
SVG - это встроенная технология и существует в некоторых «видовых окнах» на вашей странице. Итак, если вы хотите, чтобы это происходило с регулярными элементами HTML, это будет сложнее. Однако SVG предоставляет функции, которые отображают внутреннюю систему координат для отображения пикселей, так что это также выполнимо.

Холст

Холст растр на основе графики, встроенные в документ. Это хорошо для изображений, немного сложнее для строк, но вполне выполнимо, учитывая некоторые из библиотек. Как и SVG, поддержка браузера ограничена, но растет с каждым днем, а также сложно взаимодействовать с остальной частью страницы встроенным способом.

WebGL

OpenGL (3D) для сети. Наверное, слишком тяжело для вас, но я перечислил его для полноты.

источник

2011-12-22 01:25:23

Хм я просто наткнулся на эту невероятную библиотеку, которая использует JQuery и холст: http://jsplumb.org/jquery/demo.html –

вот link, который использует javascript (jquery), чтобы нарисовать путь (и перерисовать его в случае изменения размера окна) между любыми 2 элементами html.

demo

источник

2014-04-26 18:09:24 user3254083

Рисование линии между двумя divs

ответ

Смежные вопросы