Chrome'daki Touch API'de yapılan nispeten küçük bir değişiklik Chrome 39'da kullanıma sunuldu. Bu değişiklik, TouchEvent nesnesinde webkitRotationAngle özelliğinin çalışan bir sürümünü kullanıma sundu. Chrome 45'te (Temmuz 2015'te Beta) rotationAngle olarak öneksiz hale getirildi. Bu sayede uygulamamız TouchEvent spesifikasyonu ve Firefox ile daha uyumlu hale geldi.
Bir süredir kullanılıyor olsa da rotationAngle özelliğinin ne olduğunu açıklamakta fayda var. Bu özellik, özellikle mobil cihazlarda dokunma hareketlerinin daha ilginç kullanım şekillerini mümkün kılıyor.
Teknik olarak, dönüş açısı, Touch.radiusX ve Touch.radiusY tarafından tanımlanan temas alanı elipsinin derece cinsinden (0 ile 90 arasında) sayısıdır.
Harika, değil mi? (Android'de Chrome'un radiusX ve radiusY değerlerini 64 piksele kilitlemediğini, bunun yerine ekranın temas boyutuna göre değiştirdiğini öğrendiğimi belirtmek isterim).
Peki bu tam olarak ne anlama geliyor?
Bunu, kullanıcının parmağının ekrandaki boyutunu, şeklini ve yönünü doğru bir şekilde temsil etmenin bir yolu olarak düşünebilirsiniz. Kullanıcılar ekrana her zaman parmak uçlarıyla dokunmaz. Genellikle parmak izi verir gibi ekrana basarlar. rotationAngle olmadan, dokunma hareketinin ne kadar geniş ve ne kadar uzun olduğunu görürsünüz. rotationAngle ile 90 derece döndürme elde edersiniz (0 dikey, 90 ise yataydır). Neden sadece
90 derece? Yalnızca 90 dereceye ihtiyacınız vardır çünkü bu açıları geçtiğinizde radiusX ve radiusY buna göre değişir.
Bu özelliğin bir diğer avantajı da kullanıcının parmağının ekrana uyguladığı basınç derecesi değiştikçe parmağın temas alanının da değişmesidir. force için doğrudan bir alternatif değildir ancak ekrana hafifçe dokunulduğunda daha sert basmaya kıyasla daha küçük bir yüzey alanı oluşacağından, hafif dokunmaları ayırt edebilirsiniz.
Nasıl kullanabilirim?
Öncelikle bunu algılayabilecek bir cihaza ihtiyacınız var. Nexus 10 iyi çalışır. Doğrudan Rick Byers'ın boyama örneğine bakmak iyi bir örnektir. Ancak Canvas olmadan da kullanabilirsiniz.
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;
Bunu pratikte nerede kullanırsınız?
Bu özelliğin kullanıcıya hemen fayda sağlayacağı bazı bariz yerler vardır:
- Örneğin, boyama ve resim işleme web uygulamaları, tuvale uygulanan fırça darbesini veya efektleri değiştirmek için bu bilgileri kullanabilir. Dokunma yarıçapını kullanarak fırçanın boyutunu değiştirebilir ve rotationAngle'ı birleştirerek fırçanın tuval üzerindeki temas açısını değiştirebilirsiniz.
- Gelişmiş hareket tanıma: rotationAngle'ı anlarsanız bir nesneyi döndürmek için tek parmakla yapılan bir hareket oluşturabilirsiniz.
Bu özellik her cihazda destekleniyor mu?
Hayır. Henüz çok yaygın değil. Nexus 10 kullanıyorsanız aşağıdakine benzer bir ekran görürsünüz.
Resim için Rick Byers'a atıfta bulunulmuştur.
Cihaz, dokunmanın dönüş açısını anlayamadığında rotationAngle 0 olur ve radiusX ile radiusY değerleri eşit olur (ancak mevcut dokunma yüzeyi alanına bağlı olarak değişebilir).
Peki, neden fragman yayınlamalısınız?
Güzel soru. Web'deki birçok özellik gibi bu da ek bir deneyimdir.
Dokunma etkinlikleri desteklendiğinde çalışır. Yarıçap ve dönüş değerleri mevcutsa uygulamanızı geliştirerek kullanıcıya daha yetkin bir deneyim sunabilirsiniz. Her kullanıcıda Wacom tablet yoktur ancak mevcut olduğunda birçok boyama uygulaması bu tabletten yararlanır.
İşaretçi etkinlikleri ne olacak?
Bu, yalnızca API'yi kullanan geliştiriciler için tam kapsamlı bir dokunma etkinliği API'si sunmamızı sağlamakla ilgilidir. Soruyu nasıl geçiştirdiğimi gördünüz mü? Daha ciddi bir şekilde, Blink'in PointerEvent uygulamasını takip etmek istiyorsanız 471824 numaralı soruna yıldız ekleyebilir ve Rick Byers'ın takip belgesini okuyabilirsiniz.