Hammer.js는 JavaScript 라이브러리로, 다양한 터치 제스처 인식 기능을 제공합니다. 그 중에서도 멀티터치 제스처 인식 기능에 대해 알아보겠습니다.

멀티터치 제스처란?

멀티터치 제스처는 두 개 이상의 손가락을 사용하여 화면을 동시에 터치하거나 움직이는 제스처를 말합니다. 대표적인 멀티터치 제스처에는 핀치(pinching), 회전(rotating), 드래그 등이 있습니다.

Hammer.js에서의 멀티터치 제스처 인식

Hammer.js는 Hammer.Manager() 객체를 사용하여 멀티터치 제스처를 인식하고 처리할 수 있습니다. 이 객체를 생성한 후에 add() 메서드를 사용하여 인식할 제스처를 등록합니다.

var element = document.getElementById("myElement");
var manager = new Hammer.Manager(element);

// 핀치 제스처 등록
manager.add(new Hammer.Pinch());

// 회전 제스처 등록
manager.add(new Hammer.Rotate());

// 드래그 제스처 등록
manager.add(new Hammer.Pan());

위의 예시 코드에서는 myElement라는 ID를 가진 HTML 요소를 대상으로 멀티터치 제스처를 인식하고 있습니다. 핀치 제스처, 회전 제스처, 드래그 제스처를 등록하여 해당 제스처가 발생하면 처리할 수 있습니다.

멀티터치 제스처 이벤트 핸들링

멀티터치 제스처가 인식되면, manager 객체에 이벤트 핸들러를 등록하여 해당 제스처에 대한 동작 코드를 작성할 수 있습니다.

manager.on("pinch", function(event) {
  console.log("핀치 제스처 인식!");
  console.log("Scale: " + event.scale);
});

manager.on("rotate", function(event) {
  console.log("회전 제스처 인식!");
  console.log("Rotation: " + event.rotation);
});

manager.on("pan", function(event) {
  console.log("드래그 제스처 인식!");
  console.log("Translate: " + event.deltaX + ", " + event.deltaY);
});

위의 예시 코드에서는 핀치 제스처, 회전 제스처, 드래그 제스처 각각에 대한 이벤트 핸들러를 등록하고 있습니다. 각 제스처 이벤트가 발생하면 콘솔에 해당 제스처의 정보를 출력하는 코드를 작성하였습니다.

결론

Hammer.js의 멀티터치 제스처 인식 기능을 사용하면 웹 애플리케이션에서 다양한 멀티터치 제스처를 간편하게 인식하고 처리할 수 있습니다. 멀티터치 제스처를 활용하여 더 풍부한 사용자 인터랙션을 구현해보세요.

참고 자료

• Hammer.js 공식 문서