In Chrome 39 wurde eine relativ kleine Änderung an der Touch API vorgenommen, mit der eine funktionierende Version des Attributs webkitRotationAngle im TouchEvent-Objekt eingeführt wurde. In Chrome 45 (Beta im Juli 2015) ist es jetzt ohne Präfix als rotationAngle verfügbar. Damit entspricht unsere Implementierung besser der TouchEvent-Spezifikation und Firefox.
Obwohl es schon eine Weile existiert, ist es sinnvoll zu erklären, was rotationAngle ist, da es einige interessante Möglichkeiten für die Verwendung von Touch-Gesten, insbesondere auf Mobilgeräten, eröffnet.
Der Drehwinkel ist die Anzahl der Grad (zwischen 0 und 90) der Ellipse des Kontaktbereichs, die durch Touch.radiusX und Touch.radiusY definiert wird.
Ähm, cool, oder? (Ich habe erst jetzt herausgefunden, dass Chrome unter Android die Werte radiusX und radiusY nicht auf 64 px festlegt, sondern sie je nach Kontaktgröße des Bildschirms variiert.)
Was bedeutet das eigentlich?
Damit lässt sich die Größe, Form und Ausrichtung des Fingers des Nutzers auf einem Bildschirm genau darstellen. Nutzer tippen nicht immer mit der Spitze ihres Fingers auf das Display, sondern drücken häufig mit dem ganzen Finger auf das Display, als würden sie der Polizei einen Fingerabdruck geben. Ohne rotationAngle würden Sie einfach die Breite und Höhe der Touch-Geste erhalten. Mit dem rotationAngle erhalten Sie eine Drehung um 90 Grad (0 ist vertikal und 90 ist horizontal). Warum nur 90 Grad? Sie benötigen nur die 90 Grad, da sich radiusX und radiusY anpassen, wenn Sie diese Winkel überschreiten.
Ein weiterer Vorteil ist, dass sich die Kontaktfläche des Fingers des Nutzers ändert, wenn er den Druck auf das Display variiert. Es ist kein direkter Ersatz für force, aber Sie können zwischen leichten Berührungen auf dem Display unterscheiden, da sie eine kleinere Oberfläche haben als ein fester Druck.
Wie kann ich sie nutzen?
Zuerst benötigen Sie ein Gerät, das dies erkennen kann. Ein Nexus 10 funktioniert einwandfrei. Ein gutes Beispiel ist das Beispiel für die Malerei von Rick Byers. Hier ist eine Möglichkeit, das Tool ohne Canvas zu verwenden:
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;
Wo würden Sie das in der Praxis einsetzen?
Es gibt einige offensichtliche Bereiche, in denen dies dem Nutzer sofort zugutekommen würde:
- Web-Apps für Malerei und Bildbearbeitung könnten diese Informationen beispielsweise verwenden, um den Strich oder die auf die Leinwand angewendeten Effekte zu ändern. Sie können den Berührungsradius verwenden, um die Größe des Pinsels zu ändern, und ihn mit dem „rotationAngle“ kombinieren, um den Kontaktwinkel des Pinsels auf der Leinwand zu variieren.
- Verbesserte Gestenerkennung: Wenn Sie den „rotationAngle“ kennen, können Sie mit einer Ein-Finger-Geste ein Objekt drehen.
Wird das von jedem Gerät unterstützt?
Nein. Es ist noch nicht sehr verbreitet. Wenn Sie ein Nexus 10 haben, sehen Sie etwa Folgendes:
Bildnachweis: Rick Byers.
Wenn ein Gerät den Drehwinkel einer Berührung nicht erkennen kann, ist rotationAngle = 0 und die Werte für radiusX und radiusY sind gleich (können aber je nach aktueller Berührungsfläche variieren).
Aber wen interessiert das schon?
Gute Frage. Wie viele Funktionen im Web ist dies eine zusätzliche Funktion.
Touch-Ereignisse funktionieren, sofern sie unterstützt werden. Wenn die Radius- und Rotationswerte verfügbar sind, können Sie Ihre Anwendung so optimieren, dass sie dem Nutzer eine bessere Erfahrung bietet. Nicht jeder Nutzer hat ein Wacom-Tablet, aber wenn es vorhanden ist, nutzen viele Malanwendungen es.
Was ist mit Pointer Events?
Es geht nur darum, dass wir eine vollständig ausgearbeitete Touch-Ereignis-API für die Entwickler haben, die darauf angewiesen sind. Siehst du, wie ich der Frage ein wenig ausgewichen bin? Wenn Sie sich für die PointerEvent-Implementierung von Blink interessieren, können Sie Problem 471824 markieren und das Tracking-Dokument von Rick Byers lesen.