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

27 Nov 2023

javascript

먼저, Hammer.js를 다운로드하고 HTML 파일에 추가합니다. 다음으로, 이미지를 마크업합니다.

<div id="zoomable-image">
  <img src="path_to_image" alt="Zoomable Image">
</div>

이제 JavaScript 코드로 이미지의 크기를 조절하는 함수를 작성합니다.

var zoomableImage = document.getElementById('zoomable-image');
var mc = new Hammer.Manager(zoomableImage);

var pinch = new Hammer.Pinch();
var pan = new Hammer.Pan();

var scale = 1, lastScale;

pinch.recognizeWith(pan);
mc.add([pinch, pan]);

mc.on("pinchstart", function (e) {
  lastScale = scale;
});

mc.on("pinchmove", function (e) {
  scale = lastScale * e.scale;
  zoomableImage.style.transform = "scale(" + scale + ")";
});

mc.on("pinchend", function (e) {
  lastScale = scale;
});

위의 코드는 Hammer.js의 Pinch와 Pan 이벤트를 사용하여 이미지의 크기를 조절합니다. pinchstart, pinchmove, pinchend 이벤트에 대한 핸들러를 등록하고, pinchmove 이벤트 핸들러에서 이미지의 크기를 변경합니다.

위의 코드를 이용하여 확대/축소 가능한 이미지의 크기를 제어할 수 있습니다. Hammer.js는 다양한 터치 동작을 감지할 수 있으므로, 다른 동작을 사용하여 이미지 크기 조절 방식을 변경할 수도 있습니다. 자세한 내용은 Hammer.js 공식 문서를 참조하시기 바랍니다.