Korzystanie z kąta obrotu i promienia dotyku

Paul Kinlan

W Chrome 39 wprowadzono stosunkowo niewielką zmianę interfejsu Touch API w Chrome, która wprowadziła działającą wersję atrybutu webkitRotationAngle w obiekcie TouchEvent. W Chrome 45 (beta w lipcu 2015 r.) nie ma już przedrostka i ma postać rotationAngle, co sprawia, że nasza implementacja jest bardziej zgodna ze specyfikacją TouchEvent i z Firefox.

Chociaż rotationAngle istnieje już od jakiegoś czasu, warto wyjaśnić, czym jest, ponieważ pozwala na bardziej interesujące wykorzystanie gestów dotykowych, zwłaszcza na urządzeniach mobilnych.

Technicznie rzecz biorąc, kąt obrotu to liczba stopni (od 0 do 90) elipsy obszaru dotykowego zdefiniowanej przez Touch.radiusX i Touch.radiusY. Okej. (Należy pamiętać, że Chrome na Androidzie nie blokuje wartości radiusX i radiusY na 64 piksele, ale zmienia je w zależności od rozmiaru ekranu).

Co to tak naprawdę oznacza?

Możesz potraktować to jako sposób na dokładne odwzorowanie rozmiaru, kształtu i orientacji palca użytkownika na ekranie. Użytkownicy nie zawsze dotykają ekranu czubkiem palca, ale często naciskają ekran tak, jakby dawali policji odcisk palca. Bez rotationAngle zobaczysz tylko, jak szeroki i wysoki był gest dotykowy. Dzięki rotationAngle możesz obrócić obiekt o 90 stopni (0 to pion, a 90 to poziom). Dlaczego tylko 90 stopni? Wystarczy 90 stopni, ponieważ po przekroczeniu tego kąta wartości radiusX i radiusY zmienią się, aby dostosować się do nowych warunków.

Kolejną fajną rzeczą jest to, że obszar styku palca użytkownika zmienia się w zależności od stopnia nacisku palca na ekran. Nie jest to bezpośredni zamiennik force, ale możesz odróżnić lekkie pociągnięcia na ekranie, ponieważ mają mniejszą powierzchnię niż mocniejsze naciśnięcie.

Jak z niego korzystać?

Po pierwsze, musisz mieć urządzenie, które może to wykryć. Nexus 10 będzie odpowiedni. Świetnym przykładem jest przykład farbowania Ricka Byersa. Oto sposób na użycie go bez korzystania z płótna.

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 tego użyć w praktyce?

Są oczywiste miejsca, w których takie rozwiązanie przyniosłoby użytkownikom natychmiastowe korzyści:

  • Aplikacje internetowe do malowania i edycji obrazów mogą na przykład używać tych informacji do zmiany obrysu lub efektów zastosowanych do obrazu. Możesz użyć promienia dotyku, aby zmienić rozmiar pędzla, a z użyciem kąta obrotu możesz zmienić kąt styku pędzla z płótnem.
  • Ulepszone rozpoznawanie gestów: jeśli znasz kąt obrotu, możesz wykonać gest jednym palcem, aby obracać obiekt.

Czy każde urządzenie obsługuje tę funkcję?

Nie. Nie jest to jeszcze bardzo popularne. Jeśli masz urządzenie Nexus 10, zobaczysz coś podobnego do tego:

Zrzut ekranu z ustawieniami kąta dotyku

Autor zdjęcia: Rick Byers.

Gdy urządzenie nie może określić kąta obrotu dotyku, wartość rotationAngle będzie równa 0, a wartości radiusX i radiusY będą równe (ale mogą się różnić w zależności od bieżącej powierzchni dotykowej).

Po co się trudzić?

Dobre pytanie. Podobnie jak wiele innych funkcji w internecie, ta funkcja jest dodatkowa.
Zdarzenia dotykowe będą działać, jeśli są obsługiwane. Jeśli wartości promieni i obrotu są dostępne, możesz ulepszyć aplikację, aby zapewnić użytkownikom lepsze wrażenia. Nie każdy użytkownik ma tablet Wacom, ale wiele aplikacji do tworzenia grafiki korzysta z niego.

A co z zdarzeniami związanymi z wskaźnikiem?

Chodzi tylko o to, aby zapewnić deweloperom pełny interfejs API zdarzeń dotykowych. Widzisz, jak unikam odpowiedzi na to pytanie? Jeśli jednak chcesz dowiedzieć się więcej o wdrożeniu zdarzenia PointerEvent w Blink, możesz oznaczyć jako ulubiony artykuł 471824 i przeczytać dokument Ricka Byersa na temat śledzenia.

Zobacz też