附加鼠標事件，多的畫布圖像

我有這樣的代碼：附加鼠標事件，多的畫布圖像

$('#whatever .item').each(function() { 
    var canvas = document.getElementById('whatever'); 
    var ctx = canvas.getContext('2d'); 
    /* Drawing */ 


    $(document).mousemove(function(e) { 

     mouseY = e.pageY; 
     mouseX = e.pageX;  


      if(ctx.isPointInPath(mouseX, mouseY)) { 
      alert("HEY!");  

      } 

    }); 
});

我在畫布上多跨標籤。然後我使用span標籤在畫布上創建圖像，使用'each'。所以我想如果我添加了一個mousemove，它會爲每個span標籤添加一個，但它不會。有任何想法嗎？

來源

2012-01-16 Johnny

你能發佈你的html嗎？我試圖理解你實際上想要什麼 – 2012-01-23 16:13:16

需要一個js小提琴才能夠做到這一點，因爲這裏沒有太多的信息要離開。 – PriorityMark 2012-01-27 02:11:29

「畫布中的多個範圍標籤」沒有任何意義，除非您嚴格討論備用內容。你在說什麼？你能提供一些代碼嗎？ – 2012-01-27 21:37:56

如果我正確地理解了你，我可能不會，你不能像現在這樣去做事情。

現在，您有一個<canvas>標記內的多個<span>標記，它們表示正在繪製到畫布的數據。然後，當您將鼠標懸停在正在繪製到畫布上的數據時，您希望發生一些事情。

這不是帆布的工作原理。這些<span>標記中沒有一個顯示在頁面上（除了作爲回退內容）並且它們的mousemove/etc事件對畫布表面沒有影響。

當您使用span標籤繪製圖像（或任何數據）到畫布時，您必須跟蹤繪製它們的位置。然後在<canvas>本身上只需要一個mousemove事件，該事件將遍歷試圖檢測的位置（或路徑或矩形）列表。

因此，要將鼠標事件附加到畫布上繪製的圖像上，必須跟蹤自己繪製的所有內容。除Canvas本身之外的任何鼠標事件都不會切割它。所有這些你必須自己寫或者使用一個庫。你已經表明你不想再使用庫了，所以here's a tutorial on learning how to make the canvas interactive（mousedown，mousemove，跟蹤繪製的內容等）。

來源

2012-01-27 21:46:26

最有用的評論。享受你的業力！ – Johnny 2012-01-28 18:21:58

是不是更容易將mousemouse()連接到所有這樣的圖片：

$('#whatever .item').mousemove(function(e) { });

來源

2012-01-16 13:49:58 Jeffrey

不，我使用畫布內的元素作爲標記將數據添加到畫布。它們實際上並不是我想要懸停的，我想將鼠標懸停在每個數據片段上並啓動一個jQuery響應。 – Johnny 2012-01-16 15:02:53

嘗試使用KineticJS庫。 http://www.html5canvastutorials.com/kineticjs/html5-canvas-path-mouseover/

來源

2012-01-22 18:21:36

我更喜歡用Canvas和jQuery來完成，而不需要添加更多的API – Johnny 2012-01-22 20:11:03

附加鼠標事件，多的畫布圖像

回答

相關問題