PointerEvent.pressure — Eigenschaft · JavaScript-Referenz

Signatur

PointerEvent.pressure

Beschreibung

Die schreibgeschützte Eigenschaft pressure eines PointerEvent gibt den normalisierten Druck der Zeigereingabe an. Der Wert ist eine Gleitkommazahl im Bereich 0 bis 1. 0 steht für den kleinsten und 1 für den größten Druck, den die Hardware erfassen kann.

Gebraucht wird der Wert vor allem bei Zeichen- und Handschrift-Anwendungen: Strichstärke, Deckkraft oder Pinselgröße lassen sich damit an den Druck eines Stifts (z. B. Apple Pencil, Wacom, Surface Pen) oder eines drucksensitiven Touchscreens anpassen.

Wenn die Hardware keinen Druck messen kann, zum Beispiel bei einer normalen Maus, legt der Browser feste Werte fest: 0.5, solange ein Knopf gedrückt ist (aktiver Zustand), und sonst 0. Deshalb sollte man zusätzlich event.pointerType auswerten, statt sich blind auf den Wert zu verlassen.

Für den tangentialen Druck (z. B. das Rad eines Airbrush-Stifts) gibt es die eigene Eigenschaft tangentialPressure.

Rückgabewert

Typ

number

Beschreibung

Normalisierter Druck zwischen 0 und 1. Ohne Drucksensor: 0.5, solange ein Knopf gedrückt ist, sonst 0.

Beispiele

Druck beim Zeichnen protokollieren

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

canvas.addEventListener('pointermove', (event) => {
  console.log(`${event.pointerType}: Druck = ${event.pressure.toFixed(2)}`);
});

pen: Druck = 0.37 pen: Druck = 0.52 mouse: Druck = 0.50

Strichstärke abhängig vom Stiftdruck

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
ctx.lineCap = 'round';
let last = null;

// Standard-Touch-Gesten (Scrollen, Zoomen) auf dem Canvas unterbinden
canvas.style.touchAction = 'none';

canvas.addEventListener('pointerdown', (e) => {
  canvas.setPointerCapture(e.pointerId);
  last = { x: e.offsetX, y: e.offsetY };
});

canvas.addEventListener('pointermove', (e) => {
  if (!last || e.buttons === 0) return;
  // Ohne Drucksensor bleibt pressure bei 0.5 -> mittlere Strichstärke
  const width = 1 + e.pressure * 19; // 1 bis 20 px
  ctx.lineWidth = width;
  ctx.beginPath();
  ctx.moveTo(last.x, last.y);
  ctx.lineTo(e.offsetX, e.offsetY);
  ctx.stroke();
  last = { x: e.offsetX, y: e.offsetY };
});

canvas.addEventListener('pointerup', () => { last = null; });

Prüfen, ob echter Druck gemessen wird

const hasRealPressure = (e) =>
  e.pointerType !== 'mouse' && e.pressure !== 0 && e.pressure !== 0.5;

document.addEventListener('pointerdown', (e) => {
  console.log(hasRealPressure(e)
    ? `Drucksensor erkannt (${e.pressure})`
    : 'Kein Drucksensor – Standardwert wird verwendet');
});

Kein Drucksensor – Standardwert wird verwendet

Hochauflösende Druckwerte mit getCoalescedEvents()

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

canvas.addEventListener('pointermove', (e) => {
  const events = e.getCoalescedEvents?.() ?? [e];
  const values = events.map((ev) => ev.pressure.toFixed(2));
  console.log('Druckwerte in diesem Frame:', values.join(', '));
});

Druckwerte in diesem Frame: 0.41, 0.43, 0.46

// Wichtig · Fallstricke

Standardwerte ohne Sensor: Mäuse und viele Touchscreens liefern keinen echten Druck. Der Wert ist dann 0.5 bei gedrücktem Knopf und sonst 0. Ein Wert von 0.5 kann also ein Ersatzwert sein oder ein echter Messwert, der zufällig so ausfällt.
Hover-Zustand: Schwebt ein Stift über der Oberfläche (buttons === 0), ist pressure gleich 0. Zeichenlogik sollte das berücksichtigen.
Touch-Gesten: Ohne touch-action: none auf der Zeichenfläche kann der Browser Scrollen oder Zoomen auslösen und mit pointercancel abbrechen.
Genauigkeit: Auflösung und Kalibrierung hängen von Gerät und Betriebssystem ab. Werte verschiedener Geräte sind nur grob vergleichbar. Für glatte Linien empfiehlt sich getCoalescedEvents().
Kompatibilität: Wird von allen modernen Browsern unterstützt. Bei Safari auf iOS kommt echter Druck nur vom Apple Pencil, 3D-Touch wird nicht mehr unterstützt. Ältere Browser ohne Pointer Events bieten die Eigenschaft nicht an. Früher lieferte dort teilweise nur Touch.force einen Druckwert.

Siehe auch

PointerEvent PointerEvent.tangentialPressure PointerEvent.tiltX PointerEvent.pointerType PointerEvent.getCoalescedEvents() NotRestoredReasons.url