Прикрепление события мыши к нескольким изображениям холста

Question

У меня есть этот код:

$('#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 на холсте. Затем я использую теги span для создания изображений на холсте, используя «each». Поэтому я предположил, что если бы я добавил мышку, он бы добавил одну для каждого тега span, но это не так. Есть идеи?

Answer 1

Если я вас правильно понимаю, а может и нет, вы не можете делать то, что делаете сейчас.

Сейчас у вас есть несколько тегов <span> внутри тега <canvas>, которые представляютданные, которые рисуются на холсте.Затем вы хотите, чтобы что-то произошло, когда вы наводите курсор на те данные, которые рисуются на холсте.

Это не так, как работает холст.Ни один из этих тегов <span> не отображается на странице (за исключением резервного содержимого), и их события mousemove / etc не имеют отношения к поверхности холста.

Когда вы используете свои теги span для рисования изображений (или чего-либо еще)данные) на холсте вы должны отслеживать, где вы их рисуете.Тогда вам понадобится только одно mousemove событие на самом <canvas>, которое будет циклически перебирать список местоположений (или путей или прямоугольников), которые вы пытаетесь обнаружить.

Итак, чтобы присоединитьсобытие мыши для изображений, нарисованных на холсте, вы должны сами следить за всем, что нарисовано. События мыши на любом объекте, кроме самого Canvas, его не обрезают.Все это вы должны написать сами или использовать библиотеку.Вы указали, что больше не хотите использовать библиотеки, поэтому вот руководство по обучению тому, как сделать холст интерактивным (mousedown, mousemove, отслеживание того, что нарисовано, и т. Д.).

Answer 2

Попробуйте использовать библиотеку KineticJS.http://www.html5canvastutorials.com/kineticjs/html5-canvas-path-mouseover/

Answer 3

Не проще ли прикрепить mousemouse() ко всем изображениям, как это:

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