InkPresenter

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

InkPresenter 是 Ink API 的一个接口，它提供了指示操作系统级合成器在指针事件分派之间渲染墨迹笔画的能力。

实例属性

expectedImprovement 只读

返回一个值（以毫秒为单位），表示使用此演示器可以预期达到的延迟改进。

presentationArea 只读

返回墨迹笔画渲染所限制的 Element。

实例方法

updateInkTrailStartPoint()

传递用作当前帧的最后一个渲染点的 PointerEvent，允许操作系统级合成器在下一个指针事件分派之前渲染委托墨迹轨迹。

示例

在此示例中，我们在 2D 画布上绘制一条轨迹。在代码开头，我们调用 Ink.requestPresenter()，将画布作为其处理的演示区域传递，并将返回的 Promise 存储在 presenter 变量中。

稍后，在 pointermove 事件监听器中，每次事件触发时，轨迹头部的新的位置都会绘制到画布上。此外，presenter Promise 履行时返回的 InkPresenter 对象调用其 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 = "#000000";
  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(function (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
# ink-presenter

浏览器兼容性

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

另请参阅