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

27 Nov 2023

javascript

Hammer.js는 터치 기반의 제스처를 쉽게 구현할 수 있는 JavaScript 라이브러리입니다. 회전 제스처를 구현하기 위해서는 Hammer.js를 사용하여 이벤트를 감지하고 해당 이벤트를 처리해야합니다.

먼저, HTML 파일에 Hammer.js 라이브러리를 포함시킵니다.

<script src="https://hammerjs.github.io/dist/hammer.min.js"></script>

다음으로, JavaScript 파일에 다음과 같이 코드를 작성합니다.

// 요소를 선택하고 Hammer 인스턴스를 생성합니다.
var element = document.getElementById("myElement");
var hammer = new Hammer(element);

// 회전 제스처 이벤트를 등록합니다.
hammer.get("rotate").set({ enable: true });

// 회전 제스처가 시작될 때 실행되는 함수를 정의합니다.
hammer.on("rotatestart", function(event) {
  // 이벤트 처리를 위해 필요한 코드를 작성합니다.
});

// 회전 제스처가 진행 중일 때 실행되는 함수를 정의합니다.
hammer.on("rotatemove", function(event) {
  // 이벤트 처리를 위해 필요한 코드를 작성합니다.
});

// 회전 제스처가 종료될 때 실행되는 함수를 정의합니다.
hammer.on("rotateend", function(event) {
  // 이벤트 처리를 위해 필요한 코드를 작성합니다.
});

위 코드에서 "myElement"는 회전 제스처를 사용할 HTML 요소의 ID입니다. 이벤트 처리 함수를 정의할 때, 이벤트 객체 event를 활용하여 회전 제스처의 속성 (각도 등)을 가져올 수 있습니다.

위의 코드에서는 시작, 진행 중 및 종료 시점에서 각각 실행되는 함수를 정의하였습니다. 필요에 따라 이벤트 처리 코드를 작성하십시오.

이제 Hammer.js를 사용하여 회전 제스처를 구현할 수 있습니다. 추가로 Hammer.js에 대한 자세한 내용은 공식 문서를 참조하십시오.