Как добавить слушателя события к изображению на холсте?

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

Восстановление старой темы с соответствующим примером из недавней превосходной книги Дэвида Гири "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)};
};

Answer 3

a 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 4

Думайте о холсте как о доске в классе. То, что учитель пишет или рисует на доске, является частью доски, и вы не можете выбрать ни одного из них. Если вы хотите что-то, что вы можете выбрать с доски, вы можете использовать мягкую доску, на которой вы можете поместить объекты, а затем переместить их из одной позиции в другую. SVG является примером софтборда, здесь каждый рисунок (например, линия, дуга) - это объекты, и вы можете добавить на них прослушиватели щелчков.

Если вы хотите, чтобы холст вел себя как SVG, вам придется с этим справиться. Вы можете добавить прослушиватель щелчков на холсте, и всякий раз, когда на нем получено событие, вам необходимо рассчитать, на каком элементе произошло это событие.

Answer 5

Лучше использовать SVG вместо этого, если вы хотите прикрепить событие как это.