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, webkitRotationAngle özelliğinin çalışan bir sürümünü kullanıma sundu. TouchEvent nesnesi. Artık Chrome 45'te (Temmuz 2015'te Beta sürümde), rotationAngle önekine sahip değil. proje yönetimi metodolojisi ile uygulamamızı TouchEvent Teknik Özellikler ve Firefox.

Bir süredir kullanılıyor olsa da, neyi neden yaptığınızı rotationAngle, dokunmayla ilgili daha ilginç bir kullanımın kapısını aralıyor özellikle mobil cihazlarda hareketler.

Teknik olarak dönüş açısının derece sayısı (0 ile 90 arasında) şeklinde tanımlanan temas alanı elipsi Touch.radiusX ve Touch.radiusY. Çok güzel, değil mi? (Yalnızca şu anda Chrome'un açık olduğunu Android, radiusX ve radiusY değerlerini 64 piksel olarak kilitlemez. Bunun yerine (ekranın kişi boyutuna göre değişir).

Peki bu ne anlama geliyor?

Bu özelliği, ürünün boyutunu, şeklini ve yönünü doğru şekilde kullanıcının parmağı ekran üzerinde. Kullanıcılar ekrana her zaman ucuyla dokunmazlar parmak ucuyla dokunmak yerine sık sık ekrana basabilirler. polise parmak izi alın. rotationAngle olmadan Dokunma hareketinin genişliği ve uzunluğu. rotationAngle sayesinde, 90 derece döndürme (0 dikey, 90 yatay) olsun. Neden sadece 90 derece mi? Yalnızca 90 dereceye ihtiyacınız vardır çünkü bu açıları geçtikçe radiusX ve radiusY, uyum sağlamak için değişecek.

Bununla ilgili bir başka güzel şey de kullanıcının parmağının temas alanının değişmesi. parmağının ekrandaki basınç derecesini değiştiriyorlar. Bu bir force yerine doğrudan kullanılabilir, ancak ışıklı fırçaları birbirinden ayırt edebilirsiniz daha küçük bir yüzey alanına sahip olacağından daha küçük bir yüzeye sahip olacaktır.

Nasıl kullanabilirim?

Öncelikle, bunu algılayabilecek bir cihaza ihtiyacınız vardır. Nexus 10 sorunsuz çalışır. CEVAP müşteriye doğrudan Rick Byers boyama örneği. Abartılmasın Ancak burada, tuval olmadan kullanabileceğiniz bir yöntem var.

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?

Bu yöntemin, bir müşterinin hemen işe yarayacağı kullanıcı:

  • Örneğin, boyama ve resim manipülasyonu web uygulamaları bunu kullanabilir fırçayı veya tuvale uygulanan efektleri değiştirmek için bilgi edinin. Yapabilecekleriniz fırçanın boyutunu değiştirmek için dokunma yarıçapını kullanın ve döndürme Açısı'nı kullanarak fırçanın zemin üzerindeki temas açısını değiştirin.
  • Gelişmiş hareket tanıma: Döndürme Açısını anlarsanız bir nesneyi döndürmek için tek parmakla yapılan bir hareket oluşturma.

Tüm cihazlar bu özelliği destekliyor mu?

Hayır. Henüz çok yaygın değildir. Nexus 10'unuz varsa aşağıdaki gibi bir şey görebilirsiniz,

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

Resimde Rick Byers'a atıfta bulunuyoruz.

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

Neden rahatsız ettiniz?

Güzel soru. Web'deki birçok özellik gibi bu da eklemeli bir deneyimdir.
. Dokunma etkinlikleri, desteklendiğinde ve yarıçap ile döndürme değerleri şu durumlarda çalışır: uygulamanızı geliştirerek kullanıcıya daha yetenekli bir kullanıcı deneyimi sahip olacaksınız. Her kullanıcının Wacom tableti olmasa da çok fazla resmi olduğunda bundan yararlanacaktır.

İşaretçi Etkinlikleri ne olacak?

Bu, tamamen ayrıntılı bir iletişim etkinliği düzenlememiz için Bunu kullanan geliştiriciler için API. Soruyu nasıl biraz atladığıma bakın... Daha fazla Blink'in PointerEvent'ini takip etmek isterseniz Sorun 471824 ve Rick Byers'ı okuyun takip belgesini inceleyin.

İlgili Konular