Signatur
Beschreibung
Die schreibgeschützte Eigenschaft rotationAngle eines Touch-Objekts gibt an, um wie viele Grad die Ellipse gedreht ist, die die Kontaktfläche des Fingers oder Stifts auf dem Bildschirm annähert. Gemeinsam mit radiusX und radiusY beschreibt sie Form und Ausrichtung dieser Fläche.
Laut Spezifikation liegt der Wert im Bereich 0 bis unter 90 Grad und wird im Uhrzeigersinn gemessen. Weil eine Ellipse punktsymmetrisch ist, reicht dieser Bereich aus: Größere Drehungen lassen sich durch Vertauschen von radiusX und radiusY ausdrücken.
Einsetzen lässt sich die Eigenschaft z. B. in Zeichen-Apps (Pinselform passend zur Fingerauflage), zur Visualisierung von Berührungen oder für Heuristiken wie „Daumen oder Fingerspitze?“. Man liest sie in Handlern für touchstart, touchmove und touchend aus den Listen event.touches, event.changedTouches oder event.targetTouches aus.
Beispiele
Drehwinkel bei touchstart protokollieren
const area = document.querySelector('#touch-area');
area.addEventListener('touchstart', (event) => {
for (const touch of event.changedTouches) {
console.log(
`Touch ${touch.identifier}: ${touch.radiusX.toFixed(1)} × ${touch.radiusY.toFixed(1)} px, ` +
`Winkel ${touch.rotationAngle.toFixed(1)}°`
);
}
}, { passive: true });Kontaktellipse als Element sichtbar machen
const markers = new Map();
const updateMarker = (touch) => {
let el = markers.get(touch.identifier);
if (!el) {
el = document.createElement('div');
el.className = 'touch-marker'; // Stil per CSS: position:absolute; border-radius:50%
document.body.append(el);
markers.set(touch.identifier, el);
}
// Fallback, falls das Gerät keine Radien liefert
const rx = touch.radiusX || 20;
const ry = touch.radiusY || 20;
el.style.width = `${rx * 2}px`;
el.style.height = `${ry * 2}px`;
el.style.left = `${touch.pageX - rx}px`;
el.style.top = `${touch.pageY - ry}px`;
el.style.transform = `rotate(${touch.rotationAngle}deg)`;
};
const removeMarker = (touch) => {
markers.get(touch.identifier)?.remove();
markers.delete(touch.identifier);
};
document.addEventListener('touchstart', (e) => [...e.changedTouches].forEach(updateMarker), { passive: true });
document.addEventListener('touchmove', (e) => [...e.changedTouches].forEach(updateMarker), { passive: true });
document.addEventListener('touchend', (e) => [...e.changedTouches].forEach(removeMarker));
document.addEventListener('touchcancel', (e) => [...e.changedTouches].forEach(removeMarker));Auf Unterstützung prüfen
const supportsRotation = typeof Touch !== 'undefined' && 'rotationAngle' in Touch.prototype;
console.log(supportsRotation ? 'rotationAngle verfügbar' : 'rotationAngle nicht verfügbar');// Wichtig · Fallstricke
- Hardwareabhängig: Viele Geräte und Treiber melden keine Ausrichtung. Dann ist der Wert dauerhaft
0. Ein Wert von0heißt also nicht zwingend, dass die Ellipse wirklich nicht gedreht ist. - Wertebereich: Einige ältere Implementierungen haben Werte außerhalb von 0–90° geliefert. Wer den Wert weiterverarbeitet, sollte ihn z. B. mit
((angle % 90) + 90) % 90normalisieren. - Präfixe: Ältere WebKit-/Blink-Versionen kannten nur
webkitRotationAngle. Auf Desktop-Browsern ohne Touch-Unterstützung gibt es das InterfaceTouchunter Umständen gar nicht. - Alternative: Die Pointer Events API (
PointerEvent.twist,width,height) ist geräteübergreifend besser unterstützt und für neue Projekte meist die bessere Wahl. - Die Eigenschaft ist schreibgeschützt. Eigene Werte lassen sich nur beim Erzeugen per
new Touch({ ..., rotationAngle })setzen, zum Beispiel für Tests.