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

Question

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

Answer 1

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

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

2. Используйте отдельные холсты для каждого элемента, на который вы хотите кликать.* CAKE - Я сам этим не пользовался, но его описание "SVG без XML".Это может покрыть ваши потребности.Демоверсии здесь http://glimr.rubyforge.org/cake/canvas.html#EditableCurve

Answer 2

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

Answer 3

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

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

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

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

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!
}

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