PointerEvent: getCoalescedEvents() メソッド

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

安全なコンテキスト用: この機能は一部またはすべての対応しているブラウザーにおいて、安全なコンテキスト (HTTPS) でのみ利用できます。

getCoalescedEvents() は PointerEvent インターフェイスのメソッドで、単一の pointermove または pointerrawupdate イベントに統合（マージ）された PointerEvent インスタンスの配列を返します。ユーザーエージェントは、複数の更新を多数の pointermove イベントの並びを単一のイベントに統合します。これにより、ユーザーエージェントが処理するイベント数が減るため、処理速度の向上に役立ちますが、特に高速かつ大規模な動きの場合、追跡の粒度と精度が低下する可能性があります。

getCoalescedEvents() メソッドを使用すると、アプリケーションは必要に応じて、ポインターの移動データを正確に処理するために、統合前のすべての位置の変更にアクセスすることができます。統合前の位置の変更は、描画アプリケーションで望ましいものです。すべてのイベントにアクセスすることで、たとえば、ポインターの動きにより近い滑らかな曲線を作成するのに役立ちます。

イベントの統合についての説明は、仕様書の Figure 7 を参照してください。

構文

getCoalescedEvents()

<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 coalescedEvents = e.getCoalescedEvents();
  for (let coalescedEvent of coalescedEvents) {
    // 違いが分かるようにオフセットを適用し、赤に色付けする
    drawCircle(coalescedEvent.clientX + 20, coalescedEvent.clientY + 20, "red");
  }
});