У меня есть элемент холста на моей простой HTML-странице, и на нем есть несколько прямоугольников, нарисованных с использованием метода context.fillRect(). Мне нужно взаимодействовать с этими нарисованными прямоугольниками.
Как я могу это сделать? Как я могу привязать onclick или onmouseover к этим прямоугольникам?
Вам нужно будет отслеживать координаты и проверять, находится ли мышь в одном из прямоугольников, например: http://jsfiddle.net/eGjak/13/.
Очевидно, что вместо click вы также можете использовать mouseover.
var ctx = $('#cv').get(0).getContext('2d');
var rects = [[0, 0, 100, 100], [0, 150, 50, 100]]; // [x, y, width, height]
for(var i=0;i<rects.length;i++) {
ctx.fillRect(rects[i][0], // fill at (x, y) with (width, height)
rects[i][1],
rects[i][2],
rects[i][3]);
}
$('#cv').click(function(e) {
var x = e.offsetX,
y = e.offsetY;
for(var i=0;i<rects.length;i++) { // check whether:
if(x > rects[i][0] // mouse x between x and x + width
&& x < rects[i][0] + rects[i][2]
&& y > rects[i][1] // mouse y between y and y + height
&& y < rects[i][1] + rects[i][3]) {
alert('Rectangle ' + i + ' clicked');
}
}
});
Я написал несколько руководств по созданию и перемещению выбираемых фигур на Холст, который должен дать вам хорошее понимание того, что вам нужно.
Короткий ответ заключается в том, что вам просто нужно отслеживать все, что вы хотите выбрать.
