HTML5 холст, после drawImage, как нажать на определенную область изображения?

Question

Я делаю 2D изометрическую карту с холстом HTML5 и библиотекой canvasengine.

Итак, у меня есть плитка:

Это изображение является квадратом.

Я рисую это изображение на моем Canva с несколькими вариантами:

_tile.drawImage(tileset.name, x, y, this.tile_w, this.tile_h, posx, posy, this.tile_w, this.tile_h); 

После этого, мне нужно, чтобы добавить событие onclick на этом _tile но только на части в зеленый цвет:

_tile.on("click", function(e) { 
    this.opacity = this.opacity < 1 ? 1 : 0.5 ; 
}); 

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

мне нужно сделать что-то подобное, после _tile.drawImage():

_tile_diamond.onclick 

Любые идеи? Благодаря !

Answer 1

Вы можете привязать событие onClick для всего холста не для определенного изображения. Поэтому, если вы хотите, чтобы onClick для изображения в одиночку, вы должны сохранить начальную и конечную координаты в переменной и должны проверить координаты мыши ваш клик .. Это комплекс

Использование kinetic.js, если вы хотите, чтобы это было проще один, который делает все это на холсте