Menggunakan rotasiAngle dan touchRadius

Paul Kinlan

Perubahan yang relatif kecil pada Touch API di Chrome hadir di Chrome 39, yang memperkenalkan versi kerja atribut webkitRotationAngle pada objek TouchEvent. Kini di Chrome 45 (Beta pada Juli 2015), kode ini tidak diberi awalan sebagai rotationAngle, sehingga implementasi kami lebih selaras dengan TouchEvent Spec dan Firefox.

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

Secara teknis, sudut rotasi adalah jumlah derajat (antara 0 dan 90) elips area kontak yang ditentukan oleh Touch.radiusX dan Touch.radiusY. Keren, kan? (Perlu diperhatikan bahwa saya hanya mengetahui bahwa Chrome di Android tidak mengunci nilai radiusX dan radiusY menjadi 64px, tetapi bervariasi menurut ukuran kontak layar).

Apa artinya?

Anggap ini sebagai cara untuk menggambarkan secara akurat ukuran, bentuk, dan orientasi jari pengguna pada layar. Pengguna tidak selalu mengetuk layar dengan ujung jari yang dimiliki, melainkan lebih sering menekan layar seperti memberi sidik jari kepada polisi. Tanpa rotationAngle, Anda bisa mendapatkan lebar dan tinggi gestur sentuh. Dengan rotationAngle, Anda mendapatkan rotasi 90 derajat (0 untuk vertikal dan 90 horizontal). Mengapa hanya 90 derajat? Anda hanya memerlukan 90 derajat karena saat Anda bergerak melewati sudut tersebut, radiusX dan radiusY akan berubah untuk mengakomodasi.

Hal keren lainnya tentang hal ini adalah area kontak jari pengguna berubah saat mereka memvariasikan tingkat tekanan jari mereka pada layar. Ini bukan pengganti langsung untuk force, tetapi Anda dapat membedakan antara kuas ringan di layar karena kuas tersebut akan memiliki area permukaan yang lebih kecil daripada tekan 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 melihat langsung pada Contoh lukis Rick Byers. Tidak mau kalah meskipun berikut adalah cara untuk 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 bagian yang jelas akan memberikan manfaat langsung bagi pengguna:

  • Misalnya, aplikasi web melukis dan manipulasi gambar dapat menggunakan informasi ini untuk mengubah goresan atau efek yang diterapkan pada kanvas. Anda dapat menggunakan radius sentuh untuk mengubah ukuran kuas dan dapat menggabungkannya dalam RotationAngle untuk memvariasikan sudut kontak kuas di kanvas.
  • Pengenalan gestur yang ditingkatkan: Jika memahami rotationAngle, Anda dapat membuat gestur jari tunggal untuk membuat objek berputar.

Apakah semua perangkat mendukung hal ini?

Tidak. 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 menjadi 0 dan nilai radiusX serta radiusY akan sama (tetapi dapat bervariasi bergantung pada area permukaan sentuh saat ini).

Kenapa harus repot?

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 meningkatkan aplikasi untuk memberikan pengalaman yang lebih mampu kepada pengguna. Tidak semua pengguna memiliki tablet Wacom, tetapi saat menampilkan banyak aplikasi lukisan yang akan memanfaatkannya.

Bagaimana dengan Peristiwa Pointer?

Intinya adalah memastikan bahwa kami memiliki API peristiwa sentuh yang disempurnakan sepenuhnya bagi developer yang mengandalkannya. Lihat bagaimana aku menghindari pertanyaannya... Namun, yang lebih serius, jika Anda tertarik untuk mengikuti penerapan PointerEvent Blink, Anda dapat memberi bintang Masalah 471824 dan membaca dokumen pelacakan Rick Byers.

Lihat Juga