Menggunakan rotasiAngle dan touchRadius

Paul Kinlan

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

Meskipun sudah lama digunakan, ada baiknya menjelaskan rotationAngle membuka beberapa penggunaan sentuhan yang lebih menarik {i>gesture <i}terutama pada perangkat seluler.

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

Apa artinya?

Anggap saja sebagai cara untuk secara akurat mewakili ukuran, bentuk dan orientasi jari pengguna pada layar. Pengguna tidak selalu mengetuk layar dengan ujung pena ujung jari mereka, namun lebih sering menekan layar seperti sedang memberi sidik jari kepada polisi. Tanpa rotationAngle, Anda akan dengan mudah mendapatkan seberapa lebar dan tinggi gestur sentuh. Dengan rotationAngle, Anda dapatkan 90 derajat rotasi (0 adalah vertikal dan 90 adalah horizontal). Mengapa hanya 90 derajat? Anda hanya memerlukan 90 derajat karena saat Anda bergerak melewati sudut-sudut tersebut. radiusX dan radiusY akan berubah untuk mengakomodasi.

Hal menarik lainnya tentang hal ini adalah bahwa area kontak jari pengguna berubah karena mereka memvariasikan tingkat tekanan jari mereka di layar. Ini bukan pengganti langsung untuk force, tetapi Anda dapat membedakan antara kuas ringan di layar karena bidang permukaannya lebih kecil daripada tekan yang lebih keras.

Bagaimana cara menggunakannya?

Pertama, Anda memerlukan perangkat yang dapat mendeteksi ini. Nexus 10 akan berfungsi dengan baik. J contoh yang bagus adalah dengan melihat langsung Contoh cat Rick Byers. Tidak boleh dikalahkan meskipun berikut adalah 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 praktiknya?

Ada beberapa tempat di mana hal ini akan menjadi manfaat langsung bagi pengguna:

  • Misalnya, aplikasi web menggambar dan manipulasi gambar bisa menggunakan informasi untuk mengubah {i>stroke<i} atau efek yang diterapkan pada kanvas. Anda dapat gunakan radius sentuh untuk mengubah ukuran kuas dan Anda dapat mengombinasikannya rotasiAngle untuk memvariasikan sudut kontak kuas pada kanvas.
  • Pengenalan gestur yang ditingkatkan: Jika Anda memahami rotasiAngle, Anda dapat membuat {i>gesture <i}satu jari untuk membuat sebuah objek berputar.

Apakah setiap perangkat mendukung fitur ini?

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

Screenshot rotasi sudut sentuh

Kredit gambar kepada Rick Byers.

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

Mengapa repot-repot?

Pertanyaan bagus. Seperti banyak fitur di web, fitur ini adalah pengalaman tambahan.
Peristiwa sentuh akan berfungsi jika didukung, dan jika nilai radius dan rotasi adalah tersedia, Anda dapat meningkatkan aplikasi Anda untuk memberikan pengguna kemampuan pengalaman yang lancar bagi developer. Tidak semua pengguna memiliki tablet Wacom, tetapi ketika menyajikan banyak gambar aplikasi akan memanfaatkannya.

Bagaimana dengan Peristiwa Penunjuk?

Intinya adalah memastikan bahwa kita memiliki acara sentuh yang disempurnakan sepenuhnya API untuk developer yang mengandalkannya. Lihat bagaimana aku sedikit menghindari pertanyaan itu... Selengkapnya dengan serius, jika kamu tertarik untuk mengikuti Blink's PointerEvent Anda dapat memberi bintang pada Masalah 471824 dan baca Rick Byers' dokumen pelacakan.

Lihat Juga