Представление траектории чернил по делегированию

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

expectedImprovement Устаревшее Нестандартное Только для чтения

Возвращает значение, в миллисекундах, указывающее на ожидаемое улучшение задержки при использовании этого презентера.

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

Возвращает Element, внутри которого ограничивается рендеринг штрихов чернил.

updateInkTrailStartPoint() Экспериментальная

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

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

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

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

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

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;

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