如何将事件侦听器添加到画布中的图像？

我试过这个，但它仍然没有工作。

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

如何将事件侦听器添加到画布中的图像？

回答

相关问题