[TypeScript] 제스처로 대화하기. #3 - 탭(with. 범위) 편

이번 편은 이전 편으로부터 이어집니다.

탭을 할 때 누른 지점과 뗀 지점의 차이가 큰 경우에 이를 유효하다 할 수 있을까요? 물론 허용할 수는 있지만 관점에 따라서는 부적절해 보일 수 있습니다.

요소 내부로 제한

범위를 요소 내부로 제한하고자 하는 경우, elementFromPoint을 활용할 수 있습니다. 이 함수는 좌표를 포함하는 최상단 요소를 반환합니다. 만약 반환된 요소가 추적 중인 요소와 다르다면 포인터가 외부에 있는 것으로 판단할 수 있습니다.

if(element !== document.elementFromPoint(e.clientX, e.clientY)) {
    // ...

    return;
}

직선거리로 제한

두 좌표 간 거리는 어떻게 계산할 수 있을까요? 우리는 피타고라스 정리를 이용할 수 있습니다. \(a^2 + b^2 = c^2\)에 대해 \(a = x2 - x1, b = y2 - y1\)이고 \(c\)는 최대 거리로 생각할 수 있습니다.

if((e.clientX - x) ** 2 + (e.clientY - y) ** 2 > maxDistance) {
    // ...

    return;
}

최대 거리는 최대 지연과 마찬가지로 정해진 표준은 없습니다. 다만 일반적으로 5px 이내의 값을 사용합니다. 하지만 이는 상당히 제한적이므로 때에 따라 더 큰 값을 사용하는 것이 바람직할 수도 있습니다.

두 방법 모두 pointerup에서 사용할 수 있습니다. 둘 중 하나의 방법만을 선택할 필요는 없습니다. 두 방법은 목적이 다르므로 서로 병행할 수 있습니다. 일반적으로 두 가지 모두 사용하는 것이 적절합니다.

시리즈는 다음 편에서 계속됩니다. 읽어주셔서 감사합니다!

묻고 답하기

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