DelegatedInkTrailPresenter: updateInkTrailStartPoint() メソッド
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Experimental: これは実験的な機能です。
本番で使用する前にブラウザー互換性一覧表をチェックしてください。
updateInkTrailStartPoint() は DelegatedInkTrailPresenter インターフェイスのメソッドで、現在のフレームの最後の描画ポイントとして使用された PointerEvent を示し、OS レベルのコンポジターが、次のポインターイベントが配信される前に、代理インクの軌跡を描画できるようにします。
構文
updateInkTrailStartPoint(event, style)
引数
返値
undefined です。
例外
ErrorDOMException-
次の場合、エラーが発生し、操作は中止されます。
colorプロパティには、有効な CSS カラーコードが含まれていない。diameterプロパティが数値ではないか、1 未満である。presentationArea要素が、レンダリング前またはレンダリング中に文書から除去されている。
例
インクの軌跡の描画
この例では、2D キャンバスに軌跡を描きます。コードの先頭近くで、Ink.requestPresenter() を呼び出し、それを処理する表示領域としてキャンバスを渡して、返されるプロミスを presenter 変数に格納します。
その後、pointermove イベントリスナーで、イベントが発行されるたびに、軌跡の始点の新位置がキャンバスに描画されます。さらに、presenter プロミスが履行されたときに返される DelegatedInkTrailPresenter オブジェクトの updateInkTrailStartPoint() メソッドが呼び出されます。これは、次のように渡されます。
- 現在のフレームのレンダリング点を表す最後の信頼済みポインターイベント。
- 色と直径の設定が含まれている
styleオブジェクト。
その結果、次の pointermove イベントを受信するまで、指定したスタイルで、アプリに代わって、既定のブラウザーの描画よりも先に、代理インクの軌跡が描画されます。
HTML
<canvas id="canvas"></canvas>
<div id="div">代理インクの軌跡は、この div の色と一致します。</div>
CSS
div {
background-color: rgb(0 255 0 / 100%);
position: fixed;
top: 1rem;
left: 1rem;
}
JavaScript
const ctx = canvas.getContext("2d");
const presenter = navigator.ink.requestPresenter({ presentationArea: canvas });
let move_cnt = 0;
let style = { color: "rgb(0 255 0 / 100%)", diameter: 10 };
function getRandomInt(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1)) + min;
}
canvas.addEventListener("pointermove", async (evt) => {
const pointSize = 10;
ctx.fillStyle = style.color;
ctx.fillRect(evt.pageX, evt.pageY, pointSize, pointSize);
if (move_cnt === 20) {
const r = getRandomInt(0, 255);
const g = getRandomInt(0, 255);
const b = getRandomInt(0, 255);
style = { color: `rgb(${r} ${g} ${b} / 100%)`, diameter: 10 };
move_cnt = 0;
document.getElementById("div").style.backgroundColor =
`rgb(${r} ${g} ${b} / 60%)`;
}
move_cnt += 1;
await presenter.updateInkTrailStartPoint(evt, style);
});
window.addEventListener("pointerdown", () => {
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
});
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
結果
仕様書
| Specification |
|---|
| Ink API # dom-delegatedinktrailpresenter-updateinktrailstartpoint |
ブラウザーの互換性
Loading…