히트 테스트 SVG 모양?

Question

SVG 사양 (Firefox 등)의 일부를 구현 한 브라우저는 우리를 무료로 테스트합니다. SVG 객체에 mousedown 수신기를 연결하면 모양을 클릭 할 때마다 알림을받습니다. 이것은 특히 복잡한 다각형 모양의 경우 놀랍습니다.

이 기능을 좀 더 많은 테스트를 위해 사용할 수있는 방법이 있는지 궁금합니다. 주어진 사각형이 내 SVG 도형과 교차하는지 알고 싶습니다.

예를 들어, 요소에 3 개의 복잡한 다각형을 추가합니다. 이제 직사각형 (40, 40, 100, 100)이 그 중 어떤 것과 교차하는지 알고 싶습니다. 누구든지이 코드를 모두 직접 추가하는 대신 이미 사용 가능한 위대한 히트 테스트 지원을 어떻게 활용할 수 있을지 생각할 수 있습니까?

감사합니다.

Answer 1

전체 사각형을 교차시키는 방법을 모르겠습니다. 그러나 당신은 점을 교차 할 수 있습니다, 그래서 당신은 그에서 더 복잡한 검사를 만들 수 :

var el= document.elementFromPoint(x, y); 

가 특정 페이지 상대 좌표에서 당신에게 가장 높은 스택 요소를 제공 할 것입니다. SVG 내부에 도형이 없으면 <svg> 요소가 나타납니다.

이것은 비표준 Mozilla extension이지만 WebKit에서도 작동합니다. 불행하게도 Opera에 존재하지만 <svg> 내부는 보이지 않으므로 해당 브라우저에서 요소는 항상 SVGSVGElement가됩니다.

var nodelist = svgroot.getIntersectionList(hitrect, null); 

전체 작업 예를 들어 here를 참조하십시오

Answer 2

SVG 1.1 DOM은 (불행히도 아직 모질라에서 구현되지 것) 딱 맞는 방법이 있습니다.

Answer 3

getIntersectionList는 Opera에서 잘 작동합니다. 내 문제는 이것에 관한 SVG 1.1 Full spec의 함수는 히트로 탐지되기 위해 엘리먼트가 렌더되어야하고 포인터 이벤트에 가능한 타겟이 필요하다는 것이다. 불행히도이 기능은 현재 세계의 일부만 표시되는 게임 세계에서 히트 테스트에 쓸모가 없습니다.

Answer 4

크롬의 checkIntersection (및 getIntersectionList) 버전은 요소 자체가 아니라 요소 경계 상자를 테스트합니다. 캔버스를 사용하여 크롬에서 작동하는 나 자신의 checkIntersection을 작성할 수있었습니다.이 방식은 작은 직사각형에 대해서는 잘 작동하는 것처럼 보이고 대형 캔버스에서는 느려질 것이므로 히트 테스트에 좋습니다. 이 기술은 checkIntersection의 구현이 깨진 작은 직사각형 및 다른 브라우저의 경우 Chrome의 checkIntersection에 대한 polyfill로 작동합니다.

1. 는 so처럼 (당신은뿐만 아니라 거기에 스타일 규칙을 포함해야 할 수도 있습니다) 당신의 SVG의 outerHTML에 포함 된 데이터 URI를 (이 이미지는 페이지에있을 필요는 없습니다) 사용하는 이미지를 만듭니다. onload 이벤트 핸들러를 사용하여 필요할 때로드되는 시점을 결정할 수 있습니다.
2. 당신의 히트 검사의 구형에 사용하는 캔버스 만들기 직사각형 모양의와 교차하는 경우는

테스트 (이 캔버스 페이지에있을 필요가 없다),이 작업을 수행 :

1. 캔버스가 사각형과 같은 크기 확인 그래서 -y,
2. 지우기 -x에 캔버스에서 SVG를 그리기 캔버스 컨텍스트를 clearRect() 방법
3. 를 사용하여 캔버스 (폭과 높이를 설정) 그 부분 캔버스와 겹치는 이미지는 테스트 할 영역에 해당합니다. drawImage()
4. 컨텍스트의 getImageData()을 사용하여 캔버스의 ImageData를 가져옵니다. 데이터 배열의 네 번째 요소는 모두 알파 바이트이며 0이 아닌 값은 SVG의 일부가 사각형과 겹치는 것을 의미합니다. 네 번째 바이트가 모두 0이면 SVG가 사각형과 교차하지 않습니다.