2017-05-15 28 views
0

svg 라이브러리 raphaeljs을 사용하여 다각형을 그립니다. 나는 이것을 좋아한다 :Raphael js - 교차점이없는 경로를 그립니다.

path.attr({path: " 
M 301 248 613 283 588 533 370 497 232 382 232 382 Z 
"}) 

캔버스를 클릭하면 사용자가 캔버스를 클릭 한 다음 새 점의 좌표에 따라 다각형을 다시 그립니다. 하나의 다각형에서 선들 사이의 교차점을 거부 할 수 있습니까?
업데이트 : this을 예로 들려 볼 수 있습니다. 나는 자기 교차로를 허용하고 싶지 않다. 소스 코드는 here입니다.

+0

자기 교차를 의미합니까? [MCVE]를 제공하면 도움이 될 것입니다. –

+0

@PaulLeBeau 더 자세한 내용을 추가했습니다. 예, 자기 교차로입니다. – mtkachenko

답변

0

라파엘이 선분들 간의 교차점을 찾기위한 몇 가지 임베드 기능을 가지고 있는지 여부를 알고 싶었습니다. 마지막으로 벡터의 곱셈을 기반으로 한이 접근 방식을 사용했습니다.

function intersection(ax1, ay1, ax2, ay2, bx1, by1, bx2, by2){ 
    var v1 = (bx2-bx1)*(ay1-by1)-(by2-by1)*(ax1-bx1); 
    var v2 = (bx2-bx1)*(ay2-by1)-(by2-by1)*(ax2-bx1); 
    var v3 = (ax2-ax1)*(by1-ay1)-(ay2-ay1)*(bx1-ax1); 
    var v4 = (ax2-ax1)*(by2-ay1)-(ay2-ay1)*(bx2-ax1); 
    return (v1*v2<0) && (v3*v4<0); 
} 
1

자기 교차 폴리곤을 피하려면 확실히 을 추가하려는 선분이 다각형의 다른 선분과 교차하지 않는지 확인해야합니다.

그래서 선 교차 테스트를 추가하고 최신 세그먼트를 이전 세그먼트와 비교하여 검사하는 것입니다.

라인 교차 테스트 알고리즘을 웹에서 검색 할 수 있습니다. 찾는 데 어려움이 없을 것입니다.