Korzystanie z kąta obrotu i promienia dotyku

Paul Kinlan

Wprowadzono stosunkowo niewielką zmianę w interfejsie Touch API w Chrome Chrome 39, wprowadziliśmy działającą wersję atrybutu webkitRotationAngle w Obiekt TouchEvent. Teraz w Chrome 45 (wersja beta z lipca 2015 roku) nie ma prefiksu rotationAngle, dzięki czemu możemy lepiej dopasować naszą implementację do TouchEvent Spec i Firefox.

Mimo że istnieje już od jakiegoś czasu, warto wyjaśnić, czym rotationAngle otwiera jeszcze ciekawsze zastosowanie dotyku. zwłaszcza na urządzeniach mobilnych.

Technicznie rzecz biorąc, kąt obrotu to liczba stopni (od 0 do 90) elipsa obszaru kontaktu zdefiniowana przez Touch.radiusX oraz Touch.radiusY. Super, prawda? (Warto zauważyć, że dowiedziałem się, że przeglądarka Chrome Android nie blokuje wartości radiusX i radiusY do 64 pikseli, ale zamiast tego zmienia się w zależności od rozmiaru kontaktu na ekranie).

Co to tak naprawdę oznacza?

To sposób na dokładne odzwierciedlenie rozmiaru, kształtu i orientacji palec użytkownika na ekranie. Użytkownicy nie zawsze dotykają ekranu za pomocą stalówki ale raczej często naciskaj ekran tak, jak daje się mu policja odcisk palca. Bez rotationAngle udałoby się uzyskać szerokości i wysokości gestu dotykowego. Dzięki rotationAngle możesz ustaw 90 stopni obrotu (0 to pionowa, a 90 pozioma). Tylko dlaczego 90 stopni? Wystarczy 90 stopni, ponieważ mijając te kąty radiusX i radiusY zostaną odpowiednio zmienione.

Inną ciekawą cechą jest to, że obszar styku palca użytkownika zmienia się, ponieważ zmieniają one stopień nacisku palca na ekran. To nie jest bezpośredni zamiennik słowa force, ale można odróżnić pędzle świetlne ponieważ mają mniejszą powierzchnię niż mocniejsze naciśnięcie.

Jak mogę z niego korzystać?

Po pierwsze potrzebujesz urządzenia, które to wykrywa. Najlepiej na Nexusie 10. O świetnym przykładem jest spojrzenie bezpośrednio Przykład malowania Ricka Byersa. Nie do pokonania ale można z niego korzystać bez 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żesz to wykorzystać w praktyce?

Istnieją oczywiste miejsca, w których może to natychmiast przynieść użytkownik:

  • Są to na przykład aplikacje internetowe do malowania i manipulacji obrazami umożliwiające zmianę kreski lub efektów na obszarze roboczym. Możesz za pomocą promienia dotykowego możesz zmienić rozmiar pędzla. kąt obrotu, aby zmieniać kąt kontaktu pędzla po obszarze roboczym.
  • Ulepszone rozpoznawanie gestów: jeśli znasz kąt obrotu, możesz i wykonaj gest 1 palcem, aby obiekt się obracał.

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

Nie. Nie jest to jeszcze zbyt powszechne rozwiązanie. Jeśli masz Nexus 10, zobaczysz coś takiego jak

Zrzut ekranu obrotu pod kątem kąta dotknięcia

Autor zdjęcia: Rick Byers.

Jeśli urządzenie nie rozpoznaje kąta obrotu dotykiem, rotationAngle będzie równa 0, a wartości radiusX i radiusY będą taki sam (ale może się różnić w zależności od bieżącego obszaru powierzchni dotykowego).

Po co się męczyć?

Dobre pytanie. Podobnie jak wiele innych funkcji w internecie, jest to proces uzupełniający.
Zdarzenia dotknięcia będą działać, jeśli są obsługiwane, a wartości promieni i obrotu są możesz rozszerzyć swoją aplikację, aby zapewnić użytkownikowi i uzyskiwanie dodatkowych informacji. Nie każdy użytkownik ma tablet Wacom, ale gdy na ekranie jest wiele obrazów, aplikacje będą z niego korzystać.

A co ze zdarzeniami wskaźnika?

Chodzi o to, aby stworzyć dopracowane zdarzenie dotykowe. API dla programistów, którzy z niego korzystają. Zobacz, jak udało mi się uniknąć pytania... Więcej Jeśli chcecie śledzić wydarzenie PointerEvent Blinka możesz oznaczyć gwiazdką problem 471824 i przeczytaj „Ricka Byersa” dokument śledzenia.

Zobacz również