PointerEvent: Methode getCoalescedEvents()
Sicherer Kontext: Diese Funktion ist nur in sicheren Kontexten (HTTPS) in einigen oder allen unterstützenden Browsern verfügbar.
Die getCoalescedEvents()
-Methode der PointerEvent
-Schnittstelle gibt eine Sequenz von PointerEvent
-Instanzen zurück, die zu einem einzelnen pointermove
oder pointerrawupdate
-Ereignis zusammengefasst (koalesziert) wurden.
Anstatt eines kontinuierlichen Stroms von vielen pointermove
-Ereignissen fassen Benutzeragenten mehrere Aktualisierungen zu einem einzigen Ereignis zusammen.
Dies hilft bei der Leistung, da der Benutzeragent weniger Ereignisbearbeitung durchführen muss, aber es gibt eine Verringerung der Granularität und Genauigkeit beim Tracking, insbesondere bei schnellen und großen Bewegungen.
Die getCoalescedEvents()
-Methode ermöglicht es Anwendungen, auf alle nicht zusammengefassten Positionsänderungen zuzugreifen, um eine präzise Behandlung der Zeigerbewegungsdaten dort zu ermöglichen, wo es notwendig ist.
Nicht zusammengefasste Positionsänderungen sind in Zeichenanwendungen wünschenswert, da der Zugriff auf alle Ereignisse hilft, glattere Kurven zu erzeugen, die besser der Zeigerbewegung entsprechen.
Eine Darstellung der koaleszierten Ereignisse finden Sie in Abbildung 7 in der Spezifikation.
Syntax
getCoalescedEvents()
Parameter
Keine.
Rückgabewert
Eine Sequenz von PointerEvent
-Instanzen.
Beispiel
HTML
<canvas id="target" width="600" height="300"></canvas>
JavaScript
const canvas = document.getElementById("target");
const ctx = canvas.getContext("2d");
const pointerEvents = [];
function drawCircle(x, y, color) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
// draw the last 20 events
if (pointerEvents.length > 20) {
pointerEvents.shift();
}
pointerEvents.push({ x, y, color });
for (const pointerEvent of pointerEvents) {
ctx.beginPath();
ctx.arc(pointerEvent.x, pointerEvent.y, 10, 0, 2 * Math.PI);
ctx.strokeStyle = pointerEvent.color;
ctx.stroke();
}
}
canvas.addEventListener("pointermove", (e) => {
// draw a circle for the current event
drawCircle(e.clientX, e.clientY, "black");
const coalescedEvents = e.getCoalescedEvents();
for (let coalescedEvent of coalescedEvents) {
// give it an offset so we can see the difference and color it red
drawCircle(coalescedEvent.clientX + 20, coalescedEvent.clientY + 20, "red");
}
});
Ergebnis
Spezifikationen
Specification |
---|
Pointer Events # dom-pointerevent-getcoalescedevents |
Browser-Kompatibilität
BCD tables only load in the browser