두 직사각형이 평면상에 놓여져 있을 때 아래와 같이 7가지로 나누어 생각해 볼 수 있다.
회색 사각형을 기준으로
1. 한쪽 귀퉁이를 덮음
2. 한 변을 덮음
3. 자신의 한 변이 모두 덮임
4. 교차
5. 자신이 포함됨
6. 다른 사각형을 모두 덮음
7. 겹치지 않음
각각의 경우를 나누어 처리할 수도 있으나
1~6의 겹치는 영역(직사각형)을 보면 모두 공통적인 특징이 있다.
겹치는 영역(Intersection)의
왼쪽 변은, 기존 두 사각형의 왼쪽 변 중에서 더 오른쪽에 있는 것
오른쪽 변은, 기존 두 사각형의 오른쪽 변 중에서 더 왼쪽에 있는 것
위쪽 변은, 기존 두 사각형의 위쪽 변 중에서 더 아래쪽에 있는 것
아래쪽 변은, 기존 두 사각형의 아래쪽 변 중에서 더 위쪽에 있는 것
이 된다는 것을 확인할 수 있다.
화면 좌측상단이 원점인 좌표계를 기준으로 코딩할 때 사각형 구조체를 x, y, width, height로 정의한다면, 겹치는영역의
(왼쪽 변) x는 기존 두 사각형의 x중에서 큰 것
(오른쪽 변) width는 기존 두 사각형의 x+width 중에서 작은 것 - x좌표
(위쪽 변) y는 기존 두 사각형의 y중에서 큰 것
(아래쪽 변) height는 기존 두 사각형의 y+height 중에서 작은 것 - y좌표
으로 하면 된다.
-x, -y 가 붙어있는 이유는 해당 속성이 각각 너비와 높이이기 때문.
아래는 Javascript 코드로 작성해 본 것이다.
|
코드를 보면 두 사각형이 겹치지 않은 경우를 걸러내는 부분이 추가되었다.
이 문제에 대해 조금 다르게 생각해 볼 수도 있는데,
너비가 w이고 높이가 h인 screen이 있을 때
임의의 점에 대하여
그 점이 screen 안에 있을 때는 그대로 표시하고,
screen 밖에 있을 때는 screen의 안쪽 변 끝에 두는 간단한 식이 있다.
x' = min(w, max(0, x))
y' = min(h, max(0, y))
이 식을 한 사각형의 4 꼭지점(초록색)에 각각 적용한다면,
두 사각형의 겹치는 부분이 만드는 새로운 사각형의 4 꼭지점(파란색)을 얻을 수 있다.
