[javascript] 터치 이벤트를 사용하여 터치한 위치에 따라 개체를 회전시키는 방법은?

12 Dec 2023

javascript

먼저 HTML 파일에 다음과 같이 div 요소를 생성합니다.

<div id="rotatableObject" style="width: 100px; height: 100px; background-color: #ff0000;"></div>

그런 다음 JavaScript 코드에서 해당 div 요소를 가져와서 터치 이벤트를 처리합니다.

document.getElementById('rotatableObject').addEventListener('touchstart', handleTouchStart, false);
document.getElementById('rotatableObject').addEventListener('touchmove', handleTouchMove, false);

var xDown = null;
var yDown = null;

function handleTouchStart(event) {
  xDown = event.touches[0].clientX;
  yDown = event.touches[0].clientY;
}

function handleTouchMove(event) {
  if (!xDown || !yDown) {
    return;
  }

  var xDiff = xDown - event.touches[0].clientX;
  var yDiff = yDown - event.touches[0].clientY;

  var angle = Math.atan2(yDiff, xDiff) * 180 / Math.PI;
  document.getElementById('rotatableObject').style.transform = `rotate(-${angle}deg)`;

  xDown = event.touches[0].clientX;
  yDown = event.touches[0].clientY;
}

이 코드는 터치 시작 지점부터 현재 터치 지점까지의 각도를 계산하여 rotatableObject를 해당 각도로 회전시킵니다. 이제 해당 요소를 터치하고 이동시키면 회전할 것입니다.