Signatur
Beschreibung
Die schreibgeschützte Eigenschaft azimuthAngle eines Touch-Objekts gibt den Azimutwinkel des Eingabegeräts (Transducer), etwa eines Stifts, in Radiant an. Der Wert liegt im Bereich 0 bis 2π. Bei 0 zeigt das hintere Ende des Stifts in Richtung wachsender X-Werte, bei π/2 in Richtung wachsender Y-Werte (nach unten). Der Winkel dreht sich im Uhrzeigersinn.
Zusammen mit Touch.altitudeAngle (Neigung gegenüber der Bildschirmoberfläche) lässt sich die Ausrichtung des Stifts im Raum vollständig beschreiben. Das braucht man vor allem für Zeichen- und Handschrift-Apps: Pinselspitzen, Schattierungen oder kalligrafische Striche können dann je nach Stiftneigung anders aussehen.
Die Eigenschaft ist nur dann aussagekräftig, wenn Touch.touchType den Wert "stylus" hat. Bei Fingereingaben ("direct") oder auf Geräten, die den Winkel nicht erkennen, ist der Wert 0.
Rückgabewert
0 bis 2π. 0, wenn das Gerät den Wert nicht liefert. In nicht unterstützenden Browsern ist die Eigenschaft undefined.Beispiele
Stiftausrichtung beim Zeichnen auslesen
const canvas = document.querySelector('#zeichenflaeche');
canvas.addEventListener('touchmove', (event) => {
event.preventDefault(); // Scrollen verhindern
for (const touch of event.changedTouches) {
if (touch.touchType !== 'stylus') continue;
const grad = (touch.azimuthAngle * 180 / Math.PI).toFixed(1);
console.log(`Azimut: ${grad}°, Höhe: ${touch.altitudeAngle.toFixed(2)} rad`);
}
}, { passive: false });Kalligrafie-Pinsel: Strichbreite abhängig von der Stiftrichtung
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
let letzter = null;
canvas.addEventListener('touchstart', (e) => {
const t = e.touches[0];
letzter = { x: t.clientX, y: t.clientY };
});
canvas.addEventListener('touchmove', (e) => {
e.preventDefault();
const t = e.touches[0];
const azimut = t.azimuthAngle ?? 0;
// Breite Feder bei 45°: Strich wird breit, wenn Bewegungsrichtung quer zur Stiftrichtung steht
const bewegung = Math.atan2(t.clientY - letzter.y, t.clientX - letzter.x);
const breite = 2 + 10 * Math.abs(Math.sin(bewegung - azimut));
ctx.lineWidth = breite;
ctx.lineCap = 'round';
ctx.beginPath();
ctx.moveTo(letzter.x, letzter.y);
ctx.lineTo(t.clientX, t.clientY);
ctx.stroke();
letzter = { x: t.clientX, y: t.clientY };
}, { passive: false });Unterstützung prüfen und auf Pointer Events ausweichen
const unterstuetztTouchAzimut = 'Touch' in window && 'azimuthAngle' in Touch.prototype;
const unterstuetztPointerAzimut = 'PointerEvent' in window && 'azimuthAngle' in PointerEvent.prototype;
const ziel = document.querySelector('#zeichenflaeche');
if (unterstuetztPointerAzimut) {
ziel.addEventListener('pointermove', (e) => {
if (e.pointerType === 'pen') console.log('Pointer-Azimut:', e.azimuthAngle);
});
} else if (unterstuetztTouchAzimut) {
ziel.addEventListener('touchmove', (e) => {
console.log('Touch-Azimut:', e.touches[0].azimuthAngle);
});
} else {
console.log('Kein Azimutwinkel verfügbar');
}// Wichtig · Fallstricke
- Kompatibilität:
Touch.azimuthAnglestammt aus dem Entwurf Touch Events Level 2 und wird praktisch nur von Safari auf iOS/iPadOS (Apple Pencil) unterstützt. Chrome und Firefox kennen die Eigenschaft nicht, dort ist sieundefined. Vor der Nutzung sollte man die Unterstützung immer prüfen. - Für neue Projekte ist
PointerEvent.azimuthAngledie geräteübergreifende Alternative. Sie wird breiter unterstützt und gilt für Maus, Stift und Touch gleichermaßen. - Der Wert ist in Radiant angegeben, nicht in Grad. Umrechnen mit
winkel * 180 / Math.PI. - Bei Fingereingaben ist der Wert immer
0. Ein Wert von0heißt also nicht zwingend, dass der Stift nach rechts zeigt. Deshalb zusätzlichtouchTypeprüfen. - Steht der Stift senkrecht (
altitudeAngle≈π/2), ist der Azimut kaum aussagekräftig und kann stark schwanken. - Um in
touchmove-HandlernpreventDefault()aufrufen zu können, muss der Listener mit{ passive: false }registriert werden.