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 |
浏览器兼容性
加载中…