Czy wykrywanie trafień HTML5 jest możliwe?

Question

Użyłem kodu Canvas podanego w innym miejscu na tej stronie, aby utworzyć ekran, na którym mam kilka zachodzących na siebie przezroczystych png z nieprzejrzystymi częściami o nieregularnych kształtach. Mogę uzyskać kolor pod kursorem i to jest świetne. Ale moje kształty są tego samego koloru i potrzebuję sposobu na uzyskanie identyfikatora konkretnego kształtu, więc wiem, który został kliknięty. Wyobraź sobie mapę wykonaną z nakładających się na siebie pngs dla kraju docelowego i chcesz wykryć, który kraj został kliknięty. Z tego co wiem, wykrywanie id dotyczy tylko regionów prostokątnych. Jakieś sugestie?

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

Ten kod pobiera i wyświetla kolor (findPos i rgbToHex są oddzielne funkcje przerwano dla jasności). Potrzebuję id! Wsparcie!

Answer 1

Nawet z przezroczystością, obrazy są wszystkie prostokąty. Wtedy wiesz, które obrazy znajdują się w punkcie kliknięcia na przecięciu prostokąta - sprawdź tablicę obrazów i ich punkty x, y z szerokością, wysokością dla punktu przecięcia. Następnie wymyślisz zestaw ewentualnie klikniętych obrazów. Jeśli na liście znajduje się tylko jeden, jesteś gotowy.

Obrazy mają domniemaną kolejność w kolejności odwrotnej, w jakiej zostały napisane, co oznacza, że ​​obraz jest zastępowany następnym obrazem, który się na niego nakłada. Możesz go użyć, aby dowiedzieć się, którą z nich wypróbować w celu przetestowania trafień, jeśli więcej niż jeden punkt zostanie kliknięty. Jedyną sztuczką jest wykrycie, czy piksel obrazu jest przezroczysty, czy nie.

Aby wykryć przezroczystość dla punktu pikselowego klikniętego na jednym obrazie, można zachować drugi ukryty element canvas. Wyczyść go, a następnie zapisz docelowy obraz w tej samej pozycji i użyj tego samego kodu, aby sprawdzić, czy kliknięty piksel w drugim obszarze roboczym jest przezroczysty. Jeśli tak, powtórz ten proces z następnym obrazem w kolejności Z, aż uzyskasz obraz, w którym kliknięto nieprzezroczysty piksel.

Niewielka, ale ważna optymalizacja polega na sprawdzeniu najpierw klikniętego koloru, a jeśli jest to przezroczysty kolor, który już znasz, żaden z obrazów nie został kliknięty nieprzezroczystym punktem.