API чернил

API чернил позволяет браузерам напрямую использовать доступные композаторы операционной системы при рисовании штрихов пера в функции приложения для рисования, тем самым уменьшая задержку и повышая производительность.

Рисование в браузере относится к функциям приложений, которые предполагают использование событий указателя для рисования плавного штриха пера — например, приложение для рисования или функция подписи документов.

События указателя обычно сначала отправляются в процесс браузера, который затем передает эти события циклу событий JavaScript, чтобы выполнить связанные обработчики функций и отобразить результат в приложении. Время задержки между началом и завершением этого процесса может быть значительным, что приводит к задержке между началом рисования пользователем (например, стилусом или мышкой) и отображением штриха на экране.

API чернил значительно уменьшает эту задержку, позволяя браузерам полностью обойти цикл событий JavaScript. По возможности браузеры будут передавать такие инструкции по отрисовке напрямую композаторам операционной системы. Если в операционной системе нет специализированного композатора операционной системы для этой цели, браузеры будут использовать свой собственный оптимизированный код отрисовки. Это не так мощно, как композатор, но все же приносит некоторые улучшения.

Точка входа — свойство Navigator.ink, которое возвращает объект Ink для текущего документа. Метод Ink.requestPresenter() возвращает Promise, который выполняется с объектом DelegatedInkTrailPresenter. Это инструктирует композатор операционной системы отобразить штрихи чернил между отправкой событий указателя в следующем доступном кадре в каждом случае.

Ink Экспериментально

Предоставляет доступ к объектам DelegatedInkTrailPresenter для использования приложением для отображения штрихов.

DelegatedInkTrailPresenter Экспериментально

Инструктирует композатор операционной системы отобразить штрихи чернил между отправкой событий указателя.

Navigator.ink Только для чтения Экспериментально

Возвращает объект Ink для текущего документа.

В этом примере мы рисуем след на 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;

Результат

• Улучшение рисования в браузере