2012-07-06 7 views
2

kineticjs (또는 SVG에서 더 쉬운 경우 rapheljs)에서 여러 겹쳐진 모양에 대한 마우스 오버 감지를 수행하는 쉬운 방법이 있습니까? 나는. I 부분적으로 겹치는 두 개의 원이 있다면, 어떻게 든 네 시나리오 검출 할 : 때없는 형상 2) 위에Kineticjs overlapping shapes 마우스 오버 검출

1) 경우를 원 위에 3) 둘 이상의 원 B 4) 위에 (overlap) circle A and B

그러나 "n"원/도형으로 확장 할 수있는 일반적인 구현이 필요합니다.

건배

+0

나는 이것을 알고 싶습니다. – KristianB

답변

2

이 문제를 해결하려면 분명히 충돌 감지를 처리해야합니다. 충돌 감지 알고리즘은 탐지를 위해 검사중인 모양에 따라 다릅니다.

시작하려면 lineTo, arc 등의 메서드를 사용하고 내장 된 isPointInPath을 사용하여 탐지를 수행하고 마우스 좌표를 전달할 수 있습니다. 대한 (이 특정 시점을 교차 KineticJS의 모든 노드를 반환합니다

http://www.kineticjs.com/docs/symbols/Kinetic.Container.php#getIntersections

이 그냥 getIntersections 방법을 사용, 특히 이상한 모양의 다각형

if (ctx.isPointInPath(20,50)) 
    { 
     // code 
    } 
+1

isPointInPath는 실제로 이전에 그려진 경로를보고 있기 때문에 실제로는별로 유용하지 않습니다. 응용 프로그램에서 수천 개의 셰이프를 사용하는 경우 각 셰이프가 그려진 직후 isPointInPath를 사용해야하므로 표시 캔버스 또는 버퍼 캔버스에 각 셰이프를 그려야합니다 이는 거대한 오버 헤드를 발생시킵니다. KineticJS getIntersections() 메서드는 충돌 검색을 결정하기 위해 색상 맵 해싱 알고리즘을 사용하기 때문에 실제로는 수백 배 빠르게 수행됩니다 (이 측정) –

5

네와 함께, 가장 간단한 방법입니다 예 마우스 위치)

건배!

+0

굉장! GetIntersections 내 자신의 충돌 감지 개발하는 데 사용할 수 있습니다 ... 감사 – KristianB