DelegatedInkTrailPresenter: updateInkTrailStartPoint() 方法
DelegatedInkTrailPresenter 介面的 updateInkTrailStartPoint() 方法指示哪個 PointerEvent 事件被用作當前幀的最後一個渲染點，從而允許作業系統級別的合成器在下一個指標事件被派發之前預渲染委託墨跡軌跡。
語法
js
updateInkTrailStartPoint(event, style)
引數
返回值
undefined.
異常
ErrorDOMException-
如果
color屬性不包含有效的 CSS 顏色程式碼，或者diameter屬性不是數字或小於 1，則會丟擲錯誤並中止操作。color屬性不包含有效的 CSS 顏色程式碼。diameter屬性不是數字或小於 1。- 在渲染之前或期間，
presentationArea元素已從文件中移除。
示例
繪製墨跡軌跡
在此示例中，我們在 2D 畫布上繪製軌跡。在程式碼的開頭附近，我們呼叫 Ink.requestPresenter()，將畫布作為其要處理的演示區域傳遞，並將返回的 Promise 儲存在 presenter 變數中。
稍後，在 pointermove 事件監聽器中，每次事件觸發時，軌跡頭的新位置都會繪製到畫布上。此外，當 presenter promise fulfilled 時返回的 DelegatedInkTrailPresenter 物件會呼叫其 updateInkTrailStartPoint() 方法；該方法被傳入
- 表示當前幀渲染點的最後一個受信任的指標事件。
- 一個包含顏色和直徑設定的
style物件。
結果是，一個委託的墨跡軌跡在應用程式的預設瀏覽器渲染之前繪製，使用指定的樣式，直到下次接收到 pointermove 事件為止。
HTML
html
<canvas id="canvas"></canvas>
<div id="div">Delegated ink trail should match the color of this div.</div>
CSS
css
div {
background-color: lime;
position: fixed;
top: 1rem;
left: 1rem;
}
JavaScript
js
const ctx = canvas.getContext("2d");
const presenter = navigator.ink.requestPresenter({ presentationArea: canvas });
let move_cnt = 0;
let style = { color: "lime", 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;
結果
規範
| 規範 |
|---|
| Ink API # dom-delegatedinktrailpresenter-updateinktrailstartpoint |
瀏覽器相容性
載入中…