[javascript] Hammer.js를 사용하여 확대/축소 가능한 이미지의 화면 이동을 제어하는 방법은?

27 Nov 2023

javascript

먼저, Hammer.js 라이브러리를 HTML 파일에 추가합니다. 다음과 같은 링크 태그를 사용하여 추가할 수 있습니다.

<head>
  ...
  <script src="https://hammerjs.github.io/dist/hammer.js"></script>
  ...
</head>

이제 JavaScript 코드를 사용하여 Hammer.js를 초기화하고 제스처를 감지할 요소를 설정합니다. 예를 들어, image 클래스를 가진 이미지 요소를 사용하겠습니다.

<body>
  <img src="image.jpg" class="image" alt="확대/축소 가능한 이미지">
  ...
  <script>
    const imageElement = document.querySelector('.image');

    const hammer = new Hammer(imageElement);

    hammer.get('pan').set({ direction: Hammer.DIRECTION_ALL });
    hammer.get('pinch').set({ enable: true });

    let lastScale = 1;
    let lastPosX = 0;
    let lastPosY = 0;
    let posX = 0;
    let posY = 0;
    let scale = 1;
    let currentScale = 1;

    hammer.on('panstart panmove', (e) => {
      posX = lastPosX + e.deltaX;
      posY = lastPosY + e.deltaY;
    });

    hammer.on('pinchstart pinchmove', (e) => {
      scale = Math.max(1, Math.min(lastScale * e.scale, 10));
      currentScale = scale / lastScale;
    });

    hammer.on('panend pancancel pinchend pinchcancel', () => {
      lastScale = scale;
      lastPosX = posX;
      lastPosY = posY;
    });

    function transform() {
      const transformValue = `scale(${scale}) translate(${posX}px, ${posY}px)`;
      imageElement.style.transform = transformValue;
      imageElement.style.webkitTransform = transformValue;
    }

    function resetTransform() {
      posX = 0;
      posY = 0;
      scale = 1;
      currentScale = 1;
      transform();
    }

    // 초기 설정
    transform();

    // 리셋 버튼 클릭 시 초기 설정으로 복구
    const resetButton = document.getElementById('reset-button');
    resetButton.addEventListener('click', resetTransform);
  </script>
</body>

위의 코드는 Hammer.js를 사용하여 확대 / 축소 가능한 이미지를 제어하는 방법을 보여줍니다. 이미지를 드래그하거나 핀치 제스처로 확대 / 축소 할 수 있습니다. 코드는 panning(start, move), pinching(start, move), 그리고 제스처가 끝났을 때 panning(end, cancel), pinching(end, cancel) 이벤트를 처리합니다. 이벤트 핸들러에서는 이미지의 위치와 크기를 계산하여 transform() 함수를 호출하여 이미지에 적용합니다. resetTransform() 함수는 리셋 버튼을 클릭하면 이미지를 초기 설정으로 복구합니다.

Hammer.js를 사용하여 확대 / 축소 가능한 이미지의 화면 이동을 제어하는 방법입니다. Hammer.js는 다양한 제스처를 다루는 강력한 라이브러리이므로 필요에 따라 다른 제스처도 사용할 수 있습니다. 공식 문서를 참조하여 사용 방법을 자세히 확인할 수 있습니다.