Signatur
Beschreibung
altitudeAngle ist eine schreibgeschützte Eigenschaft von PointerEvent. Sie gibt an, wie stark ein Transducer, meist ein Eingabestift, gegenüber der Oberfläche des Geräts geneigt ist. Der Wert wird in Radiant angegeben und liegt im Bereich 0 bis π/2:
0: Der Stift liegt parallel zur Oberfläche.π/2(≈ 1,5708): Der Stift steht senkrecht auf der Oberfläche. Das ist auch der Standardwert, wenn das Gerät keine Neigung meldet.
Zusammen mit azimuthAngle beschreibt altitudeAngle die Ausrichtung des Stifts in Kugelkoordinaten. Das ist eine Alternative zu den älteren Eigenschaften tiltX und tiltY, die zwei ebene Neigungswinkel in Grad liefern. Der Browser rechnet die beiden Darstellungen ineinander um, sodass beide Werte gleichzeitig verfügbar sind.
Typische Einsatzgebiete sind Zeichen- und Malprogramme, Handschrift-Erkennung und Kalligrafie-Werkzeuge. Dort lässt sich über den Neigungswinkel zum Beispiel die Pinselbreite, die Deckkraft oder eine „Schraffur-Wirkung“ steuern, so wie bei einem echten Bleistift, der flach gehalten wird.
Rückgabewert
0 (parallel zur Oberfläche) und Math.PI / 2 (senkrecht). Unterstützt das Gerät keine Neigung, ist der Wert Math.PI / 2.Beispiele
Neigungswinkel des Stifts auslesen
const canvas = document.querySelector('#zeichenflaeche');
canvas.addEventListener('pointermove', (event) => {
if (event.pointerType !== 'pen') return;
// Radiant in Grad umrechnen
const grad = event.altitudeAngle * (180 / Math.PI);
console.log(`Höhenwinkel: ${grad.toFixed(1)}°`);
});Pinselbreite abhängig von der Neigung (Canvas)
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
let zuletzt = null;
canvas.addEventListener('pointerdown', (e) => {
zuletzt = { x: e.offsetX, y: e.offsetY };
canvas.setPointerCapture(e.pointerId);
});
canvas.addEventListener('pointermove', (e) => {
if (!zuletzt) return;
// 0 = flach -> breit, 1 = senkrecht -> schmal
const aufrecht = e.altitudeAngle / (Math.PI / 2);
const breite = 2 + (1 - aufrecht) * 18;
ctx.lineWidth = breite * (e.pressure || 0.5);
ctx.lineCap = 'round';
ctx.beginPath();
ctx.moveTo(zuletzt.x, zuletzt.y);
ctx.lineTo(e.offsetX, e.offsetY);
ctx.stroke();
zuletzt = { x: e.offsetX, y: e.offsetY };
});
canvas.addEventListener('pointerup', () => { zuletzt = null; });Fallback auf tiltX/tiltY bei fehlender Unterstützung
const hoehenwinkel = (e) => {
if ('altitudeAngle' in e) return e.altitudeAngle;
// Umrechnung aus tiltX/tiltY (Grad) nach Pointer Events Level 3
const tx = (e.tiltX * Math.PI) / 180;
const ty = (e.tiltY * Math.PI) / 180;
if (tx === 0 && ty === 0) return Math.PI / 2;
if (Math.abs(tx) === Math.PI / 2 || Math.abs(ty) === Math.PI / 2) return 0;
return Math.atan(1 / Math.sqrt(Math.tan(tx) ** 2 + Math.tan(ty) ** 2));
};
document.addEventListener('pointermove', (e) => {
console.log(hoehenwinkel(e).toFixed(3));
});Wert in einem synthetischen Event setzen
const ev = new PointerEvent('pointermove', {
pointerType: 'pen',
altitudeAngle: Math.PI / 4
});
console.log(ev.altitudeAngle.toFixed(4));// Wichtig · Fallstricke
- Einheit: Der Wert ist in Radiant angegeben, nicht in Grad wie bei
tiltX/tiltY. Für eine Anzeige in Grad mit180 / Math.PImultiplizieren. - Standardwert: Bei Maus, Touch oder Stiften ohne Neigungssensor liefert die Eigenschaft immer
π/2. Ob ein Stift wirklich geneigt ist, lässt sich daraus nicht sicher ablesen. Deshalb vorherpointerType === 'pen'prüfen. - Browser-Kompatibilität: Chromium-Browser unterstützen die Eigenschaft seit Version 86. Safari und Firefox sind erst später dazugekommen. Ältere Browser liefern
undefined, daher mit'altitudeAngle' in eventprüfen und bei Bedarf austiltX/tiltYumrechnen. - Hardware: Ob sinnvolle Werte ankommen, hängt vom Stift, vom Treiber und vom Betriebssystem ab (z. B. Apple Pencil, Wacom, Surface Pen).
- Performance:
pointermovekann sehr häufig feuern. Für eine genaue LinienführunggetCoalescedEvents()verwenden, denn jedes dieser Einzelereignisse hat einen eigenenaltitudeAngle.