정밀한 터치로 정확한 동작

맷 곤트

M37 기준 Chrome의 TouchEvents 구현 (2014년 8월 안정화)에 변경사항이 발생했습니다. 이는 보고된 좌표를 정수 대신 부동 소수점 수로 변경합니다.

변경 전 변경 후
clientX: 167
clientY: 196
pageX:   167
pageY:   196
radiusX: 26
radiusY: 26
screenX: 167
screenY: 277
clientX: 167.33299255371094
clientY: 195.66700744628906
pageX: 167.33299255371094
pageY: 195.66700644628903 36700644628903 36700644628903 36700644628903 3.66700744628906 3



이렇게 변경하면 손가락 위치의 정확도가 높아지므로 사용자의 동작에 더 부드럽게 반응할 수 있습니다.

Rick Byers의 데모를 사용하면 소용돌이를 천천히 그릴 때 이것이 얼마나 큰 차이를 만들 수 있는지 확인할 수 있습니다.

터치 이벤트의 차이.

이렇게 하면 픽셀 밀도가 1보다 큰 화면에만 영향을 미칩니다. 이유를 이해할 수 있도록 예를 통해 알아보겠습니다.

CSS 픽셀로 구성된 3x3 그리드가 있고 화면 밀도가 3이라고 가정해 보겠습니다. 즉, 9x9 물리적 픽셀의 그리드와 왼쪽 상단에서 오른쪽 하단으로의 사용자 동작이 있다고 가정해 보겠습니다.

CSS 픽셀 및 화면 픽셀 그리드

원래는 터치 위치를 가장 가까운 CSS 픽셀로 반올림했습니다. 즉, 이 동작에서는 다음 단계를 거치게 됩니다.

동작 중 CSS 픽셀 정밀도.

사용자가 손가락을 움직일 때 실제 픽셀이 표시할 수 있는 중간 단계를 그릴 수 없습니다.

이제 부동 소수점 수로 전환했으므로 동작이 다음과 같을 수 있습니다.

동작 중에 부동 소수점 수를 지정합니다.

대부분의 경우 코드를 변경할 필요는 없지만 TouchEvents로 인해 발생하는 애니메이션이나 움직임이 특히 느린 동작의 경우 더 부드러워집니다.

또한 모바일 Safari(https://bugs.webkit.org/show_bug.cgi?id=133180)에도 이러한 개선사항을 적용할 계획입니다.