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

Hammer.js는 터치와 제스처 이벤트를 처리하기 위한 JavaScript 라이브러리입니다. 이 라이브러리를 사용하여 이미지의 크기를 확대하거나 축소하는 동작을 제어할 수 있습니다.

먼저, Hammer.js를 다운로드하고 HTML 파일에 스크립트를 추가해야 합니다. 다음은 Hammer.js 다운로드 및 스크립트 추가 예제입니다.

<script src="hammer.min.js"></script>

이제 Hammer.js를 사용하여 이미지 크기를 변경하는 코드를 작성해 보겠습니다.

var element = document.getElementById('myImage');
var hammer = new Hammer(element);

var scale = 1;
var lastScale = 1;

hammer.get('pinch').set({ enable: true });

hammer.on('pinchmove', function (event) {
  scale = lastScale * event.scale;
  element.style.transform = 'scale(' + scale + ')';
});

hammer.on('pinchend', function () {
  lastScale = scale;
});

위의 코드에서는 Hammer.js로부터 myImage라는 id를 가진 이미지 엘리먼트를 가져옵니다. 그리고 pinchmove 이벤트를 감지하여 scale 변수를 업데이트하고 이미지의 크기를 조정합니다. pinchend 이벤트에서는 마지막으로 변경된 크기를 저장합니다.

위의 코드를 HTML 파일에 추가하고 이미지를 화면에 표시하면 이미지를 확대하거나 축소할 수 있는 동작을 제어할 수 있습니다.