DelegatedInkTrailPresenter
DelegatedInkTrailPresenter 介面是 Ink API 的一部分，它提供了指示作業系統級合成器在指標事件分派之間渲染墨跡筆畫的功能。
例項屬性
expectedImprovement已棄用 非標準 只讀-
返回一個以毫秒為單位的值，表示使用此演示器可預期的延遲改進。
presentationArea實驗性 只讀-
返回墨跡筆畫渲染所限制的
Element。
例項方法
updateInkTrailStartPoint()實驗性-
傳入用於當前幀最後一個渲染點的
PointerEvent，允許作業系統級合成器在下一個指標事件分派之前渲染委派的墨跡軌跡。
示例
在此示例中，我們在 2D 畫布上繪製軌跡。在程式碼的開頭附近，我們呼叫 Ink.requestPresenter()，將畫布作為其要處理的演示區域傳遞，並將返回的 Promise 儲存在 presenter 變數中。
稍後，在 pointermove 事件監聽器中，每次事件觸發時，軌跡的移動點都會繪製在畫布上。此外，當 presenter promise 兌現時返回的 DelegatedInkTrailPresenter 物件會呼叫其 updateInkTrailStartPoint() 方法；這是傳入的
- 表示當前幀渲染點的最後一個受信任的指標事件。
- 一個包含顏色和直徑設定的
style物件。
結果是，一個委託的墨跡軌跡在應用程式的預設瀏覽器渲染之前繪製，使用指定的樣式，直到下次接收到 pointermove 事件為止。
js
const ctx = canvas.getContext("2d");
let presenter = navigator.ink.requestPresenter({ presentationArea: canvas });
let move_cnt = 0;
let style = { color: "rgb(0 0 255 / 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", (evt) => {
const pointSize = 10;
ctx.fillStyle = "black";
ctx.fillRect(evt.pageX, evt.pageY, pointSize, pointSize);
if (move_cnt === 50) {
let r = getRandomInt(0, 255);
let g = getRandomInt(0, 255);
let 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} / 100%)`;
}
move_cnt += 1;
presenter.then((v) => {
v.updateInkTrailStartPoint(evt, style);
});
});
window.addEventListener("pointerdown", (evt) => {
evt.pointerId;
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
});
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
注意： 檢視此示例即時執行 — 委派墨跡軌跡。
規範
| 規範 |
|---|
| Ink API # delegatedinktrailpresenter |
瀏覽器相容性
載入中…