[TypeScript] 제스처로 대화하기. #16 - 로테이트 편

잠깐! PointerEvent에 대해 아직 잘 모른다면 [typescript] 포인터 대통합(with. PointerEvent)을 먼저 읽어보세요!

로테이트는 지정된 중심점을 기준으로 회전하듯 스와이프하는 동작을 말합니다. 지난 편과 마찬가지로 가상의 중심점을 상상해 보세요. 이제 포인터를 배치하고 중심점을 기준으로 회전하듯이 이동해봅시다. 이렇게 하면 아래와 같은 세 점이 발생합니다.

1. 최초에 지정된 중심점 \(O\)

2. 포인터의 초기 지점 \(P_1\)

3. 포인터의 이동 후 지점 \(P_2\)

또, 세 점으로부터 아래와 같은 두 축을 상상할 수 있습니다.

1. 중심점과 포인터의 초기 지점을 포함하는 축 \(A\)

2. 중심점과 포인터의 이동 후 지점을 포함하는 축 \(B\)

로테이트는 \(A\)를 \(B\)의 위치로 회전시키는 것과 동일합니다. 축 \(A\)와 기준 축과의 각도를 \(\theta_A\), 축 \(B\)와 기준 축과의 각도를 \(\theta_B\)라 합시다. 따라서 로테이트하고자 하는 대상은 \(\theta_B - \theta_A\) 만큼 회전합니다. 코드로 작성하면 아래와 같습니다.

const thetaA = Math.atan2(p1.y - o.y, p1.x - o.x) * 180 / Math.PI;
const thetaB = Math.atan2(p2.y - o.y, p2.x - o.x) * 180 / Math.PI;

const rotate = thetaB - thetaA;

내용은 다음 편에서 이어집니다. 읽어주셔서 감사합니다!

묻고 답하기

개인적인 판단에 의해 적절하다고 여겨지는 경우, 모두가 볼 수 있도록 이곳에 문답이 추가됩니다. 그렇지 않더라도 질문에 대한 답변은 별도로 이루어집니다.