Hammer.js는 다양한 제스처를 쉽게 처리할 수 있는 JavaScript 라이브러리입니다. 이 라이브러리를 사용하여 핀치(확대/축소) 제스처를 구현하는 방법을 알아보겠습니다.

먼저, Hammer.js를 HTML 파일에 추가합니다. <script> 태그를 사용하여 Hammer.js를 로드할 수 있습니다.

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

이제 핀치 제스처를 처리할 요소를 선택하고 Hammer 객체를 생성합니다. 일반적으로는 DOM 요소를 선택해야 합니다.

// 핀치 제스처를 처리할 요소 선택
var element = document.getElementById('myElement');

// Hammer 객체 생성
var hammer = new Hammer(element);

Hammer 객체를 생성한 후에는 pinch 이벤트를 등록하여 핀치 제스처를 처리할 수 있습니다. 이벤트 핸들러 함수를 작성하여 핀치 제스처에 대한 동작을 정의할 수 있습니다.

// 핀치 제스처 이벤트 핸들러
hammer.on('pinch', function(event) {
  // 핀치 제스처에 대한 동작 정의
  var scale = event.scale;  // 제스처의 확대/축소 값
  // 확대/축소 값을 사용하여 요소에 적용할 작업 수행
  // 예: 요소의 크기 조정, 스타일 변경 등
});

핀치 제스처 이벤트 핸들러에서 event.scale 속성을 사용하여 제스처의 확대/축소 값을 얻을 수 있습니다. 이 값을 사용하여 필요한 작업을 수행하시면 됩니다.

이제 Hammer.js를 사용하여 핀치(확대/축소) 제스처를 처리하는 방법을 알아보았습니다. Hammer.js를 사용하면 간단한 코드로 다양한 제스처를 처리할 수 있으므로, 웹 애플리케이션에서 상호작용성을 향상시키는 데 유용하게 사용할 수 있습니다.

더 자세한 내용은 Hammer.js의 공식 문서를 참조하시기 바랍니다.

• Hammer.js 공식 사이트: https://hammerjs.github.io/
• Hammer.js GitHub 저장소: https://github.com/hammerjs/hammer.js