Een relatief kleine wijziging in de Touch API in Chrome is geland in Chrome 39 , die een werkende versie van het webkitRotationAngle kenmerk introduceerde voor het TouchEvent-object. Nu in Chrome 45 (bètaversie in juli 2015) is het niet langer voorafgegaan door rotationAngle , waardoor onze implementatie beter aansluit bij de TouchEvent- specificatie en Firefox.
Hoewel het al een tijdje bestaat, is het de moeite waard om uit te leggen wat rotationAngle is. Het biedt namelijk interessante mogelijkheden voor het gebruik van aanraakgebaren, vooral op mobiele apparaten.
Technisch gezien is de rotatiehoek het aantal graden (tussen 0 en 90) van de ellips van het contactoppervlak, gedefinieerd door Touch.radiusX en Touch.radiusY . Eh, cool, toch? (Ik kwam er pas achter dat Chrome op Android de waarden voor radiusX en radiusY niet vastzet op 64 px, maar deze varieert afhankelijk van de contactgrootte van het scherm).
Wat betekent dit eigenlijk?
Zie het als een manier om de grootte, vorm en oriëntatie van de vinger van de gebruiker op een scherm nauwkeurig weer te geven. Gebruikers tikken niet altijd met de punt van hun vingertop op het scherm, maar drukken er regelmatig op alsof ze de politie een vingerafdruk geven. Zonder de rotationAngle zou je eenvoudigweg de breedte en hoogte van het aanraakgebaar kunnen bepalen. Met de rotationAngle krijg je een rotatie van 90 graden (0 is verticaal en 90 is horizontaal). Waarom slechts 90 graden? Je hebt alleen de 90 graden nodig, want naarmate je verder gaat dan die hoeken, veranderen de radiusX en radiusY mee.
Een ander voordeel hiervan is dat het contactoppervlak van de vinger van de gebruiker verandert naarmate de druk van de vinger op het scherm varieert. Het is geen directe vervanging voor force , maar je kunt wel onderscheid maken tussen lichte aanrakingen op het scherm omdat deze een kleiner oppervlak hebben dan een hardere druk.
Hoe kan ik het gebruiken?
Ten eerste heb je een apparaat nodig dat dit kan detecteren. Een Nexus 10 werkt prima. Een goed voorbeeld is om direct naar Rick Byers verfvoorbeeld te kijken. Om echter niet overtroffen te worden, is hier een manier om het zonder canvas te gebruiken.
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;
Waar zou je dit in de praktijk gebruiken?
Er zijn een aantal voor de hand liggende plekken waar dit een direct voordeel voor de gebruiker zou opleveren:
- Webapps voor schilderen en beeldmanipulatie kunnen deze informatie bijvoorbeeld gebruiken om de penseelstreek of effecten op het canvas aan te passen. Je kunt de aanraakradius gebruiken om de grootte van het penseel te wijzigen en de rotatiehoek combineren om de contacthoek van het penseel op het canvas te variëren.
- Verbeterde herkenning van gebaren: als u de rotatiehoek begrijpt, kunt u met één vingerbeweging een object laten draaien.
Ondersteunt elk apparaat dit?
Nee. Het komt nog niet heel vaak voor. Als je een Nexus 10 hebt, zie je zoiets als het volgende:
Foto: Rick Byers .
Als een apparaat de rotatiehoek van een aanraking niet kan begrijpen, is de rotationAngle 0 en zijn de waarden voor radiusX en radiusY gelijk (maar kunnen variëren afhankelijk van het huidige aanraakoppervlak).
Waarom zou ik de moeite nemen?
Goede vraag. Zoals veel functies op het web is dit een additieve ervaring.
Aanraakgebeurtenissen werken wanneer ze ondersteund worden. Als de radius- en rotatiewaarden beschikbaar zijn, kunt u uw applicatie verbeteren om de gebruiker een betere ervaring te bieden. Niet elke gebruiker heeft een Wacom-tablet, maar als deze aanwezig is, maken veel tekenprogramma's er gebruik van.
Hoe zit het met Pointer Events?
Dit gaat er eigenlijk alleen maar om ervoor te zorgen dat we een volledig uitgewerkte API voor touch-events hebben voor de ontwikkelaars die erop vertrouwen. Zie je hoe ik de vraag een beetje ontweek? Maar serieus, als je geïnteresseerd bent in het volgen van Blink's PointerEvent-implementatie, kun je Issue 471824 markeren en de trackingdoc van Rick Byers lezen.