In Chrome 39 wurde eine relativ kleine Änderung an der Touch API in Chrome vorgenommen, mit der eine funktionierende Version des Attributs webkitRotationAngle für das TouchEvent-Objekt eingeführt wurde. In Chrome 45 (Beta im Juli 2015) wird es jetzt ohne Präfix als rotationAngle verwendet, wodurch unsere Implementierung besser mit der TouchEvent-Spezifikation und Firefox übereinstimmt.
Obwohl es rotationAngle schon eine Weile gibt, lohnt es sich, zu erklären, was es ist, da es einige interessante Verwendungsmöglichkeiten von Touch-Gesten, insbesondere auf Mobilgeräten, ermöglicht.
Technisch gesehen ist der Rotationswinkel die Anzahl der Grad (zwischen 0 und 90) der Ellipse des Kontaktbereichs, die durch Touch.radiusX und Touch.radiusY definiert wird.
Äh, cool, oder? (Ich habe erst später herausgefunden, dass Chrome unter Android die Werte radiusX und radiusY nicht auf 64 Pixel festlegt, sondern sie je nach Kontaktgröße des Bildschirms variiert.)
Was bedeutet das eigentlich?
Sie können sich das als eine Möglichkeit vorstellen, die Größe, Form und Ausrichtung des Fingers des Nutzers auf einem Bildschirm genau darzustellen. Nutzer tippen nicht immer mit der Fingerspitze auf das Display, sondern drücken häufig so darauf, als würden sie der Polizei einen Fingerabdruck geben. Ohne rotationAngle würden Sie nur die Breite und Höhe der Berührungsgeste erhalten. Mit dem rotationAngle kannst du das Gerät um 90 Grad drehen (0 Grad ist vertikal und 90 Grad horizontal). Warum nur 90 Grad? Sie benötigen nur die 90 Grad, da sich die radiusX- und radiusY-Werte ändern, wenn Sie sich über diese Winkel hinaus bewegen.
Ein weiterer Vorteil ist, dass sich die Kontaktfläche des Fingers des Nutzers ändert, wenn er den Druck des Fingers auf den Bildschirm variiert. Es ist kein direkter Ersatz für force, aber du kannst zwischen leichten Berührungen des Displays unterscheiden, da sie eine kleinere Oberfläche haben als ein stärkeres Drücken.
Wie kann ich sie nutzen?
Zuerst benötigst du ein Gerät, das dies erkennen kann. Ein Nexus 10 funktioniert einwandfrei. Ein gutes Beispiel ist das Paint-Beispiel von Rick Byers. Es gibt aber auch eine Möglichkeit, es 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 verwenden?
Es gibt einige offensichtliche Bereiche, in denen dies für den Nutzer von unmittelbarem Vorteil wäre:
- Web-Apps für Malerei und Bildbearbeitung könnten diese Informationen beispielsweise verwenden, um den Strich oder die Effekte zu ändern, die auf die Leinwand angewendet werden. Mit dem Berührungsradius können Sie die Größe des Pinsels ändern und mit dem Drehwinkel den Kontaktwinkel des Pinsels auf der Leinwand variieren.
- Verbesserte Gestenerkennung: Wenn Sie den rotationAngle verstehen, können Sie eine Touchgeste mit einem Finger erstellen, um ein Objekt zu drehen.
Wird diese Funktion von jedem Gerät unterstützt?
Nein, noch nicht sehr häufig. Wenn Sie ein Nexus 10 haben, sehen Sie etwas Ähnliches wie das Folgende:
Bildnachweis: Rick Byers.
Wenn ein Gerät den Drehwinkel einer Berührung nicht erkennen kann, ist rotationAngle gleich 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 auch diese eine zusätzliche Funktion.
Touch-Events funktionieren, wenn sie unterstützt werden. Wenn die Werte für Radius und Drehung verfügbar sind, können Sie Ihre Anwendung so optimieren, dass sie für den Nutzer noch besser funktioniert. Nicht jeder Nutzer hat ein Wacom-Tablet, aber wenn eines vorhanden ist, wird es von vielen Zeichenanwendungen genutzt.
Was ist mit Zeigerereignissen?
Es geht wirklich nur darum, dass wir eine vollständig ausgearbeitete Touch-Event-API für die Entwickler haben, die darauf angewiesen sind. Sehen Sie, wie ich der Frage ein wenig ausgewichen bin… Wenn Sie die PointerEvent-Implementierung von Blink verfolgen möchten, können Sie Problem 471824 mit einem Sternchen markieren und das Tracking-Dokument von Rick Byers lesen.