Signatur
Beschreibung
Die Eigenschaft tiltX des PointerEvent-Interfaces gibt an, wie stark ein Zeigegerät, in der Regel ein Stift auf einem Grafiktablett oder Touchscreen, entlang der X-Achse geneigt ist. Der Wert ist eine Ganzzahl in Grad im Bereich -90 bis 90. Gemessen wird der Winkel zwischen der Y-Z-Ebene, in der die Stiftachse und die Y-Achse des Bildschirms liegen, und der Y-Z-Ebene des Bildschirms. Ein positiver Wert bedeutet, dass der Stift nach rechts geneigt ist, also in Richtung wachsender X-Werte.
Zusammen mit tiltY beschreibt tiltX die räumliche Ausrichtung des Stifts. Das nutzt man vor allem in Zeichen- und Malprogrammen, um Pinselspitzen realistisch zu formen (z. B. Kalligrafie- oder Bleistiftschattierung), Schattenrichtungen zu berechnen oder Neigungsgesten zu erkennen.
Unterstützt das Gerät keine Neigungserkennung, etwa bei Maus oder Fingerberührung, ist der Wert 0. Welches Gerät das Ereignis ausgelöst hat, erfährt man über pointerType ("pen", "mouse", "touch"). Alternativ zu tiltX/tiltY gibt es die Winkelangaben altitudeAngle und azimuthAngle im Bogenmaß. Browser rechnen zwischen beiden Darstellungen automatisch um.
Rückgabewert
-90 bis 90. 0 bedeutet senkrecht zur X-Achse oder keine Neigungsunterstützung.Beispiele
Neigung eines Stifts auslesen
const canvas = document.querySelector('#zeichenflaeche');
canvas.addEventListener('pointermove', (event) => {
if (event.pointerType !== 'pen') return;
console.log(`tiltX: ${event.tiltX}°, tiltY: ${event.tiltY}°`);
});Pinselbreite abhängig von der Neigung (Canvas)
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
canvas.style.touchAction = 'none'; // Scrollen/Gesten beim Zeichnen verhindern
canvas.addEventListener('pointermove', (e) => {
if (e.buttons !== 1) return;
// Je stärker geneigt, desto breiter der Strich (1–20 px)
const neigung = Math.hypot(e.tiltX, e.tiltY); // 0 … ~127
const breite = 1 + Math.min(neigung, 90) / 90 * 19;
const druck = e.pressure || 0.5;
ctx.beginPath();
ctx.ellipse(e.offsetX, e.offsetY, breite * druck, 2, 0, 0, Math.PI * 2);
ctx.fill();
});Neigungsrichtung als Winkel berechnen und Handler entfernen
const richtungAusTilt = (tiltX, tiltY) => {
if (tiltX === 0 && tiltY === 0) return null; // senkrecht oder nicht unterstützt
const rad = Math.atan2(Math.tan(tiltY * Math.PI / 180),
Math.tan(tiltX * Math.PI / 180));
return Math.round(rad * 180 / Math.PI);
};
const handler = (e) => {
console.log('Richtung:', richtungAusTilt(e.tiltX, e.tiltY));
};
document.addEventListener('pointerdown', handler);
// Später wieder abmelden:
// document.removeEventListener('pointerdown', handler);// Wichtig · Fallstricke
- Nur Stifte liefern echte Werte: Bei Maus und Touch ist
tiltXpraktisch immer0. Auch viele Stifte bzw. Treiber melden keine Neigung. Eine0kann also „senkrecht“ oder „nicht unterstützt“ bedeuten. - Schreibgeschützt: Zuweisungen haben keine Wirkung. Für synthetische Ereignisse setzt man den Wert über den Konstruktor:
new PointerEvent('pointermove', { tiltX: 30 }). - Die Werte sind ganzzahlig und damit relativ grob. Für feinere Berechnungen eignen sich
altitudeAngle/azimuthAnglebesser, sofern der Browser sie anbietet (Chrome/Edge, Safari; in Firefox eingeschränkt). - Beim Zeichnen
touch-action: nonesetzen, sonst übernimmt der Browser Stift-/Touch-Gesten zum Scrollen und löstpointercancelaus. - Für Zwischenwerte bei schnellen Bewegungen
getCoalescedEvents()verwenden. Jedes zusammengefasste Ereignis hat einen eigenentiltX-Wert. - Browser-Kompatibilität: Chrome, Edge, Firefox und Safari (ab 13) unterstützen die Eigenschaft. Ob echte Werte ankommen, hängt von Hardware und Betriebssystem-Treiber ab.