DelegatedInkTrailPresenter: Methode updateInkTrailStartPoint()

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, bevor Sie diese produktiv verwenden.

Die Methode updateInkTrailStartPoint() der DelegatedInkTrailPresenter-Schnittstelle gibt an, welches PointerEvent als letzter Rendering-Punkt für den aktuellen Frame verwendet wurde. Dies ermöglicht es dem Betriebssystem-Compositor, eine delegierte Ink-Trail-Darstellung vor dem nächsten Zeigerereignis zu rendern.

Syntax

js
requestPresenter(event, style)

Parameter

event Optional

Ein PointerEvent.

style

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

color

Ein String, der einen gültigen CSS-Farbcode enthält, der die Farbe angibt, die der Presenter beim Rendern der Ink-Spur verwenden wird.

diameter

Eine Zahl, die den Durchmesser angibt, den der Presenter beim Rendern der Ink-Spur 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 Ink-Spur

In diesem Beispiel zeichnen wir eine Spur auf ein 2D-Canvas. Zu Beginn des Codes rufen wir Ink.requestPresenter() auf, übergeben das Canvas als Präsentationsbereich, um es zu verwalten, und speichern das zurückgegebene Versprechen in der Variable presenter.

Später, im pointermove-Ereignis-Listener, wird die neue Position des Spurkopfs jedes Mal, wenn das Ereignis ausgelöst wird, auf das Canvas gezeichnet. Zusätzlich wird das DelegatedInkTrailPresenter-Objekt, das zurückgegeben wird, wenn das presenter-Versprechen erfüllt wird, mit seiner updateInkTrailStartPoint()-Methode aufgerufen; übergeben werden hierbei:

  • Das letzte vertrauenswürdige Zeigerereignis, das den Rendering-Punkt für den aktuellen Frame darstellt.
  • Ein style-Objekt mit Farb- und Durchmessereinstellungen.

Das Ergebnis ist, dass eine delegierte Ink-Spur vor dem Standard-Browser-Rendering im Namen der App mit dem angegebenen Stil gezeichnet wird, bis das nächste Mal ein 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

BCD tables only load in the browser

Siehe auch