Perubahan yang relatif kecil pada Touch API di Chrome diluncurkan di
Chrome 39, yang
memperkenalkan versi atribut webkitRotationAngle yang berfungsi pada
objek TouchEvent. Sekarang di Chrome 45 (Beta pada Juli 2015), awalan ini tidak digunakan lagi dan menjadi rotationAngle, sehingga penerapan kami lebih selaras dengan Spesifikasi TouchEvent dan Firefox.
Meskipun sudah ada sejak lama, sebaiknya jelaskan 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.
Keren, kan? (Perlu diperhatikan bahwa saya hanya menemukan bahwa Chrome di
Android tidak mengunci nilai radiusX dan radiusY ke 64 piksel, tetapi
mengatasinya bergantung pada ukuran kontak layar).
Apa artinya?
Anggaplah ini sebagai cara untuk merepresentasikan ukuran, bentuk, dan orientasi
jari pengguna secara akurat di layar. Pengguna tidak selalu mengetuk layar dengan ujung
jari mereka, tetapi sering kali menekan layar seperti mereka memberikan
sidik jari kepada polisi. Tanpa rotationAngle, Anda akan mendapatkan lebar dan tinggi gestur sentuh. Dengan rotationAngle, Anda
mendapatkan rotasi 90 derajat (0 vertikal dan 90 horizontal). Mengapa hanya
90 derajat? Anda hanya memerlukan 90 derajat karena saat Anda melewati sudut tersebut,
radiusX dan radiusY akan berubah untuk mengakomodasi.
Hal keren lainnya 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 penekanan yang lebih keras.
Bagaimana cara menggunakannya?
Pertama-tama, Anda memerlukan perangkat yang dapat mendeteksinya. Nexus 10 akan berfungsi dengan baik. Contoh yang bagus adalah melihat langsung contoh cat Rick Byers. Namun, 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 hal ini dalam praktik?
Ada beberapa tempat yang jelas bahwa hal ini akan menjadi manfaat langsung bagi pengguna:
- Aplikasi web lukisan dan manipulasi gambar misalnya 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 menggabungkannya dalam rotationAngle untuk memvariasikan sudut kontak kuas pada kanvas.
- Peningkatan pengenalan gestur: Jika memahami rotationAngle, Anda dapat membuat gestur jari tunggal untuk membuat objek berputar.
Apakah setiap perangkat mendukung fitur ini?
Tidak. Hal ini belum terlalu umum. Jika memiliki Nexus 10, Anda akan melihat tampilan seperti berikut,
Kredit gambar untuk Rick Byers.
Jika perangkat tidak dapat memahami sudut rotasi sentuhan, rotationAngle akan menjadi 0 dan nilai radiusX dan radiusY akan
sama (tetapi dapat bervariasi bergantung pada area permukaan sentuh saat ini).
Apa manfaatnya?
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 memberi pengguna pengalaman
yang lebih andal. Tidak semua pengguna memiliki tablet Wacom, tetapi jika ada, banyak aplikasi
menggambar akan memanfaatkannya.
Bagaimana dengan Peristiwa Pointer?
Hal ini hanya untuk memastikan kita memiliki API peristiwa sentuhan yang lengkap untuk developer yang mengandalkannya. Lihat bagaimana saya sedikit menghindar dari pertanyaan tersebut... Namun, secara lebih serius, jika Anda tertarik untuk mengikuti penerapan PointerEvent Blink, Anda dapat membintangi Masalah 471824 dan membaca dokumen pelacakan Rick Byers.