[javascript] 자바스크립트에서 터치 이벤트를 사용하여 확대/축소(핀치 줌) 동작을 구현하는 방법은?

12 Dec 2023

javascript

웹 앱이나 모바일 앱에서 이미지나 지도와 같은 요소를 확대/축소(핀치 줌)하려면 터치 이벤트 처리가 필요합니다.

자바스크립트를 사용하여 이 동작을 구현하는 방법을 알아보겠습니다.

1. 터치 이벤트 감지

먼저, touchstart, touchmove, touchend 이벤트를 사용하여 터치 입력을 감지합니다. 각 이벤트는 사용자가 화면에 터치를 시작하거나 이동할 때 발생합니다.

const element = document.getElementById('target'); // 확대/축소할 요소

let initialDistance = 0; // 초기 두 손가락 간 거리

element.addEventListener('touchstart', function(event) {
  if (event.touches.length === 2) {
    initialDistance = Math.hypot(
      event.touches[0].clientX - event.touches[1].clientX,
      event.touches[0].clientY - event.touches[1].clientY
    );
  }
});

element.addEventListener('touchmove', function(event) {
  if (event.touches.length === 2) {
    const currentDistance = Math.hypot(
      event.touches[0].clientX - event.touches[1].clientX,
      event.touches[0].clientY - event.touches[1].clientY
    );

    const delta = currentDistance - initialDistance;
    // 확대/축소 동작 수행
  }
});

2. 확대/축소 동작 구현

touchmove 이벤트에서 현재 두 터치 포인트 간의 거리 변화를 계산하여 확대/축소 동작을 처리합니다. 예를 들어, 해당 거리 변화에 따라 이미지나 요소의 크기를 조정하여 확대 또는 축소합니다.

const MIN_SCALE = 0.5;
const MAX_SCALE = 3.0;
let currentScale = 1.0; // 현재 확대/축소 비율

element.addEventListener('touchmove', function(event) {
  if (event.touches.length === 2) {
    const currentDistance = Math.hypot(
      event.touches[0].clientX - event.touches[1].clientX,
      event.touches[0].clientY - event.touches[1].clientY
    );
    const delta = currentDistance - initialDistance;

    let newScale = currentScale + delta * 0.01; // 확대/축소 비율 적용

    // 확대/축소한 비율이 최소 및 최대 비율을 벗어나지 않도록 제한
    newScale = Math.min(Math.max(newScale, MIN_SCALE), MAX_SCALE);

    // 확대/축소 적용
    element.style.transform = `scale(${newScale})`;
  }
});

3. 터치 이벤트 종료 처리

마지막으로, touchend 이벤트를 사용하여 터치 입력이 종료될 때 초기 거리와 확대/축소 비율을 재설정합니다.

element.addEventListener('touchend', function(event) {
  if (event.touches.length === 0) {
    initialDistance = 0; // 초기 거리 초기화
    currentScale = parseFloat(element.style.transform.match(/scale\(([^)]+)\)/)[1]) || 1.0; // 현재 확대/축소 비율 업데이트
  }
});

위의 예제 코드는 터치 이벤트를 사용하여 자바스크립트로 확대/축소(핀치 줌) 동작을 구현하는 방법을 보여줍니다.

필요에 따라 브라우저 호환성과 추가적인 제스처 처리를 고려하여 코드를 확장할 수 있습니다. 이를 통해 사용자 친화적이고 반응형인 확대/축소 동작을 구현할 수 있습니다.

자세한 내용은 MDN Web Docs를 참고하시기 바랍니다.