[TypeScript] 제스처로 대화하기. #7 - 팬 편

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

팬은 포인터를 누른 상태로 방향 상관없이 이동하는 것을 말합니다. 좌표가 중요했던 이전 제스처와는 달리 이번에 중요한 것은 이동량입니다. 즉, 이전 좌표로부터 현재 좌표는 얼마 만큼 이동했느냐가 관건이지요.

interface Point {
    x: number;
    y: number;
}

let prevPoint: Point;

element.addEventListener("pointermove", e => {
    const deltaX = e.clientX - prevPoint.x;
    const deltaY = e.clientY - prevPoint.y;

    // ...

    prevPoint = { x: e.clientX, y: e.clientY };
});

위와 같은 형태로 간단히 구현할 수 있습니다. prevPoint는 이전 좌표를 나타내며, pointerdown에서 최초에 초기화해야 합니다. deltaX와 deltaY는 각 축에 대한 이동량을 의미합니다. 이를 통해 핸들링한 뒤, prevPoint를 갱신하는 형태로 진행이 이루어집니다.

제한 요소

팬 또한 제한 요소가 필요할 수 있습니다. 일반적으로 최소 지연 시간과 최소 거리를 설정합니다. 이는 pointermove의 반복 호출로 인한 성능 저하를 개선하기 위함입니다. 이는 지금까지 다뤘던 내용으로 쉽게 구현할 수 있습니다.

if(currDelay < minDelay || currDistance < minDistance) { return; }

// ...

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

묻고 답하기

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