Signatur
Beschreibung
tangentialPressure gibt den tangentialen Druck eines Eingabegeräts an, auch Fassdruck oder Zylinderbelastung genannt. Gemeint ist ein zusätzlicher Regler am Gehäuse eines Stifts, etwa das Fingerrad am Airbrush-Stift von Wacom. Das ist nicht der Druck der Stiftspitze auf die Oberfläche; dafür gibt es PointerEvent.pressure.
Der Wert ist eine Gleitkommazahl im Bereich -1 bis 1. 0 ist die neutrale Stellung des Reglers. Kann die Hardware keinen tangentialen Druck melden, ist der Wert immer 0. Das gilt für Maus, Touch und die meisten normalen Stifte.
Nützlich ist die Eigenschaft vor allem in Zeichen- und Malprogrammen im Browser. Dort kann man mit dem Fassdruck eine zweite Größe steuern, zum Beispiel die Sprühmenge, die Deckkraft oder die Pinselhärte. Die Pinselbreite steuert man weiter über pressure. Werte die Eigenschaft am besten in pointerdown- und pointermove-Handlern aus. Bei häufigen Bewegungen liefert getCoalescedEvents() zusätzliche Zwischenwerte.
Rückgabewert
-1 und 1. 0 ist die neutrale Stellung und auch der Wert, wenn die Hardware keinen Fassdruck unterstützt.Beispiele
Fassdruck beim Zeichnen protokollieren
const canvas = document.querySelector('#leinwand');
canvas.addEventListener('pointermove', (event) => {
if (event.pointerType !== 'pen') return;
console.log(
`Spitze: ${event.pressure.toFixed(2)}, Fass: ${event.tangentialPressure.toFixed(2)}`
);
});Airbrush: Deckkraft über den Fassdruck steuern
const canvas = document.querySelector('#leinwand');
const ctx = canvas.getContext('2d');
// Bereich -1 … 1 auf die Deckkraft 0.05 … 1 abbilden
const toAlpha = (tp) => 0.05 + ((tp + 1) / 2) * 0.95;
canvas.addEventListener('pointermove', (event) => {
if (event.buttons !== 1) return;
// Zwischenwerte für flüssige Striche mitnehmen
const events = event.getCoalescedEvents?.() ?? [event];
for (const e of events) {
ctx.globalAlpha = toAlpha(e.tangentialPressure);
ctx.beginPath();
ctx.arc(e.offsetX, e.offsetY, 4 + e.pressure * 12, 0, Math.PI * 2);
ctx.fill();
}
});Prüfen, ob das Gerät Fassdruck liefert
let hatFassdruck = false;
const pruefen = (event) => {
if (event.tangentialPressure !== 0) {
hatFassdruck = true;
console.log('Fassdruck-Regler erkannt – Airbrush-Modus aktiv');
window.removeEventListener('pointermove', pruefen);
}
};
window.addEventListener('pointermove', pruefen);Synthetisches PointerEvent mit tangentialPressure (z. B. für Tests)
const target = document.body;
target.addEventListener('pointerdown', (e) => {
console.log(e.pointerType, e.tangentialPressure);
});
target.dispatchEvent(new PointerEvent('pointerdown', {
pointerType: 'pen',
pressure: 0.5,
tangentialPressure: 0.3,
bubbles: true
}));// Wichtig · Fallstricke
- Nicht mit
pressureverwechseln:pressuremisst den Druck der Spitze und liegt zwischen 0 und 1.tangentialPressuremisst einen Regler am Gehäuse und liegt zwischen -1 und 1. - Hardwareabhängig: Nur wenige Geräte liefern Werte ungleich
0, zum Beispiel der Wacom-Airbrush-Stift. Wird kein Wert gemeldet, sieht das genauso aus wie ein Regler in neutraler Stellung. Einen verlässlichen Weg, beide Fälle zu unterscheiden, gibt es nicht. - Treiber und Betriebssystem: Ob der Wert beim Browser ankommt, hängt auch vom Tablet-Treiber ab, unter Windows etwa Windows Ink oder WinTab. Unter Linux und auf Mobilgeräten ist der Wert meist immer
0. - Die Eigenschaft ist schreibgeschützt. Bei synthetischen Events legt man den Wert über das
PointerEventInit-Wörterbuch fest. Der Wert wird dabei als 32-Bit-Gleitkommazahl gespeichert, deshalb können Rundungsabweichungen entstehen. - Browserunterstützung: Chrome/Edge ab 58, Firefox ab 59, Safari ab 13. In älteren Browsern ist der Wert
undefined. Ein defensiver Zugriff sieht so aus:event.tangentialPressure ?? 0.