PointerEvent：getPredictedEvents() 方法
getPredictedEvents() 方法是 PointerEvent 介面的一部分，它返回一系列估計的未來指標位置的 PointerEvent 例項。預測位置的計算方式取決於使用者代理，但它們基於過去的點、當前速度和軌跡。
應用程式可以使用預測事件來“預先繪製”到預測位置，根據應用程式對預測事件的解釋和用例，這可能會減少感知的延遲。
有關預測事件的圖示，請參見規範中的圖 8。
語法
js
getPredictedEvents()
引數
無。
返回值
返回一系列 PointerEvent 例項。
示例
HTML
html
<canvas id="target" width="600" height="300"></canvas>
JavaScript
js
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 predictedEvents = e.getPredictedEvents();
for (let predictedEvent of predictedEvents) {
// give it an offset so we can see the difference and color it red
drawCircle(predictedEvent.clientX + 20, predictedEvent.clientY + 20, "red");
}
});
結果
規範
| 規範 |
|---|
| 指標事件 # dom-pointerevent-getpredictedevents |
瀏覽器相容性
載入中…