[javascript] Hammer.js를 사용하여 화면 회전 제스처를 처리하는 방법은?

27 Nov 2023

javascript

Hammer.js는 터치 기반 이벤트를 처리하기 위한 자바스크립트 라이브러리입니다. 이를 사용하여 화면 회전 제스처를 처리하는 방법을 알아보겠습니다.

먼저, Hammer.js를 프로젝트에 추가하고 초기화해야 합니다. HTML 파일의 <head> 태그 내에 다음 코드를 추가합니다:

<script src="https://cdn.jsdelivr.net/npm/hammerjs@2.0.8/hammer.min.js"></script>

제스처를 처리할 요소에 id를 추가하고, 자바스크립트 파일에서 해당 요소를 선택합니다. 예를 들어, <div> 요소에 id="myElement"를 추가합니다:

<div id="myElement">화면 회전 제스처를 처리할 영역</div>

자바스크립트 파일에서 Hammer.js를 초기화하고, 제스처를 처리하고자 하는 요소를 선택합니다. 선택한 요소에 대해 rotate 이벤트 리스너를 등록하고, 원하는 동작을 구현합니다:

var element = document.getElementById('myElement');
var hammer = new Hammer(element);
hammer.get('rotate').set({ enable: true });

hammer.on('rotate', function(event) {
  // 화면 회전 제스처 처리
  var rotation = event.rotation;
  // 원하는 동작을 여기에 구현합니다
});

위의 코드에서 rotate 이벤트는 화면 회전 동작이 감지되었을 때 발생하며, event.rotation 속성을 통해 회전 각도를 가져올 수 있습니다. 이를 활용하여 원하는 동작을 구현하면 됩니다.

Hammer.js를 사용하여 화면 회전 제스처를 처리하는 방법에 대해 알아보았습니다. 이제 원하는 동작을 구현하여 화면 회전 제스처를 처리할 수 있을 것입니다. 추가적인 정보는 Hammer.js 공식 문서를 참고하시기 바랍니다.