PointerEvent: getPredictedEvents() メソッド

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.

getPredictedEvents() は PointerEvent インターフェイスのメソッドで、将来のポインター位置を予測した一連の PointerEvent インスタンスを返します。予測位置の計算方法はユーザーエージェントによって異なりますが、過去の位置、現在の速度、軌道に基づいて計算されます。

アプリケーションは予測イベントを使用して、予測された位置に「描画」することができます。予測イベントのアプリケーションによる解釈と用途によって、知覚される応答時間が縮小する可能性があります。

予測されるイベントの例については、仕様書の Figure 8 を参照してください。

構文

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

  // 最後の 20 件のイベントを描画
  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) => {
  // 現在のイベントに円を描画
  drawCircle(e.clientX, e.clientY, "black");

  const predictedEvents = e.getPredictedEvents();
  for (let predictedEvent of predictedEvents) {
    // 違いが分かるようにオフセットを適用し、赤に色付けする
    drawCircle(predictedEvent.clientX + 20, predictedEvent.clientY + 20, "red");
  }
});