Een relatief kleine wijziging in de Touch API in Chrome belandde in Chrome 39 , waarmee een werkende versie van het webkitRotationAngle attribuut op het TouchEvent-object werd geïntroduceerd. Nu in Chrome 45 (bèta in juli 2015) heeft het geen voorvoegsel als rotationAngle , waardoor onze implementatie meer in lijn komt met de TouchEvent- specificatie en Firefox.
Hoewel het al een tijdje bestaat, is het de moeite waard om uit te leggen wat rotationAngle is, omdat het interessanter gebruik van aanraakbewegingen mogelijk maakt, vooral op mobiele apparaten.
Technisch gezien is de rotatiehoek het aantal graden (tussen 0 en 90) van de ellips van het contactgebied gedefinieerd door Touch.radiusX en Touch.radiusY . Err, cool, toch? (Opgemerkt moet worden dat ik er pas achter ben gekomen dat Chrome op Android de waarden radiusX en radiusY niet vergrendelt op 64px, maar in plaats daarvan varieert afhankelijk van de contactgrootte van het scherm).
Wat betekent het eigenlijk?
Zie het als een manier om de grootte, vorm en richting 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 regelmatig op het scherm alsof ze de politie een vingerafdruk geven. Zonder de rotationAngle zou je eenvoudig kunnen zien hoe breed en hoe hoog het aanraakgebaar was. Met de rotationAngle krijgt u een rotatie van 90 graden (0 is verticaal en 90 is horizontaal). Waarom slechts 90 graden? Je hebt alleen de 90 graden nodig, want als je voorbij die hoeken beweegt, zullen de radiusX en radiusY veranderen om tegemoet te komen.
Een ander leuk aspect hiervan is dat het contactgebied van de vinger van de gebruiker verandert naarmate de mate van druk van zijn vinger op het scherm varieert. Het is geen directe vervanging voor force , maar je kunt wel onderscheid maken tussen lichte borstels 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 rechtstreeks naar het verfvoorbeeld van Rick Byers te kijken. Om niet achter te blijven, 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 jij dit in de praktijk gebruiken?
Er zijn enkele voor de hand liggende plaatsen waar dit een onmiddellijk voordeel voor de gebruiker zou zijn:
- Webapps voor schilderen en beeldmanipulatie kunnen deze informatie bijvoorbeeld gebruiken om de streek of de effecten die op het canvas worden toegepast, te wijzigen. U kunt de aanraakradius gebruiken om de grootte van het penseel te wijzigen en u kunt de rotatiehoek combineren om de contacthoek van het penseel op het canvas te variëren.
- Verbeterde gebarenherkenning: als u de rotatiehoek begrijpt, kunt u een gebaar met één vinger maken om een object te laten draaien.
Ondersteunt elk apparaat dit?
Nee. Het is nog niet enorm gebruikelijk. Als u een Nexus 10 heeft, ziet u zoiets als het volgende:
Afbeeldingscredits voor Rick Byers .
Wanneer 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 moeite doen?
Goede vraag. Zoals veel functies op internet is dit een aanvullende ervaring.
Aanraakgebeurtenissen werken als ze worden ondersteund, en als de radii- en rotatiewaarden beschikbaar zijn, kunt u uw applicatie verbeteren om de gebruiker een betere ervaring te geven. Niet elke gebruiker heeft een Wacom-tablet, maar als deze aanwezig is, zullen veel schildertoepassingen hiervan profiteren.
Hoe zit het met Pointer-evenementen?
Dit gaat er eigenlijk alleen maar om ervoor te zorgen dat we een volledig uitgewerkte Touch Event-API hebben voor de ontwikkelaars die erop vertrouwen. Zie je hoe ik de vraag een beetje heb ontweken... Maar serieuzer: als je geïnteresseerd bent in het volgen van de PointerEvent-implementatie van Blink, kun je nummer 471824 een ster geven en het trackingdocument van Rick Byers lezen.