Hammer.js는 모바일 장치에서 터치, 스와이프, 드래그 등의 제스처 이벤트를 쉽게 처리할 수 있게 도와주는 자바스크립트 라이브러리입니다. 이번에는 Hammer.js의 터치 좌표 추적 기능에 대해 알아보도록 하겠습니다.

터치 좌표 추적

Hammer.js를 사용하면 사용자가 터치한 좌표를 손쉽게 추적할 수 있습니다. 다음은 간단한 예제 코드입니다.

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

hammertime.on("pan", function(event) {
  console.log("X 좌표: " + event.center.x);
  console.log("Y 좌표: " + event.center.y);
});

위 코드는 id가 “myElement”인 HTML 요소에서 발생한 터치 이벤트를 감지하고, 이벤트 객체의 center 속성을 통해 X 좌표와 Y 좌표를 콘솔에 출력하는 예제입니다.

pan은 터치 이벤트 중에서 스와이프 동작을 의미합니다. 다른 이벤트 종류인 tap, swipe 등을 사용할 수도 있습니다.

Hammer.js의 이벤트 객체에는 다양한 정보와 속성이 있으며, 좌표를 비롯한 다른 정보도 쉽게 추출할 수 있습니다.

추가적인 기능

Hammer.js는 터치 이벤트뿐만 아니라 다양한 제스처 이벤트를 처리할 수 있는 다양한 기능을 제공합니다. 여기서는 터치 좌표 추적 기능만 간략히 다뤘지만, 해당 라이브러리를 사용하면 pinch(확대/축소), rotate(회전), press(길게 누름) 등의 제스처도 쉽게 처리할 수 있습니다.

Hammer.js의 자세한 사용법과 추가 기능은 공식 문서를 참조하시기 바랍니다.

결론

Hammer.js는 터치 이벤트를 간단하게 처리할 수 있는 유용한 라이브러리입니다. 터치 좌표 추적 기능을 포함하여 다양한 제스처 이벤트를 처리할 수 있으므로, 모바일 웹 애플리케이션 개발에 자주 활용됩니다.