Sentuhan presisi untuk gestur yang akurat

Perubahan terjadi dalam implementasi TouchEvents Chrome mulai M37 (stabil pada 08/2014), yang mengubah koordinat yang dilaporkan menjadi float, bukan bilangan bulat.

Sebelum Setelah
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.66700744628906
pageY: 195.66700744628906


Hasil dari perubahan ini berarti Anda memiliki respons yang lebih lancar terhadap gestur pengguna karena memberikan akurasi posisi jari yang lebih tinggi.

Dengan menggunakan demo Rick Byers, Anda dapat melihat perbedaan besar yang dihasilkan saat menggambar pusaran secara perlahan.

Perbedaan Peristiwa Sentuh.

Tindakan ini hanya akan membuat layar yang terpengaruh yang memiliki kepadatan piksel lebih besar dari 1. Untuk memahami alasannya, mari kita pelajari sebuah contoh.

Bayangkan Anda memiliki petak 3x3 piksel CSS dan kepadatan layar adalah 3, artinya kita memiliki petak piksel fisik 9x9 dan gestur pengguna dari kiri atas ke kanan bawah.

Piksel CSS dan petak piksel layar.

Awalnya, kami membulatkan posisi sentuhan ke piksel CSS terdekat, yang berarti dalam gestur ini, Anda akan mengikuti langkah-langkah berikut.

Presisi piksel CSS selama gestur.

Kita melewatkan langkah perantara yang dapat ditampilkan oleh piksel fisik saat pengguna menggerakkan jarinya.

Setelah kita beralih ke {i>float<i}, {i>gesture <i}kita dapat terlihat seperti ini.

Presisi mengambang selama gestur.

Umumnya, hal ini tidak memerlukan perubahan apa pun dalam kode Anda, tetapi hal ini berarti animasi atau gerakan yang Anda lakukan sebagai akibat dari TouchEvents akan lebih lancar, terutama untuk gestur lambat.

Ada juga rencana untuk menghadirkan peningkatan ini ke Safari seluler: https://bugs.webkit.org/show_bug.cgi?id=133180.