Signatur
Beschreibung
getPredictedEvents() liefert eine Liste synthetischer PointerEvent-Instanzen, die der Browser (bzw. das Betriebssystem) aus der bisherigen Bewegung des Zeigers hochrechnet. Sie beschreiben, wo sich Maus, Stift oder Finger in den nächsten Millisekunden vermutlich befinden werden.
Der typische Einsatzzweck sind Zeichen- und Handschrift-Anwendungen sowie Spiele: Zwischen der physischen Bewegung und dem nächsten Frame vergeht immer etwas Zeit, sodass der gezeichnete Strich dem Stift „hinterherläuft“. Wenn man zusätzlich die vorhergesagten Punkte als vorläufiges Segment zeichnet, wirkt die Eingabe spürbar direkter. Im nächsten pointermove ersetzt man diese Vorhersage durch die echten Daten.
Sinnvoll sind die Vorhersagen nur bei pointermove-Ereignissen (bzw. pointerrawupdate). Bei anderen Ereignistypen oder wenn der Browser keine Vorhersage berechnen kann, ist das Array leer. Die Methode wird häufig zusammen mit getCoalescedEvents() genutzt: Die zusammengefassten Ereignisse beschreiben die Vergangenheit in hoher Auflösung, die vorhergesagten die nahe Zukunft.
Rückgabewert
PointerEvent-Objekten mit geschätzten Positionen (clientX, clientY, pressure usw.), zeitlich aufsteigend sortiert. Kann leer sein; ist bei nicht vertrauenswürdigen (synthetischen) Ereignissen in der Regel leer.Beispiele
Vorhergesagte Positionen protokollieren
const area = document.querySelector('#area');
area.addEventListener('pointermove', (event) => {
const predicted = event.getPredictedEvents?.() ?? [];
console.log(`Aktuell: ${event.clientX}/${event.clientY}`);
for (const p of predicted) {
console.log(` Vorhersage: ${p.clientX}/${p.clientY}`);
}
});Latenzarmes Zeichnen auf einem Canvas
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
const stroke = []; // echte Punkte
let drawing = false;
const render = (predicted = []) => {
ctx.clearRect(0, 0, canvas.width, canvas.height);
const points = [...stroke, ...predicted];
if (points.length < 2) return;
ctx.beginPath();
ctx.moveTo(points[0].x, points[0].y);
points.slice(1).forEach(({ x, y }) => ctx.lineTo(x, y));
ctx.stroke();
};
const toPoint = (e) => {
const r = canvas.getBoundingClientRect();
return { x: e.clientX - r.left, y: e.clientY - r.top };
};
canvas.addEventListener('pointerdown', (e) => {
drawing = true;
stroke.length = 0;
stroke.push(toPoint(e));
canvas.setPointerCapture(e.pointerId);
});
canvas.addEventListener('pointermove', (e) => {
if (!drawing) return;
// Vergangenheit in voller Auflösung übernehmen
const coalesced = e.getCoalescedEvents?.() ?? [e];
coalesced.forEach((c) => stroke.push(toPoint(c)));
// Zukunft nur vorläufig zeichnen, nicht speichern
const predicted = (e.getPredictedEvents?.() ?? []).map(toPoint);
render(predicted);
});
canvas.addEventListener('pointerup', () => {
drawing = false;
render(); // endgültiger Strich ohne Vorhersage
});Feature-Erkennung
const supportsPrediction =
'PointerEvent' in window &&
typeof PointerEvent.prototype.getPredictedEvents === 'function';
console.log(supportsPrediction ? 'Vorhersage verfügbar' : 'Keine Vorhersage');// Wichtig · Fallstricke
- Nur Schätzungen: Vorhergesagte Punkte dürfen niemals dauerhaft gespeichert werden. Man zeichnet sie nur vorläufig und verwirft sie beim nächsten Ereignis, sonst entstehen „Überschwinger“ bei abrupten Richtungswechseln.
- Leeres Array ist normal: Bei
pointerdown,pointerup, pernew PointerEvent()erzeugten Ereignissen oder fehlender Plattformunterstützung gibt es keine Vorhersage. Code muss damit umgehen können. - Kompatibilität: Unterstützt in Chromium-Browsern (ab 77), Firefox (ab 89) und Safari (ab 18). Nur in sicheren Kontexten (HTTPS) verfügbar. In älteren Browsern fehlt die Methode ganz – per optionalem Aufruf
event.getPredictedEvents?.()absichern. - Die Qualität und Anzahl der Vorhersagen hängt stark von Gerät, Eingabemittel und Betriebssystem ab; bei Mauseingaben sind sie oft weniger nützlich als bei Stift oder Touch.
- Für flüssiges Zeichnen zusätzlich
touch-action: noneauf der Zeichenfläche setzen, damit der Browser nicht scrollt oder zoomt.