InkPresenter：updateInkTrailStartPoint() 方法

实验性： 这是一个 实验性技术
在生产环境中使用此功能之前，请仔细查看 浏览器兼容性表。

updateInkTrailStartPoint() 方法是 InkPresenter 接口的方法，它指示哪个 PointerEvent 用作当前帧的最后一个渲染点，从而允许操作系统级合成器在下一个指针事件分派之前渲染委托墨迹轨迹。

语法

js
requestPresenter(event, style)

参数

event 可选

一个 PointerEvent。

样式

一个定义轨迹样式的对象，其中包含以下属性

颜色

一个包含有效 CSS 颜色代码的 String，指示呈现器渲染墨迹轨迹时将使用的颜色。

直径

一个表示呈现器渲染墨迹轨迹时将使用的直径的数字。

返回值

未定义.

异常

Error DOMException

如果以下情况发生，则会抛出错误并中止操作：

  • color 属性不包含有效的 CSS 颜色代码。
  • diameter 属性不是数字或小于 1。
  • presentationArea 元素在渲染之前或期间从文档中删除。

示例

绘制墨迹轨迹

在此示例中，我们在 2D 画布上绘制轨迹。在代码的开头附近，我们调用 Ink.requestPresenter()，将画布作为呈现区域传递给它以进行处理，并将返回的 Promise 存储在 presenter 变量中。

稍后，在 pointermove 事件监听器中，每次事件触发时，轨迹头的新的位置都会绘制到画布上。此外，当 presenter Promise 完成时返回的 InkPresenter 对象会调用其 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: rgb(0 255 0 / 100%);
  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: "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;

结果

规范

规范
Ink API
# dom-inkpresenter-updateinktrailstartpoint

浏览器兼容性

BCD 表格仅在启用 JavaScript 的浏览器中加载。

另请参阅