2013-02-28 1 views
1

브라우저에서 touchmove event을 사용하여 멀티 터치 제스처를 감지하는 방법을 배우려고합니다. touchmove 이벤트가 캡처되면 현재 개의 터치 포인트 목록을 얻을 수 있습니다. 그러나 이것은 제스처를 탐지하는 데별로 유용하지 않습니다. 나는 터치 이벤트의 역사를 얻고 싶다. 예를 들어, 각 현재 터치 포인트 이전에 나온 마지막 10 개의 터치 포인트 목록 (사용 가능한 경우)을 얻고 싶습니다.'touchmove` 이벤트가 캡처되었을 때 터치 히스토리에 액세스하십시오.

enter image description here

내가 다른 손에서 (손가락 사용자가 두 개의 서로 다른 패턴으로 화면에 두 개의 별도 손가락을 드래그되는이 시나리오에서 말했듯이 : 후 나는 내가 무엇을 시각화하는 시도 아래 그림을 그립니다), touchmove 이벤트 내에 터치 포인트가 두 개만 수신됩니다. 두 지점 각각이 지점에 도착하기 전에 각각의 위치에 대한 기록에 액세스 할 수 있습니까 AB?

여기에 touchmove 이벤트를 캡처 코드의 관련 비트는 다음과 같습니다

document.addEventListener('touchmove', touchMove, false); 

function touchMove(e) { 
    console.log("length is: ", e.touches.length); 
    e.preventDefault(); 
} 

타사 라이브러리를 제안하지 마십시오 - 내 목표를 정의하고 내 자신의 사용자 정의 진정한 멀티 터치 제스처를 감지하는 방법을 배우는 것입니다.

답변

1

예, 이전 위치를 배열에 저장하고 반복 할 수 있습니다.

  1. touchstart의 이벤트 touchmove 이벤트의 내부
  2. 에 그 이력 리셋 Touchidentifier 객체의 속성을 통해 식별 된 각각의 어레이 상 목적으로 현재 좌표를 누른다. 어레이에 푸시 한 후 event.targetTouches. To only store 10, call 슬라이스 (-10)`에있는 Touch 객체의 pageXpageY 속성의 좌표에 액세스 할 수 있습니다.
+1

만약 내가 'touchstart'에서 그 역사를 다시 설정하지 않으면 나는 모든 접촉의 역사를 잃어 버릴까요? 그들은 indipendant 터치 포인트이며 시작/종료 시간은 다른 터치와 독립적입니다. 예를 들어 설명해 주거나 코드 작성 방법을 보여줄 수있는 코드를 작성하면 정말 좋습니다. – Aras