PointerEvent: getPredictedEvents() 方法

getPredictedEvents() 方法是 PointerEvent 接口的方法，它返回一个 PointerEvent 实例的序列，这些实例是估计的未来指针位置。预测位置的计算方式取决于用户代理，但它们基于过去的位置、当前速度和轨迹。

应用程序可以使用预测事件“提前绘制”到预测的位置，这可能会减少感知延迟，具体取决于应用程序对预测事件的解释和用例。

有关预测事件的说明，请参见规范中的图 8。

语法

getPredictedEvents()

参数

无。

返回值

一个 PointerEvent 实例的序列。

示例

HTML

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 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

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。