Für 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) hat das neue Präfix das Präfix rotationAngle. Dadurch können wir unsere Implementierung besser an die TouchEvent-Spezifikation und Firefox anpassen.
Sie ist zwar schon eine Weile im Geschäft, dennoch lohnt es sich, zu erklären, was rotationAngle ist, da dies eine interessantere Nutzung von Berührungsgesten ermöglicht, insbesondere auf Mobilgeräten.
Technisch gesehen ist der Drehwinkel die Anzahl der Grad (zwischen 0 und 90) der Ellipse der Kontaktfläche, die durch Touch.radiusX und Touch.radiusY definiert wird.
Äh, cool, oder? Ich habe nur festgestellt, dass Chrome unter Android die Werte radiusX und radiusY nicht auf 64 Pixel sperrt, sondern abhängig von der Kontaktgröße des Bildschirms variiert.
Was bedeutet das eigentlich?
Sie können sich so die Größe, Form und Ausrichtung des Fingers des Nutzers auf einem Bildschirm genau darstellen. Nutzer tippen nicht immer mit der Fingerspitze auf den Bildschirm, sondern drücken häufig auf den Bildschirm, als ob sie der Polizei einen Fingerabdruck geben würden. Ohne rotationAngle fährst du einfach
wie breit und hoch die Touch-Geste. Mit rotationAngle erhältst du eine Drehung um 90 Grad, wobei 0 für vertikal und 90 für horizontal steht. Warum nur
90 Grad? Sie benötigen nur die 90 Grad, da sich radiusX und radiusY entsprechend anpassen, wenn Sie über diese Winkel hinaus gehen.
Außerdem verändert sich der Kontaktbereich des Fingers, je nachdem, wie stark der Finger auf das Display drückt. Es ist kein direkter Ersatz für force, aber Sie können zwischen kleinen Pinseln auf dem Bildschirm unterscheiden, da sie eine kleinere Oberfläche haben als bei fester Betätigung.
Wie kann ich sie verwenden?
Als Erstes brauchen Sie ein Gerät, das dies erkennt. Ein Nexus 10 ist dafür ausreichend. Ein gutes Beispiel ist das Beispiel für Farbe von Rick Byers. Das sollte man nicht übertreffen, aber hier ist eine Möglichkeit, es ohne Leinwand 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 ein unmittelbarer Vorteil für den Nutzer wäre:
- Web-Apps für Malerei und Bildbearbeitung könnten anhand dieser Informationen beispielsweise die Kontur oder Effekte ändern, die auf den Canvas angewendet werden. Sie können den Berührungsradius verwenden, um die Größe des Pinsels zu ändern, und den Parameter "rotationAngle" kombinieren, um den Kontaktwinkel des Pinsels auf dem Canvas zu ändern.
- Verbesserte Bewegungserkennung: Wenn Sie den Parameter „rotationAngle“ verstehen, können Sie mit einer einzelnen Fingergeste ein Objekt drehen.
Unterstützt jedes Gerät dies?
Nein, das ist noch nicht sehr üblich. Wenn Sie ein Nexus 10 haben, sehen Sie in etwa Folgendes:
Bildnachweis für Rick Byers.
Wenn ein Gerät den Drehwinkel einer Berührung nicht erkennt, ist rotationAngle 0 und die Werte für radiusX und radiusY sind gleich, können aber je nach aktueller Touchoberfläche variieren.
Aber wen interessiert das schon?
Gute Frage. Wie viele andere Funktionen im Web ist dies eine Ergänzung.
Touch-Ereignisse funktionieren, wenn sie unterstützt werden. Wenn die Werte für Radien und Rotationen verfügbar sind, können Sie Ihre App verbessern, um die Nutzerfreundlichkeit zu verbessern. Nicht jeder Nutzer hat ein Wacom-Tablet, aber wenn es vorhanden ist, werden es viele Malanwendungen nutzen.
Was ist mit Zeigerereignissen?
Es geht einfach darum, eine ausgefeilte Touch-Event-API für die Entwickler zur Verfügung zu stellen, die darauf angewiesen sind. Sieh mal, wie ich der Frage ein bisschen ausweichen konnte... Wenn Sie die PointerEvent-Implementierung von Blink verfolgen möchten, können Sie das Problem 471824 markieren und das Tracking-Dokument von Rick Byers lesen.