개요
회사 프로젝트를 진행하다가 어떤 영역에 배치 된 사각형이 어떤 각도로 회전했을 때, 그 사각형의 각 꼭짓점을 알아야만 하는 상황이 생겼어요.
장시간의 리서칭과 사내 개발자분의 조언을 통해 완성한 소스코드입니다.
소스코드
1
2
3
4
5
6
7
8
9
10
export const getRectPoint = (
x: number,
y: number,
radian: number
): Point => {
const left = (x) * Math.cos(radian) - (y) * Math.sin(radian) + p;
const top = (x) * Math.sin(radian) + (y) * Math.cos(radian) + q;
return { x: left, y: top };
};
위 소스코드는 아래 공식을 참고하여 만들어졌어요.
회전 된 사각형의
x
좌표는 회전 되지 않은 사각형의x
를Math.cos(radian)
과 곱한 값과, 회전되지 않은y
좌표의 값과Math.sin(radian)
값을 곱하여 더한 값과 동일합니다.
회전 된 사각형의
y
좌표는 회전 되지 않은 사각형의-x
를Math.sin(radian)
과 곱한 값과, 회전되지 않은y
좌표의 값과Math.cos(radian)
값을 곱하여 더한 값과 동일합니다.
문제점
다만 이 소스코드는 회전축이 매번 (0, 0)
으로 고정되어 있어요. 하지만 제가 필요로 하는 것은 회전축이 상황에따라 변경되어도 정상적으로 작동하는 로직이기에 기존 소스코드에서 약간 수정하여 해당 기능을 완성했어요.
완성 된 코드
1
2
3
4
5
6
7
8
9
10
11
12
export const getRectPoint = (
x: number,
y: number,
p: number,
q: number,
radian: number
): Point => {
const left = (x - p) * Math.cos(radian) - (y - q) * Math.sin(radian) + p;
const top = (x - p) * Math.sin(radian) + (y - q) * Math.cos(radian) + q;
return { x: left, y: top };
};
기존에
(0, 0)
을 기준으로 작성 된 코드에서, 회전축의 좌표를 추가로 입력 받을 수 있는 매개변수p
와q
를 추가했어요.
주의
본 소스코드에 사용 된 회전 값은 radian
이므로, degree
값을 넣을 시 정상 동작하지 않습니다!
레퍼런스
Stackoverflow - Get rotated rectangle points from x, y, width, height and rotation