경로를 사용하여 그려진 캔버스 요소에 대한 클릭을 감지하고 싶습니다. 지금까지 자바 스크립트 데이터 구조에 요소 경로를 저장하고 요소 cordinates와 일치하는 히트의 좌표를 확인하는 것이 좋습니다. 거기에 이미 알고있는 종류의 알고리즘에 대한 정보가 있습니다. 엘리먼트 번호가 클수록 각 엘리먼트 경로를 렌더링하고 히트를 체크하는 것은 비효율적이다. 누구든지 저를 가리킬 수 있습니까?hit detect canvas JS
paper.js http://paperjs.org/
fabric.js http://fabricjs.com/
kenetic.js http://kineticjs.com/
내가 제안 해 드릴 :
등이 그 단지 일 = J입니다 몇 가지 라이브러리가 종료된다 코드베이스를 확인하거나 위에 코드베이스를 빌드하십시오.
JavaScript 캔버스 컨텍스트에는 isPointInPath 메서드가 있습니다.
http://www.w3schools.com/html5/canvas_ispointinpath.asp
당신이
http://en.wikipedia.org/wiki/Point_in_polygon#Point_in_polygon_queries
네, 그 기능을 알아요. 만약 내가 많은 요소가 있다면, 나는 그것들을 느리게 할 것이므로 그 방법으로 그것들 각각을 확인하고 싶지 않다. 나는 js 데이터 구조에서 요소의 좌표와 경로를 저장할 계획을 가지고 있었다. 문제는 사용자가 클릭 한 지점을 중심으로 더 많은 경향이있는 요소를 정렬하는 방법입니다. 그 알고리즘이 있다면 거기를 찾고 있었어. – varuog
@ user1538127 - 최적화를 원하는 경우 바운드 박스 또는 바운더리 서클을 적중 감지의 첫 단계로 고려할 수 있습니다. 각 경로 주위에 경계 원을 만들고 빠른 거리 대 점 대 반지름 비교를 수행 한 다음 원에서 히트 한 경우에만 더 비싼 point-in-polygon 감지를 수행합니다. –
어떻게 다각형의 경계 상자를 계산할 수 있습니까? 참조 할 수 있니? – varuog
난 그냥 내 자신을 시도를 부여 할 위키피디아 페이지를 확인 다각형 알고리즘에서 자신의 포인트를 구현하려는 경우. 그것은 교육적인 목적을위한 것입니다. 라이브러리 이외의 문제를 푸는 데 도움이 될만한 정보를 얻을 수 있습니다. 그래도 답장을 보내 주셔서 감사합니다. – varuog