PointerEvent.twist — Eigenschaft · JavaScript-Referenz

Signatur

PointerEvent.twist

Beschreibung

Die Eigenschaft twist des PointerEvent-Interfaces gibt an, wie weit ein Zeigegerät um seine eigene Längsachse gedreht ist. Der Wert ist eine Ganzzahl im Bereich 0 bis 359 Grad, gemessen im Uhrzeigersinn. Das kennt man vom Drehen eines Stifts zwischen den Fingern, ohne ihn zu neigen.

Sinnvoll ist twist vor allem in Zeichen- und Malprogrammen. Damit lassen sich zum Beispiel flache Kalligrafie-Spitzen oder Marker-Pinsel nachbilden, deren Strichbreite von der Drehung abhängt. Dafür braucht man Hardware, die die Drehung messen kann, etwa den Wacom Art Pen oder bestimmte Stifte für Surface- und Tablet-Geräte.

Kann das Gerät keine Drehung melden, liefert die Eigenschaft immer 0. Das gilt für die meisten Mäuse, Touch-Eingaben und viele Stifte. Der Wert 0 sagt also nichts darüber aus, ob der Stift wirklich ungedreht ist. Zusammen mit tiltX/tiltY bzw. altitudeAngle/azimuthAngle und pressure beschreibt twist die Lage des Stifts vollständig.

Beispiele

Drehung eines Stifts protokollieren

const canvas = document.querySelector('#zeichenflaeche');

canvas.addEventListener('pointermove', (event) => {
  if (event.pointerType === 'pen') {
    console.log(`Drehung: ${event.twist}°`);
  }
});

Drehung: 45°

Kalligrafie-Pinsel: Strichbreite abhängig von der Drehung

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');

canvas.addEventListener('pointermove', (event) => {
  if (event.buttons !== 1) return;

  const winkel = (event.twist * Math.PI) / 180; // Grad → Bogenmaß
  const laenge = 12 * (event.pressure || 0.5);
  const dx = Math.cos(winkel) * laenge;
  const dy = Math.sin(winkel) * laenge;

  // Flache Pinselspitze als gedrehte Linie zeichnen
  ctx.beginPath();
  ctx.moveTo(event.offsetX - dx, event.offsetY - dy);
  ctx.lineTo(event.offsetX + dx, event.offsetY + dy);
  ctx.lineWidth = 2;
  ctx.stroke();
});

Feststellen, ob das Gerät Drehung unterstützt

let twistErkannt = false;

const pruefen = (event) => {
  if (event.twist !== 0) {
    twistErkannt = true;
    console.log('Stift meldet Drehung – Twist-Pinsel aktiviert');
    window.removeEventListener('pointermove', pruefen);
  }
};

window.addEventListener('pointermove', pruefen);

Stift meldet Drehung – Twist-Pinsel aktiviert

Synthetisches PointerEvent mit twist erzeugen (z. B. für Tests)

const ev = new PointerEvent('pointerdown', {
  pointerType: 'pen',
  pressure: 0.7,
  twist: 90
});

console.log(ev.twist);

90

// Wichtig · Fallstricke

Wert 0 ist mehrdeutig: Die meisten Geräte melden keine Drehung. Sie liefern dann immer 0, und das lässt sich nicht von einer echten Nullstellung unterscheiden. Auf twist gestützte Funktionen erst einschalten, wenn einmal ein Wert ungleich 0 kam.
Hardwareabhängig: Nur spezielle Stifte (z. B. Wacom Art Pen) messen die Drehung um die Längsachse. Maus und Touch liefern immer 0.
Nur lesbar: Die Eigenschaft ist schreibgeschützt. Eigene Werte lassen sich nur beim Erzeugen über die Option twist im Konstruktor new PointerEvent() setzen.
Einheit: Der Wert ist in Grad angegeben. Canvas-Funktionen wie Math.cos und ctx.rotate erwarten Bogenmaß, also mit Math.PI / 180 umrechnen.
Browser-Kompatibilität: Wird in allen aktuellen Browsern unterstützt (Chrome/Edge 58+, Firefox 59+, Safari 13+). Ob tatsächlich Werte ankommen, hängt vom Betriebssystem und vom Gerätetreiber ab.

Siehe auch

PointerEvent PointerEvent.tiltX PointerEvent.tiltY PointerEvent.pressure PointerEvent.altitudeAngle PointerEvent.azimuthAngle PointerEvent.pointerType