Colin's Blog
[javascript] Chart.js에서의 multi-touch 제스처 인식

Chart.js는 마우스 또는 터치 입력을 사용하여 인터랙티브한 차트를 생성할 수 있는 자바스크립트 라이브러리입니다. Chart.js를 사용하여 다양한 제스처 인식 기능을 구현할 수 있으며, 이 중에서 multi-touch 제스처를 인식하고 처리하는 방법을 알아보겠습니다.

1. 이벤트 리스너 등록

Chart.js에서 multi-touch 제스처를 인식하기 위해서는 터치 이벤트를 등록해야 합니다. 이를 위해서는 chart 객체의 options 속성에 onTouchStart, onTouchMove, onTouchEnd 이벤트를 설정해야 합니다.

const chart = new Chart(ctx, {
  type: 'line',
  data: data,
  options: {
    onTouchStart: handleTouchStart,
    onTouchMove: handleTouchMove,
    onTouchEnd: handleTouchEnd,
  }
});

2. 터치 이벤트 처리

등록한 터치 이벤트에 대한 처리 함수를 작성해야 합니다. handleTouchStart, handleTouchMove, handleTouchEnd 함수에서는 해당 이벤트에 대한 처리 로직을 구현할 수 있습니다.

function handleTouchStart(event) {
  if (event.touches.length > 1) {
    // multi-touch 제스처 시작 처리
    // ...
  }
}

function handleTouchMove(event) {
  if (event.touches.length > 1) {
    // multi-touch 제스처 중 처리
    // ...
  }
}

function handleTouchEnd(event) {
  if (event.touches.length === 0) {
    // multi-touch 제스처 끝 처리
    // ...
  }
}

3. 제스처 처리

multi-touch 제스처 인식 후 얻을 수 있는 정보로는 터치 이벤트의 touches 속성을 활용할 수 있습니다. touches는 터치되는 모든 지점에 대한 정보를 담고 있는 배열이며, 각각의 지점에 대한 x, y 좌표 등을 알 수 있습니다.

function handleTouchMove(event) {
  if (event.touches.length > 1) {
    const touch1 = event.touches[0];
    const touch2 = event.touches[1];
    const distance = Math.sqrt(
      Math.pow(touch2.clientX - touch1.clientX, 2) + 
      Math.pow(touch2.clientY - touch1.clientY, 2)
    );
    // 두 지점 사이의 거리 계산
    // ...
  }
}

4. 차트 업데이트

제스처에 따라 차트를 업데이트하려면 chart.update() 메서드를 호출하여 차트를 다시 그려야 합니다. 이를 통해 제스처에 따라 차트의 데이터를 동적으로 변경하거나 다른 시각적 효과를 적용할 수 있습니다.

function handleTouchMove(event) {
  if (event.touches.length > 1) {
    // ...
    
    chart.data.datasets[0].data[0] = distance;
    chart.update();
  }
}

참고 자료

© 2018 Colin. All rights reserved.