Haga clic en el elemento dado en el canvas

¿Hay algún truco para determinar si el usuario hace clic en un elemento dado representado en el canvas? Por ejemplo, estoy mostrando un rombo del file .png con background transparente y quiero saber si el usuario hace clic dentro o fuera de esa figura (como la colisión del elemento del mouse).

No existe un concepto de elementos individuales en un canvas: simplemente es un área sobre la que se dibujan los píxeles. SVG, por otro lado, está formado por elementos a los que luego puedes vincular events. Sin embargo, hay algunos enfoques que puede tomar para agregar events de clics al canvas:

  1. Coloque un elemento html que se superponga al área del canvas en la que desea hacer clic. A para un área rectangular o un map de image para algo más irregular.

  2. Use canvass separados para cada elemento en el que desee que se pueda hacer clic.

  3. CAKE – No he usado esto por mí mismo, pero su descripción es "SVG sin el XML". Esto puede cubrir sus necesidades. Demos aquí http://glimr.rubyforge.org/cake/canvas.html#EditableCurve

Una idea es dibujar la image en un canvas temporal, luego usar getImageDate () para recibir datos para el píxel que le interesa y verificar si su valor alfa es 0 (= transparente).

El siguiente es un boceto de una solución. Se asume que…

  1. xey son las coorderadas del evento de clic del mouse
  2. estás haciendo un bucle sobre gameObjects, el object actual está almacenado en la variable gameObject
  3. el object del juego se ha inicializado con una image, coorderadas x e y

El siguiente código verificará si el clic fue en un área transparente:

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

Nota: Esto es probablemente bastante ineficiente. Estoy seguro de que alguien puede encontrar una mejor solución.

He resuelto este problema usando kintech.js, se pueden encontrar tutoriales y ejemplos: http://www.html5canvastutorials.com/kineticjs/html5-canvas-drag-and-drop-tutorial/