rotationAngle en touchRadius gebruiken

Paul Kinlan

In Chrome 39 is een relatief kleine wijziging in de Touch API in Chrome doorgevoerd. Hierbij is een werkende versie van het kenmerk webkitRotationAngle geïntroduceerd in het TouchEvent-object. In Chrome 45 (bèta in juli 2015) is het voorvoegsel verwijderd en is het rotationAngle. Hierdoor komt onze implementatie meer overeen 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 een aantal interessantere toepassingen van aanraakgebaren mogelijk maakt, vooral op mobiele apparaten.

Technisch gezien is de rotatiehoek het aantal graden (tussen 0 en 90) van de ellips van het contactgebied dat wordt gedefinieerd door Touch.radiusX en Touch.radiusY. Cool, toch? (Ik kwam er pas achter dat Chrome op Android de waarden radiusX en radiusY niet vergrendelt op 64 px, maar deze varieert afhankelijk van het contactformaat van het scherm.)

Wat betekent dit?

Beschouw 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 het topje van hun vinger op het scherm, maar drukken vaak op het scherm alsof ze een vingerafdruk geven. Zonder de rotationAngle zou je alleen de breedte en hoogte van het aanraakgebaar krijgen. Met de rotationAngle kun je 90 graden draaien (0 is verticaal en 90 is horizontaal). Waarom maar 90 graden? Je hebt alleen de 90 graden nodig, want als je voorbij die hoeken beweegt, veranderen de radiusX en radiusY om zich aan te passen.

Een ander leuk aspect hiervan is dat het contactgebied van de vinger van de gebruiker verandert als deze de mate van druk van de vinger op het scherm varieert. Het is geen directe vervanging voor force, maar je kunt onderscheid maken tussen lichte aanrakingen op het scherm omdat deze een kleiner oppervlak hebben dan een hardere druk.

Hoe kan ik het gebruiken?

Je hebt een apparaat nodig dat dit kan waarnemen. Een Nexus 10 werkt prima. Een goed voorbeeld is het voorbeeld van Rick Byers. Maar er is ook 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 plaatsen waar dit een onmiddellijk voordeel voor de gebruiker zou zijn:

  • Web-apps voor schilderen en beeldmanipulatie kunnen deze informatie bijvoorbeeld gebruiken om de streek of effecten die op het canvas worden toegepast te wijzigen. Je kunt de aanraakradius gebruiken om de grootte van de kwast te wijzigen en je kunt de rotatiehoek combineren om de contacthoek van de kwast op het canvas te variëren.
  • Verbeterde gebarenherkenning: Als je de rotationAngle begrijpt, kun je een gebaar met één vinger maken om een object te laten draaien.

Ondersteunt elk apparaat dit?

Nee. Het is nog niet heel gebruikelijk. Als je een Nexus 10 hebt, zie je iets als het volgende:

Screenshot van rotatie van aanraakhoek

Bronvermelding van de afbeelding: Rick Byers.

Als een apparaat de rotatiehoek van een aanraking niet kan begrijpen, is de rotationAngle 0 en zijn de waarden radiusX en radiusY gelijk (maar kunnen ze variëren afhankelijk van het huidige aanraakoppervlak).

Waarom een trailer?

Goede vraag. Zoals veel functies op het web is dit een aanvullende functionaliteit.
Aanraakgebeurtenissen werken als ze worden ondersteund. Als de waarden voor straal en rotatie beschikbaar zijn, kun je je app verbeteren om de gebruiker een betere functionaliteit te bieden. Niet elke gebruiker heeft een Wacom-tablet, maar als deze aanwezig is, maken veel schilder-apps er gebruik van.

Hoe zit het met aanwijzergebeurtenissen?

Het gaat erom dat we een volledig uitgewerkte API voor aanraakgebeurtenissen hebben voor de ontwikkelaars die deze gebruiken. Zie je hoe ik de vraag een beetje ontweek... Maar even serieus: als je de implementatie van PointerEvent in Blink wilt volgen, kun je een ster geven aan probleem 471824 en het trackingdocument van Rick Byers lezen.

Zie ook