Eine relativ kleine Änderung an der Touch API in Chrome brachte
Chrome 39,
Es wurde eine funktionsfähige Version des Attributs webkitRotationAngle im
TouchEvent-Objekt. In Chrome 45 (Beta, im Juli 2015) ist rotationAngle ohne Präfix,
dass wir unsere Implementierung an die
TouchEvent
und Firefox.
Es gibt sie zwar schon eine Weile, aber es lohnt sich zu erklären,
rotationAngle bietet eine interessantere Nutzung der Berührung.
vor allem auf Mobilgeräten.
Technisch gesehen ist der Rotationswinkel die Gradzahl (zwischen 0 und 90) des
Kontaktbereichsellipse definiert durch
Touch.radiusX
und
Touch.radiusY:
Äh, cool, oder? Ich habe erst herausgefunden, dass Chrome
Android sperrt die Werte radiusX und radiusY nicht auf 64 px, sondern
variiert je nach Kontaktgröße des Bildschirms).
Was bedeutet das genau?
Betrachten Sie sie als eine Möglichkeit, die Größe, Form und Ausrichtung eines
den Finger der Nutzenden auf einem Bildschirm. Nutzende tippen nicht immer auf den Bildschirm mit der Spitze
drücken, aber häufig auf den Bildschirm drücken,
einen Fingerabdruck bei der Polizei. Ohne rotationAngle könnten Sie
wie breit und wie hoch die Touch-Geste war. Mit der rotationAngle können Sie
Drehung um 90 Grad (0 bedeutet vertikal und 90 für horizontal). Nur Warum
90 Grad? Sie brauchen nur die 90 Grad, denn wenn Sie über diese Winkel hinausgehen,
werden die radiusX und radiusY entsprechend angepasst.
Außerdem ändert sich der Kontaktbereich der Finger
da sie den Druck ihrer Finger auf das Display variieren. Es handelt sich nicht um
direkter Ersatz für force, du kannst aber zwischen leichten Pinseln unterscheiden
auf dem Bildschirm, da sie eine kleinere Oberfläche haben als ein festeres Drücken.
Wie kann ich sie verwenden?
Als Erstes brauchen Sie ein Gerät, das dies erkennen kann. Ein Nexus 10 ist hierfür geeignet. A ist ein gutes Beispiel dafür, Beispiel für eine Farbe von Rick Byers Nicht zu übertreffen 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 das in der Praxis einsetzen?
Es gibt einige offensichtliche Stellen, an denen dies für den Nutzer:
- Web-Apps für Malerei und Bildbearbeitung könnten diese um die Kontur oder die Effekte zu ändern, die auf den Canvas angewendet wurden. Sie könnten Mit dem Berührungsradius kannst du die Größe des Pinsels ändern. RotationAngle zum Anpassen des Kontaktwinkels des Pinsels auf der Zeichenfläche.
- Verbesserte Bewegungserkennung: Wenn du den Drehwinkel verstehst, kannst du mit nur einem Finger ein Objekt drehen.
Unterstützt jedes Gerät dies?
Nein. Das kommt noch nicht sehr häufig vor. Wenn Sie ein Nexus 10 haben, etwa Folgendes sehen:
Bildnachweis für Rick Byers.
Wenn ein Gerät den Drehwinkel einer Berührung nicht erkennt,
rotationAngle ist 0 und die Werte radiusX und radiusY sind
gleich, kann jedoch je nach aktueller Touchoberfläche variieren.
Aber wen interessiert das schon?
Gute Frage. Wie viele andere Funktionen im Web ist auch dies eine Ergänzung.
Berührungsereignisse funktionieren, wenn sie unterstützt werden und die Radien- und Rotationswerte
können Sie Ihre Anwendung optimieren, um dem Nutzer
Nutzererfahrung. Nicht alle Nutzenden haben ein Wacom-Tablet, aber wenn sie viele Gemälde präsentieren,
und Anwendungen davon profitieren.
Was ist mit Zeigerereignissen?
Es geht um ein vollständig ausgearbeitetes Touch-Event. API für die Entwickler, die auf sie angewiesen sind. Sieh mal, wie ich der Frage ein bisschen ausgeweicht habe... Mehr Wenn ihr am PointerEvent von Blink teilnehmen möchtet, können Sie das Problem 471824 markieren und Lesen Sie Rick Byers' Tracking-Dokument.