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 |
浏览器兼容性
加载中…