PointerEvent: getPredictedEvents() method

Baseline 2024

Newly available

Since December 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Phương thức getPredictedEvents() của giao diện PointerEvent trả về một chuỗi các thực thể PointerEvent là các vị trí con trỏ tương lai được ước tính. Cách tính các vị trí dự đoán phụ thuộc vào tác nhân người dùng, nhưng chúng dựa trên các điểm trước đó, vận tốc hiện tại và quỹ đạo.

Ứng dụng có thể sử dụng các sự kiện dự đoán để "vẽ trước" đến vị trí dự đoán, điều này có thể giảm độ trễ cảm nhận tùy thuộc vào cách ứng dụng diễn giải các sự kiện dự đoán và trường hợp sử dụng.

Để xem minh họa về các sự kiện dự đoán, hãy xem Hình 8 trong đặc tả.

Cú pháp

getPredictedEvents()

<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");
  }
});