HTML5 검색이 가능합니까?

Question

불투명 한 부분이 불규칙한 모양을 가진 여러 개의 겹치는 투명 PNG가있는 화면을 만들기 위해이 사이트의 다른 곳에 제공된 Canvas 코드를 사용했습니다. 나는 커서 아래에있는 색상을 얻을 수 있으며 그것은 훌륭합니다. 그러나 내 셰이프는 모두 같은 색이며 특정 셰이프의 ID를 얻는 방법이 필요합니다. 그래서 어느 셰이프를 클릭했는지 알 수 있습니다. 도달하는 국가에 대해 겹치는 png로 구성된지도를 상상해보십시오. 클릭 한 국가를 감지하고 싶습니다. 내가 알 수 있듯이 ID 탐지는 직사각형 영역에만 적용됩니다. 어떤 제안?

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

이 코드는 색상을 얻고 표시합니다 (findPos 및 rgbToHex는 명확하게 구분하기 위해 별도의 기능입니다). 나는 이드가 필요해! 도움!

Answer 1

투명도가 적용된 이미지는 모두 직사각형입니다. 그런 다음 직사각형 교차점을 클릭하여 클릭 한 위치에있는 이미지를 확인합니다. 이미지 배열과 폭, 교차점 높이가있는 x, y 포인트를 확인합니다. 그런 다음 클릭 할 가능성이있는 이미지 배열을 제안합니다. 목록에 하나만있는 경우 완료됩니다.

이미지에는 이미지를 쓴 암시 적 Z 순서가 있습니다. 즉, 겹쳐 쓰여진 다음 이미지가 이미지를 덮어 씁니다. 이 버튼을 클릭하면 두 개 이상의 클릭이 있었을 때 적중 테스트를 위해 어떤 주문을 시도할지 알 수 있습니다. 유일한 트릭은 이미지 픽셀이 투명한지 여부를 감지하는 것입니다.

단일 이미지에서 클릭 한 픽셀 포인트의 투명도를 감지하려면 두 번째 숨겨진 캔버스 요소를 유지해야합니다. 지우고 대상 이미지를 같은 위치에 쓴 다음 동일한 코드를 사용하여 두 번째 캔버스 내에서 클릭 한 픽셀이 투명 색상인지 확인하십시오. 그런 경우 투명하지 않은 픽셀을 클릭 한 이미지를 얻을 때까지 Z- 순서로 다음 이미지로이 프로세스를 반복하십시오.

작지만 중요한 최적화는 먼저 클릭 한 색상을 확인하는 것이고 투명 색상 인 경우 이미 투명하지 않은 지점에서 이미지를 클릭하지 않았 음을 이미 알고 있습니다.