Menggunakan rotasiAngle dan touchRadius

Paul Kinlan

Perubahan yang relatif kecil pada Touch API di Chrome diterapkan di Chrome 39, yang memperkenalkan versi atribut webkitRotationAngle yang berfungsi pada objek TouchEvent. Sekarang di Chrome 45 (Beta pada Juli 2015), awalan dihapus menjadi rotationAngle, sehingga implementasi kami lebih sesuai dengan Spesifikasi TouchEvent dan Firefox.

Meskipun sudah ada sejak lama, ada baiknya menjelaskan apa itu rotationAngle karena membuka beberapa penggunaan gestur sentuh yang lebih menarik, terutama di perangkat seluler.

Secara teknis, sudut rotasi adalah jumlah derajat (antara 0 dan 90) dari elips area kontak yang ditentukan oleh Touch.radiusX dan Touch.radiusY. Err, keren, kan? (Perlu diperhatikan bahwa saya baru mengetahui bahwa Chrome di Android tidak mengunci nilai radiusX dan radiusY ke 64 px, tetapi memvariasikannya bergantung pada ukuran kontak layar).

Apa artinya?

Anggap saja sebagai cara untuk merepresentasikan ukuran, bentuk, dan orientasi jari pengguna di layar secara akurat. Pengguna tidak selalu mengetuk layar dengan ujung jari, tetapi sering kali menekan layar seperti sedang memberikan sidik jari kepada polisi. Tanpa rotationAngle, Anda hanya akan mendapatkan lebar dan tinggi gestur sentuh. Dengan rotationAngle, Anda mendapatkan rotasi 90 derajat (0 adalah vertikal dan 90 adalah horizontal). Mengapa hanya 90 derajat? Anda hanya memerlukan 90 derajat karena saat Anda bergerak melewati sudut tersebut, radiusX dan radiusY akan berubah untuk menyesuaikan.

Hal menarik lainnya adalah area kontak jari pengguna berubah seiring dengan perubahan tingkat tekanan jari mereka pada layar. Fitur ini bukan pengganti langsung untuk force, tetapi Anda dapat membedakan antara sentuhan ringan pada layar karena sentuhan tersebut akan memiliki area permukaan yang lebih kecil daripada tekanan yang lebih keras.

Bagaimana cara menggunakannya?

Pertama, Anda memerlukan perangkat yang dapat mendeteksi hal ini. Nexus 10 akan berfungsi dengan baik. Contoh yang bagus adalah dengan melihat langsung contoh render Rick Byers. Namun, tidak mau kalah, berikut cara menggunakannya tanpa kanvas.

var touchHandler = function(e) {
    e.preventDefault();
    var touches = e.changedTouches;
    var touch = touches[0]; // only concerned about first touch.
    
    var rotationAngle = touch.rotationAngle || touch.webkitRotationAngle || 0;
    var radiusX = touch.radiusX || touch.webkitRadiusX || 1;
    var radiusY = touch.radiusY || touch.webkitRadiusY || 1;
    var force = touch.force || touch.webkitForce || 0;
    
    // Use the rotationAngle to rotate the 'p' element.
    
    p.style.width = radiusX * 2 + 'px';
    p.style.height = radiusY * 2 + 'px';
    p.style.transform = "rotate(" + rotationAngle + "deg)";
};

document.documentElement.ontouchstart = touchHandler;
document.documentElement.ontouchend = touchHandler;
document.documentElement.ontouchmove = touchHandler;

Di mana Anda akan menggunakan ini dalam praktik?

Ada beberapa tempat yang jelas di mana hal ini akan memberikan manfaat langsung bagi pengguna:

  • Misalnya, aplikasi web manipulasi gambar dan lukisan dapat menggunakan informasi ini untuk mengubah goresan atau efek yang diterapkan ke kanvas. Anda dapat menggunakan radius sentuh untuk mengubah ukuran kuas dan Anda dapat menggabungkan rotationAngle untuk memvariasikan sudut kontak kuas pada kanvas.
  • Pengenalan gestur yang ditingkatkan: Jika Anda memahami rotationAngle, Anda dapat membuat gestur satu jari untuk memutar objek.

Apakah setiap perangkat mendukung fitur ini?

Tidak. Hal ini belum terlalu umum. Jika Anda memiliki Nexus 10, Anda akan melihat sesuatu seperti berikut,

Screenshot rotasi sudut sentuh

Kredit gambar untuk Rick Byers.

Jika perangkat tidak dapat memahami sudut rotasi sentuhan, rotationAngle akan bernilai 0 dan nilai radiusX serta radiusY akan sama (tetapi dapat bervariasi bergantung pada area permukaan sentuh saat ini).

Buat apa susah-susah?

Pertanyaan bagus. Seperti banyak fitur di web, ini adalah pengalaman tambahan.
Peristiwa sentuh akan berfungsi jika didukung, dan jika nilai radius dan rotasi tersedia, Anda dapat menyempurnakan aplikasi untuk memberikan pengalaman yang lebih baik kepada pengguna. Tidak semua pengguna memiliki tablet Wacom, tetapi jika ada, banyak aplikasi melukis yang akan memanfaatkannya.

Bagaimana dengan Peristiwa Pointer?

Ini benar-benar hanya tentang memastikan kami memiliki API peristiwa sentuh yang sepenuhnya lengkap untuk developer yang mengandalkannya. Lihat bagaimana saya sedikit menghindari pertanyaan... Namun, lebih serius lagi, jika Anda tertarik untuk mengikuti implementasi PointerEvent Blink, Anda dapat membintangi Masalah 471824 dan membaca dokumen pelacakan Rick Byers.

Lihat Juga