In Chrome 39 wurde eine relativ kleine Änderung an der Touch API in Chrome eingeführt. Dabei wurde eine funktionierende Version des Attributs webkitRotationAngle für das TouchEvent-Objekt eingeführt. In Chrome 45 (Beta im Juli 2015) wird es jetzt ohne Präfix als rotationAngle angezeigt. Damit entspricht unsere Implementierung der TouchEvent-Spezifikation und Firefox.
Obwohl es schon länger verfügbar ist, ist es sinnvoll, zu erklären, was rotationAngle ist, da sich damit insbesondere auf Mobilgeräten interessantere Touch-Gesten nutzen lassen.
Technisch gesehen ist der Drehwinkel die Anzahl der Grad (zwischen 0 und 90) der Ellipse der Berührungsfläche, die durch Touch.radiusX und Touch.radiusY definiert ist.
Cool, oder? (Ich habe erst später herausgefunden, dass Chrome unter Android die Werte radiusX und radiusY nicht auf 64 px festlegt, sondern sie je nach Kontaktgröße des Displays variiert.)
Was bedeutet das eigentlich?
Sie können damit Größe, Form und Ausrichtung des Fingers des Nutzers auf dem Display genau darstellen. Nutzer tippen nicht immer mit der Spitze ihres Fingers auf das Display, sondern drücken es häufig, als würden sie der Polizei einen Fingerabdruck geben. Ohne das rotationAngle würden Sie nur sehen, wie breit und hoch die Touch-Geste war. Mit der rotationAngle können Sie eine Drehung um 90 Grad vornehmen (0 Grad ist vertikal und 90 Grad horizontal). Warum nur 90 Grad? Sie benötigen nur die 90 Grad, da sich radiusX und radiusY entsprechend ändern, wenn Sie diese Winkel überschreiten.
Ein weiterer Vorteil ist, dass sich die Kontaktfläche des Fingers des Nutzers ändert, wenn er den Druck seines Fingers auf dem Display variiert. Es ist kein direkter Ersatz für force, aber Sie können zwischen leichten Pinselstrichen auf dem Display unterscheiden, da sie eine kleinere Oberfläche haben als bei stärkerem Drücken.
Wie kann ich sie nutzen?
Dazu benötigen Sie ein Gerät, das dies erkennen kann. Ein Nexus 10 ist dafür gut geeignet. Ein gutes Beispiel ist das Paint-Beispiel von Rick Byers. Hier ist 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 dies in der Praxis anwenden?
Es gibt einige offensichtliche Stellen, an denen dies für Nutzer einen unmittelbaren Vorteil bietet:
- Web-Apps zum Malen und Bearbeiten von Bildern können diese Informationen beispielsweise verwenden, um den Strich oder die Effekte zu ändern, die auf das Canvas angewendet werden. Mit dem Touch-Radius können Sie die Größe des Stifts ändern und mit dem Drehwinkel den Kontaktwinkel des Stifts auf dem Canvas variieren.
- Verbesserte Gestenerkennung: Wenn Sie den Drehwinkel kennen, können Sie mit einer einzelnen Fingerbewegung ein Objekt schwenken.
Wird das von allen Geräten unterstützt?
Nein. Es ist noch nicht sehr verbreitet. Wenn Sie ein Nexus 10 haben, sehen Sie ungefähr Folgendes:
Bildnachweis: Rick Byers
Wenn ein Gerät den Drehwinkel einer Berührung nicht erkennen kann, ist rotationAngle = 0 und die Werte radiusX und radiusY sind gleich (können aber je nach aktueller Touch-Oberfläche variieren).
Aber wen interessiert das schon?
Gute Frage. Wie viele Funktionen im Web ist auch diese eine zusätzliche Option.
Wenn Touch-Ereignisse unterstützt werden und die Werte für Radien und Drehung verfügbar sind, können Sie Ihre Anwendung optimieren, um Nutzern mehr Funktionen zu bieten. Nicht jeder Nutzer hat ein Wacom-Tablet, aber wenn es vorhanden ist, können viele Zeichenanwendungen davon profitieren.
Was ist mit Zeigerereignissen?
Es geht darum, dass wir eine umfassende Touch-Ereignis-API für die Entwickler haben, die sie benötigen. Sehen Sie, wie ich die Frage ein wenig umgangen habe… Wenn Sie mehr über die PointerEvent-Implementierung von Blink erfahren möchten, können Sie Issue 471824 mit einem Stern markieren und sich die Tracking-Anleitung von Rick Byers ansehen.