DelegatedInkTrailPresenter: updateInkTrailStartPoint() Methode

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Experimentell: Dies ist eine experimentelle Technologie
Überprüfen Sie die Browser-Kompatibilitätstabelle sorgfältig vor der Verwendung auf produktiven Webseiten.

Die updateInkTrailStartPoint() Methode des DelegatedInkTrailPresenter Interfaces gibt an, welches PointerEvent als letzter Rendering-Punkt für den aktuellen Frame verwendet wurde. Dies ermöglicht dem Betriebssystem-Kompositor, eine delegierte Tintenlinie vor dem nächsten Zeigerereignis zu rendern, das gesendet wird.

Syntax

js
updateInkTrailStartPoint(event, style)

Parameter

event Optional

Ein PointerEvent.

style

Ein Objekt, das den Stil der Linie definiert und die folgenden Eigenschaften enthält:

color

Ein String mit einem gültigen CSS-Farbcode, der die Farbe angibt, die der Presenter beim Rendern der Tintenlinie verwenden wird.

diameter

Eine Zahl, die den Durchmesser repräsentiert, den der Presenter beim Rendern der Tintenlinie verwenden wird.

Rückgabewert

undefined.

Ausnahmen

Error DOMException

Ein Fehler wird ausgelöst und der Vorgang wird abgebrochen, wenn:

  • Die color Eigenschaft keinen gültigen CSS-Farbcode enthält.
  • Die diameter Eigenschaft keine Zahl oder kleiner als 1 ist.
  • Das presentationArea Element vor oder während des Renderns aus dem Dokument entfernt wird.

Beispiele

Zeichnen einer Tintenlinie

In diesem Beispiel zeichnen wir eine Linie auf eine 2D-Leinwand. Zu Beginn des Codes rufen wir Ink.requestPresenter() auf, übergeben dieser die Leinwand als Präsentationsbereich, den sie betreuen soll, und speichern das zurückgegebene Versprechen in der Variablen presenter.

Später, im pointermove Ereignis-Listener, wird die neue Position der Linienführung jedes Mal auf die Leinwand gezeichnet, wenn das Ereignis ausgelöst wird. Darüber hinaus wird das updateInkTrailStartPoint()-Methode des DelegatedInkTrailPresenter-Objekts, das zurückgegeben wird, wenn das presenter-Versprechen erfüllt wird, aufgerufen. Dies geschieht mit:

  • Dem letzten vertrauenswürdigen Zeigerereignis, das den Rendering-Punkt für den aktuellen Frame darstellt.
  • Einem style Objekt, das Farb- und Durchmesser-Einstellungen enthält.

Das Ergebnis ist, dass eine delegierte Tintenlinie im Auftrag der App vor dem standardmäßigen Browser-Rendering im angegebenen Stil gezeichnet wird, bis das nächste pointermove-Ereignis empfangen wird.

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;

Ergebnis

Spezifikationen

Specification
Ink API
# dom-delegatedinktrailpresenter-updateinktrailstartpoint

Browser-Kompatibilität