如何將事件偵聽器添加到畫布中的圖像？

我試過這個，但它仍然沒有工作。

var pointer = new Image(); 
    pointer.src = "/img/line_point.png"; 
    pointer.onload = function() { 
     context.drawImage(pointer, 55,123); 
    } 
    pointer.addEventListener("mouseover", maap, false);

來源

2011-12-02 NiLL

使用像[fabric.js]（http://kangax.github.com/fabric.js/）這樣的畫布庫。 – kangax

下面的答案代碼是什麼樣的？我有同樣的問題！ –

你需要的事件監聽器添加到canvas元素，然後手動檢查事件x和y參數是在畫布上繪製的圖像。

來源

2011-12-02 11:52:45

是否有可能找到更多的靈活性解決方案？ – NiLL

事件監聽器是綁定到元素的。您擁有的唯一元素是畫布元素。 –

a canvas沒有一個結構來記住繪製到其中的對象。它只是一個flat畫布，裏面有像素。如果您需要使用對象，請切換到SVG。 Javascript中有很多SVG庫。如d3Raphael

與普通SVG，你可以不喜歡它

<svg width="4in" height="3in" version="1.1" xmlns="http://www.w3.org/2000/svg"> 
    <image id="myImg" x="200" y="200" width="100px" height="100px"></image> 
</svg>

你甚至可以使用document.getElementById('myImg')或jQuery('#myImg')到活動添加到它。

如果您想堅持使用Canvas，請將事件偵聽器添加到畫布本身並檢查座標。

來源

2011-12-02 11:55:00

如果您想要添加類似事件，最好使用SVG。

來源

2011-12-02 12:21:33 ijse

將畫布想象成教室中的白板。無論教師在白板上寫或畫什麼都是董事會的一部分，你不能挑選任何一個。如果你想要的東西，你可以從董事會選擇你可以使用軟木板，你可以把對象，然後從一個位置移動到另一個。 SVG是軟板的一個例子，這裏每個圖形（如線條，弧線）都是對象，您可以在它們上添加點擊偵聽器。

如果您希望canvas的行爲像SVG一樣，您將必須處理它。您可以在畫布上添加點擊偵聽器，並且每當接收到事件時，都需要計算髮生此事件的元素。

來源

2011-12-03 09:45:55

通過David Geary最近出色的書「Core HTML5 Canvas」的相關示例重振舊線程。這在我的應用程序中正常工作。

mycanvas.onmousedown = function (e) { 
    var loc = windowToCanvas(e.clientX, e.clientY); 
    $('#outputXY').val(loc.x + ',' + loc.y); 
}; 

mycanvas.onmousemove = function (e) { 
    var loc = windowToCanvas(e.clientX, e.clientY); 
    $('#outputXY').val(loc.x + ',' + loc.y); 
}; 

function windowToCanvas(x, y) { 
    var r = mycanvas.getBoundingClientRect(); 
    return { x: x - r.left * (mycanvas.width/r.width), 
      y: y - r.top * (mycanvas.height/r.height)}; 
};

來源

2014-06-02 18:39:45

如何將事件偵聽器添加到畫布中的圖像？

回答

相關問題