Question

我需要在画布上的图像上附加一些鼠标事件。

我已经尝试过了，但它仍然不起作用。

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

Answer 1

您需要将事件侦听器添加到canvas元素，然后手动检查事件x和y参数是否在画布上绘制的图像上。

Answer 2

canvas没有记住绘制到其中的对象的结构。它只是一个flat画布，里面有像素。如果您需要在其中使用对象，请切换到SVG。 Javascript中有许多SVG个库。例如d3 Raphael

使用普通的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，请向画布本身添加一个事件侦听器并检查坐标。

Answer 3

使用David Geary最近的优秀书籍“核心HTML5画布”中的相关样本重新创建旧帖子。这在我的应用程序中工作正常。

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

Answer 4

如果你想要像这样的附加事件，最好使用SVG。

Answer 5

将画布视为教室中的白板。无论老师在白板上书写或绘图，都是董事会的一部分，你不能选择任何一个。如果你想要从板上挑选的东西你可以使用软板，你可以放置物品，然后将它们从一个位置移动到另一个位置。 SVG是一个软件板的例子，这里每个图（如线，弧）都是对象，你可以在它们上面添加点击监听器。

如果您希望画布的行为类似于SVG，则必须处理它。您可以在画布上添加单击侦听器，每当收到事件时，您需要计算此事件发生的元素。

如何在画布中添加事件监听器？

5 个答案: