このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。
PointerEvent: getPredictedEvents() メソッド
Baseline
2024
最近利用可能
December 2024以降、この機能は最新のバージョンの端末およびブラウザーで動作します。古い端末やブラウザーでは動作しないことがあります。
getPredictedEvents() は PointerEvent インターフェイスのメソッドで、将来のポインター位置を予測した一連の PointerEvent インスタンスを返します。
予測位置の計算方法はユーザーエージェントによって異なりますが、過去の位置、現在の速度、軌道に基づいて計算されます。
アプリケーションは予測イベントを使用して、予測された位置に「描画」することができます。予測イベントのアプリケーションによる解釈と用途によって、知覚される応答時間が縮小する可能性があります。
予測されるイベントの例については、仕様書の Figure 8 を参照してください。
構文
js
getPredictedEvents()
引数
なし。
返値
PointerEvent インスタンスの配列です。
例
HTML
html
<canvas id="target" width="600" height="300"></canvas>
JavaScript
js
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");
}
});
結果
[フレーム]
仕様書
| 仕様書 |
|---|
| Pointer Events # dom-pointerevent-getpredictedevents |
ブラウザーの互換性
ブラウザー互換性一覧表を表示するには、JavaScript を有効にしてください。