Döndürme Açısı ve dokunma Yarıçapı'nı kullanma

Paul Kinlan

Chrome'daki Touch API'de 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 sürümünde) ön ek kaldırılarak rotationAngle olarak değiştirildi. Bu sayede, uygulamamız TouchEvent spesifikasyonu ve Firefox ile daha uyumlu hale geldi.

rotationAngle, bir süredir kullanılıyor olsa da özellikle mobil cihazlarda dokunma hareketlerinin daha ilginç kullanım alanlarına olanak tanıdığı için ne olduğunu açıklamaya değer.

Teknik olarak, dönme açısı, Touch.radiusX ve Touch.radiusY tarafından tanımlanan temas alanı elipsinin derece sayısıdır (0 ile 90 arasında). Bu harika, değil mi? (Android'deki Chrome'un radiusX ve radiusY değerlerini 64 piksel olarak kilitlemediğini, bunun yerine ekranın temas boyutuna göre değiştirdiğini fark ettim.)

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 göstermenin bir yolu olarak düşünebilirsiniz. Kullanıcılar ekrana her zaman parmaklarının ucuyla dokunmaz. Bunun yerine, polise parmak izi veriyorlarmış gibi ekrana sık sık basarlar. rotationAngle olmadan yalnızca dokunma hareketinin genişliğini ve yüksekliğini alırsınız. rotationAngle ile 90 derece dönebilirsiniz (0 dikey, 90 yatay). Why only 90 degrees? Yalnızca 90 dereceye ihtiyacınız vardır. Çünkü bu açıları aştığınızda radiusX ve radiusY buna göre değişir.

Bu özelliğin bir diğer avantajı da kullanıcı parmağını ekrana bastırdığında parmağının temas ettiği alanın değişmesidir. force'ün doğrudan yerine geçmez ancak ekranda hafif fırça darbelerini daha sert bastırılmış darbelere kıyasla daha küçük bir yüzey alanına sahip oldukları için ayırt edebilirsiniz.

How can I use it?

Öncelikle bunu algılayabilecek bir cihaza ihtiyacınız var. Nexus 10 iyi çalışır. Rick Byers boya örneğine göz atarak bu konuyu daha iyi anlayabilirsiniz. Bununla birlikte, kanvas olmadan kullanmanın bir yolunu da burada bulabilirsiniz.

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 kullanabilirsiniz?

Bunun kullanıcıya hemen fayda sağlayacağı bazı açık yerler vardır:

  • Örneğin, resim yapma ve resim düzenleme web uygulamaları, tuvale uygulanan vuruşları veya efektleri değiştirmek için bu bilgileri kullanabilir. Fırçanın boyutunu değiştirmek için dokunma yarıçapını kullanabilir ve fırçanın tuvaldeki temas açısını değiştirmek için rotationAngle ile birlikte kullanabilirsiniz.
  • Gelişmiş hareket tanıma: rotationAngle değerini anlıyorsanız bir nesnenin dönmesi için tek parmak hareketi oluşturabilirsiniz.

Her cihaz bu özelliği destekliyor mu?

Hayır. Henüz çok yaygın değil. Nexus 10'unuz varsa aşağıdaki gibi bir ekran görürsünüz:

Dokunma açısı döndürme ekran görüntüsü

Resim için Rick Byers'a teşekkürler.

Bir cihaz, dokunmanın dönme açısını anlayamazsa rotationAngle 0 olur ve radiusX ile radiusY değerleri eşittir (ancak mevcut dokunma yüzeyi alanına bağlı olarak değişebilir).

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önme değerleri mevcutsa uygulamanızı, kullanıcıya daha yetenekli bir deneyim sunacak şekilde geliştirebilirsiniz. Her kullanıcının Wacom tableti yoktur ancak varsa birçok resim uygulaması bundan yararlanır.

İşaretçi etkinlikleri ne olacak?

Aslında bu, bu API'yi kullanan geliştiriciler için eksiksiz bir dokunma etkinliği API'sine sahip olmamızla ilgilidir. Soruyu nasıl biraz evirip çevirdiğimi görüyorsunuz... Ancak ciddi olarak, Blink'in PointerEvent uygulamasını takip etmek istiyorsanız 471824 numaralı soruna yıldız ekleyebilir ve Rick Byers'ın takip dokümanlarını okuyabilirsiniz.

İlgili Konular