用鼠標在兩個元素之間畫一條線

我見過很多關於如何做到這一點的例子，但是他們都沒有做我需要做的事情。用鼠標在兩個元素之間畫一條線

我想要做的是當某個圖像（如果需要，可以將其包裹在單獨的div中）懸停時，它會從該圖像的中心繪製一條線到另一個圖像的中心（或可能來自第一個圖像的中心到其他幾個圖像的中心），然後在鼠標移出時，它會返回到原始狀態。

我試過使用HTML5畫布，但是當我嘗試在畫布上移動HTML（圖像）的同時在畫布上畫一條線時，圖像覆蓋了畫布和畫線。當我嘗試更改畫布的z-index時，它的工作原理除了覆蓋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添加到畫布頂部（而不是畫布的一部分）。
懸停時，畫布&上的連接線在連接的圖像周圍放置一個突出顯示邊框。
離開時，清除畫布連線並移除img邊框。

Before Hover During Hover

這裏是代碼和一個小提琴：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被徘徊，它會爲包含data-id attr的圖像繪製一條線，數據連接attr，即data-connection ='2'，data-id ='1'會畫一條線，說data-con ='1'，data-id ='1'，或者某事 –

I'我已經添加了示例代碼給我的答案。說明：懸停後，（1）獲取目標元素，（2）獲取該元素的數據組，（3）獲取該數據組的所有成員（4）隱藏任何不是該數據成員的圖像-group，（5）使用畫布（在圖像下）繪製從目標圖像連接到組中所有數據組元素的高亮邊框和線條。離開（1）清除畫布 - 清除突出顯示和連接器，（2）重新顯示先前隱藏的圖像。免責聲明：我使用jQuery - 如果沒有它，它會變得瘋狂！ – markE

作爲一種非常規的替代方案，你可以給this library一試。這是一個HTML5以前的老布，但仍然是好東西。它可以將任何DIV轉換爲僞「畫布」，您可以在此DIV中擁有任何HTML元素，並在它們之間進行各種繪圖。

例如，如果你定義你的「畫布」上是這樣的：

<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();

它艾因HTML5畫布，但它是一個「畫布」，您可以將DOM元素直接放置在該畫布內並在其中繪製。

這是一個小的演示：http://jsfiddle.net/Rs5eY/1/將鼠標放在頂部圖像上。

來源

2013-10-07 21:19:19

用鼠標在兩個元素之間畫一條線

回答

相關問題