[TypeScript] 제스처로 대화하기. #14 - 핀치 편

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

핀치는 지정된 중심점을 기준으로 스와이프하는 동작을 말합니다. 포인터가 중심점으로부터 멀어지면 핀치 아웃, 가까워지면 핀치 인이라고 합니다. 가상의 중심점을 상상해 보세요. 이제 포인터를 배치한 후, 이동하여 멀어지기도 하고, 가까워지기도 하는 겁니다. 이렇게 하면 아래와 같은 세 점이 발생합니다.

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

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

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

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

1. 중심점과 포인터의 초기 지점 간의 거리를 반지름 \(r_1\)으로 갖는 원 \(C_1\)

2. 중심점과 포인터의 이동 후 지점 간의 거리를 반지름 \(r_2\)로 갖는 원 \(C_2\)

핀치는 \(C_1\)을 \(C_2\)의 크기로 잡아 늘리는 것과 동일합니다. 따라서 핀치 하고자 하는 대상은 각 축에 대해 각각 \(\frac{r_2}{r_1}\)배로 증가합니다. 이때 한 가지 주의할 점은 \(r_1\)이 0인 경우는 처리할 수 없다는 것입니다. 코드로 작성하면 아래와 같습니다.

const r1 = Math.hypot(p1.x - o.x, p1.y - o.y);
if(r1 === 0) { return; }

const r2 = Math.hypot(p2.x - o.x, p2.y - o.y);

const scale = r2 / r1;

이렇게 계산한 scale은 모든 축에 각각 적용해야 합니다.

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

묻고 답하기

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