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