Нажмите на данный элемент в холсте

Question

Есть ли уловка, чтобы определить, нажимает ли пользователь данный элемент в холсте? Например, я показываю ромб из файла .png с прозрачным фоном, и я хочу знать, щелкнуть ли пользователь внутри или снаружи этой фигуры (например, столкновения с элементом мыши).

Answer 1

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

1. Позиция HTML-элемент, который перекрывает область на холст вы хотите быть интерактивными. A для прямоугольной области или карты изображения для чего-то более нерегулярного.

2. Используйте отдельные холсты для каждого элемента, который вы хотите кликать.

3. CAKE - Я не использовал это самостоятельно, но это описание «SVG без XML». Это может удовлетворить ваши потребности. Demos здесь http://glimr.rubyforge.org/cake/canvas.html#EditableCurve

Answer 2

Одна идея состоит в том, чтобы сделать изображение на временный холст, а затем использовать getImageDate(), чтобы получить данные для пикселя вы заинтересованы, и проверить, если его альфа-значение 0 (= прозрачный) ,

Ниже представлен эскиз решения. Предполагается, что ...

1. х и у координаты события щелчка мыши
2. вы зацикливание над геймобжекты, текущий объект будет храниться в переменной геймобжекты
3. объект игры был инициализируется изображения, координаты х и у

следующий код будет затем проверить, был ли щелчок на прозрачной области:

var tempCanvas = document.createElement('canvas'); 
if (tempCanvas.getContext) { 
    tempContext = tempCanvas.getContext('2d'); 
} 
tempContext.drawImage(gameObject.img, 0, 0); 
var imgd = tempContext.getImageData(x - gameObject.x, y - gameObject.y, 1, 1); 
var pix = imgd.data; 
if (pix[3] == 0) { 
    // user clicked on transparent part of the image! 
} 

Примечание: Это, вероятно, довольно неэффективно. Я уверен, что кто-то может придумать лучшее решение.

Answer 3

меня решить эту проблему с помощью kintech.js, учебники и примеры можно найти: http://www.html5canvastutorials.com/kineticjs/html5-canvas-drag-and-drop-tutorial/