Нарисуйте линию между двумя элементами с зависанием

Я видел несколько примеров того, как это сделать, но никто из них не делает то, что мне нужно.Нарисуйте линию между двумя элементами с зависанием

Что я хочу сделать, это когда определенное изображение (оно может быть обернуто в отдельном div, если необходимо) зависнет, оно рисует линию от центра этого изображения до центра другого изображения (или потенциально из центр первого изображения в центр нескольких других изображений), и при выводе мыши он возвращается в исходное состояние.

Я пробовал использовать холст HTML5, но когда я попытался даже нарисовать линию на холсте, перемещая HTML (изображения) поверх холста, изображения покрывали холст и линию. Когда я попытался изменить z-индекс холста, он работал, за исключением того, что холст, покрытый HTML, и не изменил существующие изменения изображения на входе.

Я нашел обычные примеры рисования линий JS, но все они полагаются на знание точных точек, которые нужно нарисовать из ... есть ли способ сделать это, указав точные точки JS и не нуждаясь быть жестко закодированным? С наклонным отображением нарисованных линий?

источник

2013-10-07 Witold Kowelski

Сделайте изображения частью холста. – Boaz

Если вы хотите получить ощущение рисования, вы должны продолжить работу с холстом. Если скрытый div с границей удовлетворит ваши потребности, дайте нам знать –

как @Boaz предполагает, что в идеале вы захотите сделать изображения частью холста, сохранив трассу, где вы нарисовали их в каком-то наборе переменных javascript. Затем вы можете программно рисовать линии от изображения к изображению, поскольку все будет связано с одним и тем же экземпляром холста. Есть ли причина, по которой вы не можете этого сделать?

источник

2013-10-07 18:12:06 krishnakid

Ну, я действительно не рисую изображения (я?), А в изображениях уже включен JavaScript: '' и когда при наведении изображение URL уже изменен на alt-src, и тогда имя-имя отображается в TD ... и насколько я могу судить, я не могу легко поместить существующий код (так как около 100 таких изображений) в холсте, или я могу? –

Как об этой альтернативе, чтобы подчеркнуть связь между изображениями (если конструкция позволяет):

Добавить фоновый холст, который достаточно широко/высокие для всех вашего HTML IMG, чтобы соответствовать.
Добавьте html img поверх холста (а не как часть холста).
При наведении, нарисуйте соединительные линии на холсте & поставьте выделенную рамку вокруг подключенных imgs.
При уходе, очистите соединительные линии холста и удалите границы img.

Before Hover During Hover

Вот код и Fiddle: http://jsfiddle.net/m1erickson/4n9GK/

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css --> 
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 

<style> 
    body{ background-color: ivory; } 
    #canvas{border:1px solid red;} 
    #img1{position:absolute; left:30px; top:30px; } 
    #img2{position:absolute; left:200px; top:180px; } 
    #img3{position:absolute; left:30px; top:330px; } 
    #img4{position:absolute; left:200px; top:30px; } 
    #img5{position:absolute; left:30px; top:180px; } 
    #img6{position:absolute; left:200px; top:330px; } 
</style> 

