targetTouches가 여러 요소에서 동시에 움직이는 트랙을 추적합니까?

Question

한다고 가정 내가있어 네 손가락 아래로 : 다음 손가락 한 손가락 3

이동

한다고 가정 요소 B의 두 가지 요소 A의 손가락 (2 일)와 두 개의 (4 3) 나는 손가락 1과 3을 포함하는 changedTouches을 포함하는 touchmove 이벤트를보고 있어야합니다.

targetTouches은 무엇을 포함할까요? 그것은 1과 2, 또는 3과 4, 또는 모두 4를 포함 할 것인가?

그것은 1과 2는 동일한 요소 3과 4에 있다는 사실에 대한 충분한 정보를 제공 할 수있는 유일한 방법처럼 보인다 모두가 다른 요소에있는이 이touchmove 이벤트를 보내는 것입니다.

저는 터치 프레임 워크를 구축 중이며 모든 손가락과 목표를 추적하는 글로벌 데이터 구조를 구축하여 어떤 일이 발생했는지 알 수 있습니다. 그러나이 작업을 건너 뛰는 것이 가능한지 궁금 해서요 targetTouches 이벤트 필요한 모든 정보를 제게 제공 할 수 있습니다.

나는 나의 페이지에 touchstart으로 테스트 :

document.touchstart = function(evt) { console.log("touchstart", evt.targetTouches); } 

나는 내가 위에서 설명한 순서에 따라 네 개의 손가락을 내려 놓았다. 다음으로 나는 얼마나 많은 데이터를 생성했는지에 따라 더 어려운 작업 인 touchmove에 targetTouches에 어떤 것이 포함되어 있는지 알아볼 수 있는지 알아볼 것입니다.

Answer 1

아래의 Nexus 7에서 iOS6.0 (iPhone 5), iOS5.1.1 (iPad 3), Android 4.2.1 (Nexus 7) (Chrome 18.0.1025469), Android 17 용 Firefox에 내 조사 결과를 게시합니다. .

현재 iPhone 5의 데이터 만 있습니다. 많은 작업이 있습니다.

내가 한 것은 페이지에서 두 가지 요소를 만들고 touchstart 을 호출하여 스크롤을 방지하는 것입니다. 그런 다음 touchmove은 changedTouches 및 targetTouches 버퍼의 길이를 계산하여 DOM에 표시합니다. 또한, 나는 이벤트가 들어왔다 속도를 계산 여기에 코드 조각입니다 :. 나는 주위에 내 손가락을 이동하면

// exposed is a variable which other code uses rAF to present a representation of it on the DOM so I can view it 
touchmove: function(evt) { 
    evt.preventDefault(); 
    var time = Date.now(); 
    var diff = time - exposed.touch_move_last_time; 
    if (!exposed.touch_move_last_time) exposed.touch_move_last_time = Date.now(); 
    if (!exposed.touch_move_rate) exposed.touch_move_rate = 0; 
    exposed.touch_move_last_time = time; 
    exposed.touch_move_rate += (diff - exposed.touch_move_rate)*0.01; 
    exposed.touch_move_changedTouches_count = evt.changedTouches.length; 
    exposed.touch_move_targetTouches_count = evt.targetTouches.length; 

, 나는 오히려 a를 지그재그로 인해 지그재그보다 원형으로 이동이 -zag은 샘플 속도보다 적은 이벤트를 발생시킬 수 있다고 지적합니다. 수렴 속도가 낮기 때문에 (이것은 변동하지 않는 숫자를 생성하기위한 것입니다.) 샘플 속도에서 판독 값이 안정화되기까지 약 5 초간 계속 문지르면됩니다.

iOS6.0 :

한 소자에서 두 손가락을 넣고 대략 1 개 손가락 이동 :
changedTouches 크기 : 1 (이동 한)
targetTouches 크기 : 2 (두 손가락 요소)
샘플 속도 : 16.66ms

한 요소에서 두 손가락을 내려 놓고 모두 이동할 :
changedTouches 크기 : 2 (모두 이동)
targetTouches 크기 : 2 (요소의 두 손가락)
샘플 속도 : 16.66 MS

각 요소에 하나 개의 손가락을 내려 놓고 약 한 손가락을 이동 :
changedTouches 크기 : 1 (이동 한)
targetTouches 크기 : 1
샘플 속도 (초기 이동 의해 접촉 요소를 지칭)는 :
changedTouches 사이즈 : 1 (

각 요소에 하나 개의 손가락을 내려 놓고 약 두 손가락을 이동 16.66ms 이동 한)
targetTouches 크기 : 1 (초기 이동 한)
샘플 레이트에 의해 접촉 소자를 말한다 : 8.29ms

먼저 요소에 하나 개의 손가락과 두번째 예에서 두 손가락을 내려 놓고 lement :
경우 두 번째 요소에 하나 개의 손가락을 움직이는
changedTouches 크기 : 1
targetTouches 크기 : 2
샘플 속도 :

을 16.66ms 경우 두 번째 요소에서 두 손가락을 이동
changedTouches 크기 : 2
targetTouches 크기 : 2
샘플 속도 : 16.6ms 상기 제 1 핑거는

) 움직이지 않는 경우 제 소자에 손가락을 이동
changedTouches 크기 : 1
targetTouches 크기 : 1
샘플 속도 :

을 16.66ms 경우에 손가락을 움직이는 두 번째 요소의 첫 번째 요소와 한 개의 손가락
changedTouches 크기 : 1
targetTouches 크기 : 8.29ms

세 손가락changedTouches
크기를 이동하는 경우

: 2 샘플 속도 : 크기
targetTouches 1 ~ 2의 변동도 1 및도 2
샘플 레이트 EN 8.3MS

각 요소에서 두 손가락을 내려 놓고 주위의 각 요소에 하나를 이동 :
changedTouches 크기 : 1
targetTouches 크기 : 2
샘플 속도 : 약 9ms

그것은 꽤 분명 모든 샘플 속도가 ~ 120Hz 인 경우 손가락을 움직이는 요소가 두 개 이상 있습니다. 이는 동시에 터치 한 요소마다 별도의 touchmove을 발사 할 것임을 나타냅니다. 테스트를 3 가지 요소로 확장하면 샘플링 속도는 180Hz가됩니다. 업데이트 : 나는 iPad에서 세 가지 요소를 테스트했으며 5.4ms 독서를 산출합니다.

나에게 조금 궁금한 점은 정확히 8.33ms가 아닌 8.29ms가되는 이유입니다. 넥서스 7 changedTouches 버퍼에 크롬에

다음 9ms이

또 다른 업데이트 (내가 모든 프레임을 업데이트 DOM을 가지고 있기 때문에)이 최고 속도로 처리 할 수있는 것보다 더 많은 처리가 단지 때문에 아마 읽기 webkitForce 독서가 항상 매 터치마다 항상 바뀌기 때문에 항상 모든 터치로 채워지는 것처럼 보입니다. 또한 너무 느리므로 샘플 속도 판독 값이 유용한 정보를주지 못합니다. 그러나 페이지에서 마지막으로 순서가 지정된 요소에있는 손가락 수를 변경하면 touchmove 이벤트가 요소별로 올바르게 실행되는 것으로 보입니다.

Nexus 7의 Firefox는 적절한 샘플링 수치를 산출하는 데 조금 낫지 만 디스플레이 업데이트는 Chrome보다 훨씬 느립니다. 파이어 폭스가 덜 고르지 않을 때까지 나는 코드가 올바르게 작동하도록 노력해야 할 가치가 있다고 생각하지 않는다.