È possibile il rilevamento di hit HTML5?

Question

Ho usato il codice Canvas fornito altrove in questo sito per creare uno schermo in cui ho diversi png trasparenti sovrapposti con le parti non trasparenti che sono forme irregolari. Posso ottenere il colore sotto il cursore e questo è fantastico. Ma le mie forme sono tutte dello stesso colore e ho bisogno di un modo per ottenere l'ID della forma particolare così so che su quale è stato cliccato. Immagina una mappa fatta di pngs sovrapposti per raggiungere il paese e vuoi scoprire su quale paese è stato fatto clic. Da quello che posso dire, il rilevamento degli ID si applica solo alle regioni rettangolari. Eventuali suggerimenti?

$('#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); 
}); 

Questo codice ottiene e visualizza il colore (findPos e rgbToHex sono funzioni separate lasciati fuori per chiarezza). Ho bisogno di un ID! Aiuto!

Answer 1

Anche con la trasparenza, le immagini sono tutti rettangoli. Quindi sai quali sono le immagini in un punto cliccato per l'intersezione del rettangolo: controlla la matrice delle immagini e i loro punti x, y con larghezza, altezza per l'intersezione del punto. Quindi ti viene in mente una serie di immagini eventualmente scattate. Se ce n'è solo uno nella lista, hai finito.

Le immagini hanno un ordine Z implicito nell'ordine inverso in cui sono state scritte, ovvero un'immagine viene sovrascritta dalla successiva immagine scritta che la sovrappone. Puoi usarlo per sapere in quale ordine provarli per il hit-test se più di uno è stato cliccato. L'unico trucco è quello di rilevare se un pixel dell'immagine è trasparente o meno.

Per rilevare la trasparenza per un punto di pixel cliccato in una singola immagine, è possibile mantenere un secondo elemento di tela nascosta. Cancellalo, quindi scrivi l'immagine di destinazione su di esso nella stessa posizione, e usa lo stesso codice per vedere se il pixel cliccato all'interno della seconda tela è il colore trasparente. In tal caso, ripetere questa procedura con l'immagine successiva nell'ordine Z finché non si ottiene l'immagine in cui è stato fatto clic su un pixel non trasparente.

Una piccola ma importante ottimizzazione consiste nel controllare prima il colore su cui si fa clic e, se è il colore trasparente, si sa già che nessuna delle immagini è stata cliccata su un punto non trasparente.