<script> 
$(function(){ 

    var canvas=document.getElementById("canvas"); 
    var ctx=canvas.getContext("2d"); 

    ctx.fillStyle="skyblue"; 
    ctx.fillRect(0,0,canvas.width,canvas.height); 


    $(".connectable").hover(

     function(){connectGroup(this);}, 
     function(){unconnectGroup(this);} 

    ); 

    function connectGroup(element){ 

     var $element=$(element); 

     var hubId=$element.attr("id"); 
     var p=$element.position(); 
     var hubX=p.left; 
     var hubY=p.top; 
     var hubW=$element.width(); 
     var hubH=$element.height(); 
     ctx.fillStyle="green"; 
     ctx.fillRect(hubX-3,hubY-3,hubW+6,hubH+6); 

     var group=$element.attr("data-group"); 

     var g="img[data-group='"+group+"']" 

     var $group=$(g); 

     var notG="img:not("+g+")"; 
     var $hidden=$(notG); 
     $hidden.fadeOut(); 

     $group.each(function(){ 

      var $groupMember=$(this); 

      var id=$groupMember.attr("id"); 

      if(id!=hubId){ 
       var p=$groupMember.position(); 
       var x=p.left; 
       var y=p.top; 
       var w=$groupMember.width(); 
       var h=$groupMember.height(); 
       ctx.fillStyle="green"; 
       ctx.strokeStyle="green"; 
       ctx.beginPath(); 
       ctx.moveTo(hubX+hubW/2,hubY+hubH/2); 
       ctx.lineTo(x+w/2,y+h/2); 
       ctx.stroke(); 
       ctx.fillRect(x-3,y-3,w+6,h+6); 
      } 

     }); 

    } 

    function unconnectGroup(element){ 
     // clear the canvas 
     ctx.clearRect(0,0,canvas.width,canvas.height); 
     // show the hidden images 
     $("img").show(); 
    } 



}); // end $(function(){}); 
</script> 

</head> 

<body> 
    <canvas id="canvas" width=330 height=450></canvas> 
    <img id="img1" class="connectable" data-group="1" src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house-icon.png" width=100 height=100/> 
    <img id="img2" class="connectable" data-group="1" src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house-icon.png" width=100 height=100/> 
    <img id="img3" class="connectable" data-group="1" src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/house-icon.png" width=100 height=100/> 
    <img id="img4" class="connectable" data-group="2" src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/ship.png" width=100 height=100/> 
    <img id="img5" class="connectable" data-group="2" src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/ship.png" width=100 height=100/> 
    <img id="img6" class="connectable" data-group="2" src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/ship.png" width=100 height=100/> 
    <h3>Hover over image to show connections</h3> 
</body> 
</html>

источник

2013-10-07 19:17:24 markE

Хорошо ... Я думаю, что могу разобраться, как сделать фоновый холст и использовать CSS для размещения HTML поверх холста (я сделал это несколько часов назад). Но, как бы я пошел по наведении и соединил его с холстом (а затем в отпуске, очистив полотно)? Идеально было бы, если бы я мог назначить каждому img соединение с данными и идентификатор данных attr, и если один img зависает, он рисует линию к изображениям, которые содержат идентификатор данных attr, который соответствовал бы data-connection attr, т. е. data-connection = '2', data-id = '1' будет выводить строку, например, data-con = '1', data-id = '1' или что-то –

I ' я добавил пример кода к моему ответу. Объяснение: При наведении, (1) Получить целевой элемент, (2) Получить группу данных для этого элемента, (3) Получить все члены этой группы данных (4) Скрыть любые изображения, которые не являются членами этих данных -группа, (5) используйте холст (под изображениями), чтобы нарисовать выделенные границы и линии, соединяющие целевое изображение со всеми элементами группы данных в своей группе. При уходе (1) очистите полотно - которое очистит подсветку и разъемы, (2) повторно покажите ранее скрытые изображения. Отказ от ответственности: я использовал jQuery - было бы безумием попробовать без него! – markE

В качестве нетрадиционного альтернативы вы можете дать this library попробовать. Это pre-HTML5-canvas oldie-but-still-goodie. Он имеет возможность превратить любой DIV в псевдо-холст, вы можете иметь любые HTML-элементы внутри этого DIV и делать все виды рисования между ними.

Например, если вы определяете «холст», как это:

<div id="myCanvas" style="position: relative;"></div>

Вы можете инициализировать библиотеку, установить цвет, размер обводки и рисовать линии, как это:

var jg = new jsGraphics("myCanvas"); 

jg.setColor("#0000FF"); 
jg.setStroke(2); 
jg.drawLine(x1, y1, x2, y2); 

jg.paint();

Это айн 'canvas HTML5, но это «холст», вы можете размещать элементы DOM непосредственно внутри и рисовать там.

Небольшая демонстрационная версия: http://jsfiddle.net/Rs5eY/1/ Наведите курсор на изображение сверху.

источник

2013-10-07 21:19:19

Нарисуйте линию между двумя элементами с зависанием

ответ

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