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
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.