[javascript] 터치 이벤트를 사용하여 터치된 영역의 크기를 측정하는 방법은?

12 Dec 2023

javascript

STEP 1: 터치 이벤트 수신

element.addEventListener('touchstart', handleTouchStart, false); 
element.addEventListener('touchmove', handleTouchMove, false); 

STEP 2: 터치 위치 저장

var touchStartX = 0;
var touchStartY = 0;
var touchEndX = 0;
var touchEndY = 0;

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

function handleTouchMove(event) {
    touchEndX = event.touches[0].clientX;
    touchEndY = event.touches[0].clientY;
}

STEP 3: 영역 크기 측정

function calculateSize() {
    var width = Math.abs(touchEndX - touchStartX);
    var height = Math.abs(touchEndY - touchStartY);
    var area = width * height;
    console.log('Width:', width, 'Height:', height, 'Area:', area);
}

위 예제 코드에서는 터치 이벤트를 사용하여 터치된 영역의 크기를 측정하는 방법을 보여줍니다. 터치 시작점과 끝점을 저장하고, 그것을 사용하여 영역의 크기를 계산합니다.

더 많은 정보가 필요하다면 MDN Web Docs를 참고하십시오.