Korzystanie z kąta obrotu i promienia dotyku

Paul Kinlan

Względnie niewielka zmiana w interfejsie Touch API w Chrome miała miejsce w Chrome 39, w wyniku którego wprowadzono działającą wersję atrybutu webkitRotationAngle w obiekcie TouchEvent. Teraz w Chrome 45 (wersja beta w lipcu 2015 r.) nie ma prefiksu rotationAngle, dzięki czemu nasza implementacja jest bardziej zgodna ze specyfikacją TouchEvent i przeglądarką Firefox.

Istnieje już od jakiegoś czasu, ale warto wyjaśnić, czym jest rotationAngle, ponieważ pokazuje to ciekawsze zastosowanie gestów dotykowych, zwłaszcza na urządzeniach mobilnych.

Kąt obrotu to technicznie kąt obrotu to liczba stopni (między 0 a 90) elipsy obszaru kontaktowego określona przez Touch.radiusX i Touch.radiusY. Eee. Nieźle, co? (zauważyliśmy tylko, że Chrome na Androida nie blokuje wartości radiusX i radiusY do 64 pikseli, ale zmienia się w zależności od rozmiaru kontaktu na ekranie).

Co to tak naprawdę oznacza?

To raczej sposób na dokładne odzwierciedlenie rozmiaru, kształtu i orientacji palca użytkownika na ekranie. Użytkownicy nie zawsze dotykają ekranu stalówką, ale dość często naciskają ekran tak, jakby odcisnąć go policji. Bez rotationAngle można by w prosty sposób określić szerokość i wysokość gestu. rotationAngle oferuje 90 stopni obrotu (0 – pionowo, 90 stopni w poziomie). Dlaczego tylko 90 stopni? Potrzebujesz tylko 90 stopni, ponieważ radiusX i radiusY się zmienią, gdy zbliżysz się do tych kątów.

Kolejną fajną rzeczą jest to, że obszar styku palca użytkownika zmienia się w miarę stopnia nacisku palca na ekran. Nie jest to bezpośredni zamiennik urządzenia force, ale możesz odróżnić na ekranie pędzle doświetlające, ponieważ mają one powierzchnię mniejszą niż mocniejsze naciśnięcie.

Jak mogę z niej korzystać?

Po pierwsze potrzebujesz urządzenia, które może to wykryć. Nexus 10 będzie na nim działać. Świetnym przykładem jest skupienie się na przykładzie farby Ricka Byersa. Nie ma wątpliwości, że można z niej korzystać bez odbitki na płótnie.

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 wykorzystasz tę funkcję w praktyce?

Istnieją pewne miejsca, w których takie działanie może być bardzo korzystne dla użytkownika:

  • Na przykład aplikacje internetowe do malowania i manipulacji obrazami mogą wykorzystać te informacje do zmiany kresek lub efektów zastosowanych na obszarze roboczym. Możesz użyć promienia dotyku, aby zmienić rozmiar pędzla, i połączyć obrót, aby zmienić kąt styku pędzla po obszarze roboczym.
  • Ulepszone rozpoznawanie gestów: jeśli rozumiesz kąt obrotu, możesz wykonać gest 1 palcem i obrócić obiekt.

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

Nie. Jeszcze nie jest to bardzo rozpowszechnione. Jeśli masz Nexus 10, zobaczysz coś takiego:

Zrzut ekranu obracania kąta dotknięcia

Autor zdjęcia: Rick Byers.

Jeśli urządzenie nie rozumie kąta obrotu ekranu dotykowego, wartość rotationAngle wynosi 0, a wartości radiusX i radiusY są równe (ale mogą się różnić w zależności od obecnego obszaru dotykowego).

Po co to zamieszać?

Dobre pytanie. Podobnie jak wiele innych funkcji dostępnych w internecie, jest to dodatkowe doświadczenie.
Zdarzenia dotknięcia działają, gdy są obsługiwane. Jeśli dostępne są wartości promieni i obrotów, możesz ulepszyć aplikację, aby zwiększyć jej wygodę. Nie każdy użytkownik ma tablet Wacom, ale wiele aplikacji do malowania będzie z niego korzystać.

A co ze zdarzeniami wskaźnika?

Chodzi o to, aby stworzyć w pełni kompletny interfejs API zdarzeń dotykowych dla deweloperów, którzy go używają. Zobacz, jak udało mi się uniknąć pytania... Jeśli jednak chcesz śledzić implementację PointerEvent, możesz oznaczyć gwiazdką Problem 471824 i przeczytać dokument śledzenia Ricka Byersa.

Zobacz również