Signatur
Beschreibung
Die schreibgeschützte Eigenschaft tiltY eines PointerEvent gibt an, wie stark ein Zeigegerät, meist ein Stift, entlang der Y-Achse des Bildschirms geneigt ist. Der Wert ist eine Ganzzahl in Grad zwischen -90 und 90. Er beschreibt den Winkel zwischen der X-Z-Ebene und der Ebene, die sowohl die Stiftachse als auch die X-Achse enthält.
Ein positiver Wert bedeutet, dass der Stift zum Nutzer hin geneigt ist, also nach unten auf dem Bildschirm. Ein negativer Wert bedeutet eine Neigung vom Nutzer weg. Bei 0 steht der Stift in dieser Achse senkrecht auf der Oberfläche. Zusammen mit tiltX ergibt sich die vollständige räumliche Neigung.
Typische Einsatzgebiete sind Zeichen- und Malprogramme, zum Beispiel für eine Pinselform, die sich mit der Neigung ändert (Kalligrafie- oder Kreideeffekt), für Schattierungen oder für eine richtungsabhängige Strichbreite. Geräte ohne Neigungssensor, etwa Maus, Touch oder einfache Stifte, liefern immer 0.
Rückgabewert
long) im Bereich -90 bis 90 in Grad. 0, wenn das Gerät keine Neigung meldet.Beispiele
Neigung eines Stifts live anzeigen
const flaeche = document.querySelector('#zeichenflaeche');
const anzeige = document.querySelector('#info');
flaeche.addEventListener('pointermove', (event) => {
if (event.pointerType !== 'pen') return;
anzeige.textContent = `tiltX: ${event.tiltX}°, tiltY: ${event.tiltY}°`;
});Strichbreite im Canvas abhängig von der Neigung
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
let zeichnet = false;
canvas.addEventListener('pointerdown', (e) => {
zeichnet = true;
ctx.beginPath();
ctx.moveTo(e.offsetX, e.offsetY);
});
canvas.addEventListener('pointermove', (e) => {
if (!zeichnet) return;
// Je stärker der Stift geneigt ist, desto breiter der Strich (wie bei Kreide)
const neigung = Math.max(Math.abs(e.tiltX), Math.abs(e.tiltY));
ctx.lineWidth = 1 + (neigung / 90) * 14;
ctx.lineTo(e.offsetX, e.offsetY);
ctx.stroke();
});
canvas.addEventListener('pointerup', () => { zeichnet = false; });tiltX/tiltY in Azimut und Höhenwinkel umrechnen
const zuWinkeln = (tiltX, tiltY) => {
const rad = Math.PI / 180;
const tanX = Math.tan(tiltX * rad);
const tanY = Math.tan(tiltY * rad);
let azimuth = Math.atan2(tanY, tanX);
if (azimuth < 0) azimuth += 2 * Math.PI;
const radius = Math.hypot(tanX, tanY);
const altitude = radius === 0 ? Math.PI / 2 : Math.atan(1 / radius);
return { azimuth, altitude };
};
console.log(zuWinkeln(0, 45));// Wichtig · Fallstricke
- Standardwert 0: Maus, Touch und Stifte ohne Neigungssensor melden immer
0. Man kann daran also nicht sicher erkennen, ob Neigung unterstützt wird. Prüfen Sie zusätzlichevent.pointerType === 'pen'. - Vorzeichen beachten: Ein positiver Wert zeigt zum Nutzer hin (Richtung +Y, also nach unten auf dem Bildschirm), weil die Y-Achse des Bildschirms nach unten zeigt.
- Randwerte: Bei
±90liegt der Stift flach auf der Oberfläche. Dann liefertMath.tansehr große Werte, die man bei Umrechnungen gesondert behandeln sollte. - Alternative: Neuere Browser bieten zusätzlich
altitudeAngleundazimuthAngle(Pointer Events Level 3) in Bogenmaß an. Für Pinsel-Berechnungen sind sie oft handlicher. Sie werden aber noch nicht überall unterstützt, daher ist die Umrechnung austiltX/tiltYein sinnvoller Ersatz. - Kompatibilität: Wird in Chrome, Edge, Firefox und Safari (ab 13) unterstützt. Wie genau die Werte sind, hängt stark von Hardware und Treiber ab, etwa bei Wacom, Apple Pencil oder Surface Pen.
- Für flüssiges Zeichnen mit vielen Zwischenwerten lohnt sich
getCoalescedEvents(). Jedes zusammengefasste Ereignis hat eigenetiltY-Werte.