사각형 주위에 테두리를 그리는 방법과 겹쳐진 테두리를 약간 다르게 렌더링하는 방법에 대한 정보를 찾고 있습니다. 이 사각형은 사용자가 생성하므로 다양한 크기와 겹침을 가질 수 있습니다. 사용자는 z- 순서를 지정합니다. 다음은 그 예이다 :테두리가 다른 겹침 테두리가있는 사각형을 그릴 수있는 알고리즘
내 데이터는 간단한 RECT 데이터 구조로 모델링된다. 간단히하기 위해, 나는 모든 경계선을 선으로 그릴 것을 기대하고있다. 브라우저에서 SVG를 사용하여 직사각형과 테두리를 그릴 계획이지만 플랫폼에 무관 한 일반적인 솔루션을 찾고 있습니다. .
이 문제는 새로운 것입니다. 나는이 분야에서 많은 경험이 없지만 행복하게 받아 들일 수 있고 얻을 수있는 정보를 얻을 것이다.
직사각형의 테두리가 그 위에있는 직사각형의 영향을받는 것처럼 보입니다.
위에서 아래로 직사각형을 그립니다. 그릴 다음 사각형의 8 개의 모서리 인접 에지 쌍 각각에 대해 모서리의 가장 긴 부분을 오버랩하고 코너를 포함하는 사각형을 찾기 위해 현재 그려진 모든 사각형을 반복합니다. 가장자리의 해당 부분을 겹쳐서 렌더링하십시오.
너무 느린 경우 2 차원 세그먼트 트리를 사용하여 현재 모서리에 그려진 모든 사각형을 저장하여 주어진 모서리가 포함 된 사각형을 빠르게 식별 할 수 있습니다.
답해 주셔서 감사합니다. 사각형에 다양한 크기와 겹침이있을 수 있다는 것을 보여주기 위해 실물 크기를 업데이트했습니다. 나는 그것이 당신의 대답을 정말로 바꿀 것이라고 생각하지 않습니다. 당신은 동의합니까? –
나는이 정확한 기술을 따랐으며 성공적이었다. 나는이 대답이 깊은 세부 사항으로 들어 가지 않는다는 것을 안다. 그러나 여기의 철학은 모든 것을 줄로 나누는 것이다. 직사각형을 가장 높은 z 순서로 정렬하여 처리합니다. 검사 할 각 사각형에 대해 4 줄로 나눕니다. 그런 다음 위의 각 사각형의 4 줄에 대해 4 줄을 테스트합니다. 선이 교차하도록 결정되면 선을 더 작은 세그먼트로 나누십시오. 교차 선을 다르게 렌더링합니다. 전체적으로 약 140 줄의 코드가 필요했습니다. 감사합니다. –
2 개 이상의 직사각형이 겹치는 지점에있을 수 있습니까? 이미지에서 가장 높은 스택은 2입니다. – maraca
[두 직사각형의 교차점을 감지하는 알고리즘?] (http://stackoverflow.com/questions/115426/algorithm-to-detect-intersection-of-two-rectangles?rq=1)) – Arash
@marca - 물론, 사각형은 사용자가 제공하며 다양한 크기와 겹침을 가질 수 있습니다. 단순화를 위해 최소한의 모형을 제공했지만 몇 가지 겹침을 추가해야합니다. 내가 해줄거야. –