DelegatedInkTrailPresenter: метод updateInkTrailStartPoint()

Метод updateInkTrailStartPoint() интерфейса DelegatedInkTrailPresenter указывает, какой PointerEvent использовался в качестве последней точки рендеринга для текущей кадра, что позволяет компоузеру на уровне ОС отрисовать делегированный след пера до обработки следующего события указателя.

event Необязательно

Объект PointerEvent.

style

Объект, определяющий стиль следа, содержащий следующие свойства:

color

String, содержащий допустимый код цвета CSS, указывающий цвет, который будет использоваться презентером при рендеринге следа пера.

diameter

Число, представляющее диаметр, который будет использоваться презентером при рендеринге следа пера.

undefined.

Error DOMException

Ошибка будет сгенерирована и операция прервана, если:

• Свойство color не содержит допустимого кода цвета CSS.
• Свойство diameter не является числом или меньше 1.
• Элемент presentationArea удалён из документа до или во время рендеринга.

В этом примере мы рисуем след пера на 2D холсте. В начале кода мы вызываем Ink.requestPresenter(), передавая ему холст в качестве области презентации и сохраняя возвращённую промис в переменной presenter.

Позже, в обработчике события pointermove, новая позиция начала следа рисуется на холсте каждый раз при срабатывании события. Кроме того, объект DelegatedInkTrailPresenter, возвращённый после выполнения промиса presenter, имеет вызываемый метод updateInkTrailStartPoint(); ему передаются:

• Последнее достоверное событие указателя, представляющее точку рендеринга для текущего кадра.
• Объект style, содержащий настройки цвета и диаметра.

В результате делегированный след пера рисуется перед стандартной отрисовкой браузера от имени приложения, в указанном стиле, до следующего события pointermove.

HTML

<canvas id="canvas"></canvas>
<div id="div">Delegated ink trail should match the color of this div.</div>

CSS

div {
  background-color: rgb(0 255 0 / 100%);
  position: fixed;
  top: 1rem;
  left: 1rem;
}

JavaScript

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;

Результат

• Улучшение работы с чернилами в веб-приложениях