¿Es posible la detección de hits HTML5?

Question

He usado el código Canvas provisto en otro lugar en este sitio para crear una pantalla donde tengo varias png transparentes superpuestas con las partes no transparentes como formas irregulares. Puedo obtener el color debajo del cursor y eso es genial. Pero mis formas son todas del mismo color y también necesito una forma de obtener la ID de la forma particular para saber en cuál se hizo clic. Imagine un mapa hecho de pngs superpuestos para llegar al país y desea detectar en qué país se hizo clic. Por lo que puedo decir, la detección de id solo se aplica a las regiones rectangulares. ¿Alguna sugerencia?

$('#myCanvas').click(function(e){ 
var position = findPos(this); 
var x = e.pageX - position.x; 
var y = e.pageY - position.y; 
var coordinate = "x=" + x + ", y=" + y; 
var canvas = this.getContext('2d'); 
var p = canvas.getImageData(x, y, 1, 1).data; 
var hex = "#" + ("000000" + rgbToHex(p[0], p[1], p[2])).slice(-6); 
alert(hex); 
}); 

Este código obtiene y muestra el color (findPos y rgbToHex son funciones separadas que quedan fuera para mayor claridad). Necesito una identificación! ¡Ayuda!

Answer 1

Incluso con transparencia, las imágenes son todos rectángulos. Luego sabrá qué imágenes se encuentran en un punto cliqueado por una intersección de rectángulo: compruebe su matriz de imágenes y sus puntos x, y con ancho y alto para la intersección de puntos. A continuación, aparece una serie de imágenes posiblemente cliqueadas. Si solo hay uno en la lista, has terminado.

Las imágenes tienen un orden Z implícito del orden inverso al que las escribió, es decir, una imagen se sobreescribe con la siguiente imagen escrita que se superpone. Puede usar eso para saber qué orden probar para la prueba de golpes si se hace clic en más de uno. El único truco es detectar si un píxel de imagen es transparente o no.

Para detectar la transparencia de un punto de píxel al hacer clic en una sola imagen, puede mantener un segundo elemento de lienzo oculto. Límpielo, luego, escriba la imagen de destino en la misma posición y use el mismo código para ver si el píxel cliqueado dentro del segundo lienzo es del color transparente. Si es así, repita este proceso con la siguiente imagen en el orden Z hasta que obtenga la imagen donde se hizo clic en un píxel no transparente.

Una optimización pequeña pero importante es comprobar primero el color en el que se hizo clic, y si es el color transparente que ya conoce, ninguna de las imágenes ha sido seleccionada en un punto no transparente.