W Chrome 39 wprowadziliśmy stosunkowo niewielką zmianę w interfejsie Touch API, która dodała działającą wersję atrybutu webkitRotationAngle do obiektu TouchEvent. W Chrome 45 (wersja beta w lipcu 2015 r.) nie ma już prefiksu rotationAngle, dzięki czemu nasza implementacja jest bardziej zgodna ze specyfikacją TouchEvent i Firefoksem.
Chociaż jest już od jakiegoś czasu, warto wyjaśnić, czym jest rotationAngle, ponieważ otwiera on kilka ciekawszych zastosowań gestów dotykowych, zwłaszcza na urządzeniach mobilnych.
Technicznie kąt obrotu to liczba stopni (od 0 do 90) elipsy obszaru kontaktu określonej przez Touch.radiusX i Touch.radiusY.
Fajnie, prawda? (Warto zauważyć, że dopiero niedawno dowiedziałem się, że Chrome na Androidzie nie blokuje wartości radiusX i radiusY na poziomie 64 pikseli, ale zmienia je w zależności od rozmiaru ekranu).
Co to tak naprawdę oznacza?
Można to traktować jako sposób na dokładne odzwierciedlenie rozmiaru, kształtu i orientacji palca użytkownika na ekranie. Użytkownicy nie zawsze dotykają ekranu czubkiem palca, ale często naciskają go tak, jakby zostawiali odcisk palca na policji. Bez rotationAngle otrzymasz tylko informacje o szerokości i wysokości gestu dotykowego. W przypadku rotationAngle masz do dyspozycji 90 stopni obrotu (0 oznacza orientację pionową, a 90 – poziomą). Dlaczego tylko 90 stopni? Wystarczy 90 stopni, ponieważ po przekroczeniu tych kątów radiusX i radiusY odpowiednio się zmienią.
Inną ciekawą rzeczą jest to, że obszar kontaktu palca użytkownika zmienia się, gdy zmienia się stopień nacisku palca na ekran. Nie jest to bezpośredni zamiennik funkcji force, ale możesz odróżnić lekkie dotknięcia ekranu, ponieważ będą miały mniejszą powierzchnię niż mocniejsze naciśnięcie.
Jak mogę z niego korzystać?
Po pierwsze, potrzebujesz urządzenia, które może to wykryć. Nexus 10 będzie działać prawidłowo. Świetnym przykładem jest przykład Ricka Byersa dotyczący renderowania. Można jednak użyć go bez elementu canvas.
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;
Gdzie można to wykorzystać w praktyce?
Jest kilka oczywistych miejsc, w których przyniosłoby to natychmiastowe korzyści użytkownikowi:
- Aplikacje internetowe do malowania i modyfikowania obrazów mogą na przykład wykorzystywać te informacje do zmiany pociągnięcia lub efektów stosowanych na płótnie. Możesz użyć promienia dotyku, aby zmienić rozmiar pędzla, i połączyć go z kątem obrotu, aby zmienić kąt kontaktu pędzla z płótnem.
- Ulepszone rozpoznawanie gestów: jeśli rozumiesz, jak działa rotationAngle, możesz utworzyć gest z użyciem jednego palca, który będzie powodować obracanie obiektu.
Czy każde urządzenie obsługuje tę funkcję?
Nie. Nie jest to jeszcze zbyt powszechne. Jeśli masz Nexusa 10, zobaczysz coś takiego:
Autor zdjęcia: Rick Byers.
Jeśli urządzenie nie może określić kąta obrotu dotknięcia, wartość rotationAngle będzie wynosić 0, a wartości radiusX i radiusY będą równe (ale mogą się różnić w zależności od bieżącego obszaru powierzchni dotykowej).
Dlaczego warto zdecydować się na taki krok?
Dobre pytanie. Podobnie jak wiele funkcji w internecie, jest to funkcja dodatkowa.
Zdarzenia dotknięcia będą działać, gdy będą obsługiwane, a jeśli wartości promienia i obrotu są dostępne, możesz ulepszyć aplikację, aby zapewnić użytkownikowi lepsze wrażenia. Nie każdy użytkownik ma tablet Wacom, ale jeśli jest on dostępny, wiele aplikacji do malowania będzie z niego korzystać.
A co ze zdarzeniami wskaźnika?
Chodzi o to, aby deweloperzy, którzy korzystają z interfejsu API zdarzeń dotknięcia, mieli do dyspozycji jego w pełni rozwiniętą wersję. Zobacz, jak udało mi się uniknąć odpowiedzi na pytanie… Jeśli chcesz śledzić implementację PointerEvent w Blinku, możesz dodać gwiazdkę do problemu 471824 i zapoznać się z dokumentem Ricka Byersa.