[javascript] Hammer.js를 사용하여 확대/축소 가능한 이미지를 구현하는 방법은?

27 Nov 2023

javascript

먼저, Hammer.js를 프로젝트에 추가해야 합니다. 다음과 같이 <script> 태그를 사용하여 Hammer.js를 로드합니다.

<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>

이제 이미지를 포함한 HTML 요소를 만듭니다. 이미지를 감싸는 부모 요소를 만들고, 해당 요소에 id를 지정합니다. 예를 들어:

<div id="zoomable-image-wrapper">
  <img src="path/to/image.jpg" alt="Zoomable Image">
</div>

이제 JavaScript 코드를 작성하여 Hammer.js를 사용하여 이미지를 확대/축소할 수 있도록 만들어보겠습니다. 다음은 해당 기능을 수행하는 예시 코드입니다.

var imgWrapper = document.getElementById('zoomable-image-wrapper');
var img = imgWrapper.getElementsByTagName('img')[0];

var hammertime = new Hammer(imgWrapper);
var scale = 1;
var lastScale = 1;
var posX = 0;
var posY = 0;
var lastPosX = 0;
var lastPosY = 0;

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

hammertime.on('doubletap', function(ev) {
  scale = (scale === 1) ? 2 : 1;
  img.style.transform = 'scale(' + scale + ') translate(' + posX + 'px, ' + posY + 'px)';
});

hammertime.on('pinchstart', function(ev) {
  lastScale = scale;
});

hammertime.on('pinchmove', function(ev) {
  scale = lastScale * ev.scale;
  img.style.transform = 'scale(' + scale + ') translate(' + posX + 'px, ' + posY + 'px)';
});

hammertime.on('panstart', function(ev) {
  lastPosX = posX;
  lastPosY = posY;
});

hammertime.on('panmove', function(ev) {
  posX = lastPosX + ev.deltaX;
  posY = lastPosY + ev.deltaY;
  img.style.transform = 'scale(' + scale + ') translate(' + posX + 'px, ' + posY + 'px)';
});

위의 코드는 이미지를 더블 탭하여 확대/축소 할 수 있도록 하고, 핀치 동작으로 이미지를 확대/축소하며, 이동시킬 때 pan 동작을 통해 이미지를 움직일 수 있도록 합니다.

이제 웹 브라우저에서 페이지를 열어보면, Hammer.js를 사용하여 구현한 확대/축소 가능한 이미지를 볼 수 있을 것입니다. 해당 이미지를 더블 탭하여 확대/축소하거나, 핀치 동작으로 이미지를 확대/축소하며, pan 동작으로 이미지를 이동시킬 수 있습니다.

참고: 본 예시 코드는 Hammer.js의 사용법을 간략하게 설명한 것이며, 실제 프로젝트에 적용할 때 다양한 상황에 맞게 수정할 수 있습니다. Hammer.js의 공식 문서도 참고하시면 더 많은 기능과 사용법을 알아볼 수 있습니다.