PointerEvent: метод getPredictedEvents()

Метод getPredictedEvents() интерфейса PointerEvent возвращает последовательность экземпляров PointerEvent, которые оценивают будущие позиции указателя. Способ расчёта предсказанных позиций зависит от пользователя, но они основаны на прошлых точках, текущей скорости и траектории.

Приложения могут использовать предсказанные события, чтобы «нарисовать вперёд» до предсказанной позиции, что может снизить ощущаемую задержку в зависимости от интерпретации приложения предсказанных событий и конкретного случая использования.

Для иллюстрации предсказанных событий смотрите Рисунок 8 в спецификации.

Синтаксис

getPredictedEvents()

Параметры

Нет.

Возвращаемое значение

Последовательность экземпляров PointerEvent.

Пример

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

Результат

Спецификации

Спецификация
Pointer Events # dom-pointerevent-getpredictedevents

Совместимость с браузерами

	Рабочий стол					Мобильный
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`getPredictedEvents`	77	79	89	64	18.2	77	89	55	18.2	12.0	77

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/PointerEvent/getPredictedEvents