HTML5 Canvas Mouse

Question

Что-то вроде меня есть:

    function mouseClick(event) {
        ...
    }
    canvas.addEventListener("mousedown", mouseClick, false);
    function drawRect(x, y) {
        context.fillRect(x, y, 16, 16);
    };
    drawRect(10, 10);

Как сделать что-то подобное, если я нажму на свой Rect in Canvas и получу что-нибудь? что-то вроде «Если я нажму на Rect, получу уведомление;

»

Извините за мой английский язык.

Answer 1

Холст - не более чем растровое изображение. Нет записей о том, что на холсте был нарисован прямоугольник, поэтому, если вы хотите обнаружить, что щелчок был внутри области, на которой вы нарисовали прямоугольник, вы должны сохранить записи прорисованных областей и проверить их. против них. например:

var rects= [];

function mouseClick(event) {
    // Get position of click relative to canvas. This is not reliable! Requires
    // standards mode, and the canvas not being nested in other offsetParents.
    // Getting page-relative co-ordinates reliably in all cases is outside the
    // scope of this question...
    //
    var x= event.clientX-document.documentElement.scrollLeft-canvas.offsetLeft;
    var y= event.clientY-document.documentElement.scrollTop-canvas.offsetTop;

    // Hit-test each rectangle in the list of those drawn
    //
    for (var i= rects.length; i-->0;) {
        var x0= rects[i][0], y0= rects[i][1], x1= rects[i][2], y1= rects[i][3];
        if (x0<=x && x<x1 && y0<=y && y<y1) {
            alert('you clicked on a rectangle!');
        }
    }
}
function drawRect(x, y) {
    rects.push([x, y, x+16, y+16])
    context.fillRect(x, y, 16, 16);
};
drawRect(10, 10);

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

Answer 2

$(canvas).mousedown(function myDown(e) 
{
  var position = $(canvas).position();
  var x = e.pageX-position.left;
  var y = e.pageY-position.top;
  ...
});

Это гораздо лучший способ сделать это!

Answer 3

Я думаю, что вы говорите, что вы хотите, чтобы события происходили, когда вы нажимаете на объекты, нарисованные на холсте. Я написал несколько учебников о том, как создавать постоянные фигуры и перемещать их с помощью щелчков мыши. Это должно дать вам хорошую отправную точку для этого.

Answer 4

Вы также можете попробовать Concrete.js http://www.concretejs.com, который представляет собой облегченный холст, который добавляет интерактивность. Вы бы просто сделали что-то вроде этого:

var key = canvas.getIntersection (x, y);

если x, y пересекает рисунок, который вы нарисовали с заданным ключом, он возвращает ключ, и вы знаете, что было обнаружено / нажано.

Это гораздо лучшее решение, потому что оно будет работать на всем, что вы рисуете, включая круги, линии, кривые, многоугольники, произвольные объекты и т. Д.

Answer 5

addEventListener сложно.Я бы попробовал:

canvas.addEventListener.apply(canvas, ["mousedown", mouseClick, false]);

или использовать анонимную функцию.

canvas.addEventListener.apply(canvas, ["mousedown", function(){ mouseClick(); }, false]);

Использование функции применения может помочь убедиться, чтоeventListener применяется к правому элементу.Вы можете прочитать об этом здесь .