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

Peker Kınan

Chrome 39'da, Chrome'daki Touch API'de yapılan nispeten küçük bir değişiklik, TouchEvent nesnesinde webkitRotationAngle özelliğinin çalışan bir sürümünü kullanıma sundu. Şu anda Chrome 45'te (Temmuz 2015'te Beta sürümü), rotationAngle olarak ön eklenerek uygulamamızın TouchEvent Spesifikasyonu ve Firefox'la daha uyumlu olmasını sağladı.

Bir süredir paylaşılmış olsa da rotationAngle ürününün ne olduğunu açıklamakta fayda var, çünkü özellikle mobil cihazlarda dokunma hareketlerinin daha ilgi çekici bir kullanımını ortaya çıkarıyor.

Teknik olarak, dönme açısı Touch.radiusX ve Touch.radiusY değerleriyle tanımlanan temas alanı elipsinin derece sayısıdır (0 ile 90 arasında). Hımm, çok güzel, değil mi? (Sadece Android'deki Chrome'un radiusX ve radiusY değerlerini 64 piksel için kilitlemediğini, bunun yerine ekranın kişi boyutuna göre değiştirdiğini öğrendiğimi dikkat etmek gerekir).

Peki bu tam olarak ne anlama geliyor?

Bu görünümü, kullanıcının parmağının boyutunu, şeklini ve yönünü ekranda doğru bir şekilde göstermenin bir yolu olarak düşünebilirsiniz. Kullanıcılar ekrana her zaman parmak ucuyla dokunmazlar, bunun yerine polise parmak izi verirler gibi sık sık ekrana basarlar. rotationAngle olmasaydı dokunma hareketinin ne kadar geniş ve uzun olduğunu kolayca görebilirdiniz. rotationAngle ile 90 derece (0 dikey, 90 yatay) dönersiniz. Neden sadece 90 derece? Yalnızca 90 dereceye ihtiyacınız vardır, çünkü bu açıları geçtiğinizde radiusX ve radiusY uygun şekilde değişir.

Bir başka güzel özellik de, kullanıcı parmağının ekrandaki basıncın derecesi değiştiğinden parmağının temas alanının değişmesidir. force cihazının doğrudan yerine geçen bir fırça değildir, ancak daha sert basana göre daha küçük bir yüzey alanına sahip oldukları için ekrandaki ışık fırçalarını birbirinden ayırt edebilirsiniz.

Bu verileri nasıl kullanabilirim?

Öncelikle bunu algılayabilecek bir cihaza ihtiyacınız vardır. Nexus 10 sorunsuz çalışır. Doğrudan Rick Byers resmi örneğine bakmak iyi bir örnektir. Sınırları aşmamak gerekiyor. Bununla birlikte, resmi tuval 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;

Uygulamada bunu nerede kullanırsınız?

Bunun kullanıcı için hemen faydalı olacağı bazı durumlar vardır:

  • Örneğin, boyama ve görüntü değiştirme web uygulamaları, tuvale uygulanan fırçayı 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 zemin üzerinde fırçanın temas açısını değiştirmek için döndürme Açısı'nı birleştirebilirsiniz.
  • Gelişmiş hareket tanıma: Döndürme Açısını anlarsanız bir nesneyi Döndürmek için tek parmakla bir hareket oluşturabilirsiniz.

Tüm cihazlar bunu destekliyor mu?

Hayır. Bu henüz çok yaygın bir durum değil. Nexus 10 cihazınız varsa aşağıdakine benzer bir şey görürsünüz.

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

Rick Byers'a resim kredisi.

Cihaz, dokunmanın dönüş açısını anlayamadığında rotationAngle 0 olur ve radiusX ile radiusY değerleri eşit olur (ancak geçerli dokunma yüzeyi alanına bağlı olarak değişebilir).

Neden uğraşayım?

Güzel soru. Web'deki birçok özellik gibi bu da eklemeli bir deneyimdir.
Dokunma etkinlikleri desteklendiğinde çalışır. Yarıçap ve döndürme değerleri varsa uygulamanızı, kullanıcıya daha yetenekli bir deneyim sunacak şekilde geliştirebilirsiniz. Her kullanıcının Wacom tableti yoktur, ancak mevcut olan birçok boya uygulaması bu tabletten yararlanır.

İşaretçi etkinlikleri ile ilgili durum nedir?

Buradaki amaç, ona güvenen geliştiricilere yönelik eksiksiz bir temas etkinliği API'miz olduğundan emin olmaktır. Şu sorudan nasıl biraz kaçındığıma bakın... Daha da önemlisi, Blink'in PointerEvent uygulamasını takip etmek isterseniz Sorun 471824'e yıldız verebilir ve Rick Byers'ın izleme dokümanını okuyabilirsiniz.

İlgili Konular