DelegatedInkTrailPresenter: Methode updateInkTrailStartPoint()

event Optional

Ein PointerEvent.

style

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

color

Ein String, der einen gültigen CSS-Farbcode enthält und die Farbe angibt, die der Presenter beim Rendern der Tintenlinie verwendet.

diameter

Eine Zahl, die den Durchmesser darstellt, den der Presenter beim Rendern der Tintenlinie verwendet.

undefined.

Error DOMException

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

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

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

Später, im pointermove-Ereignislistener, wird die neue Position des Linienkopfes bei jedem Auftreten des Ereignisses auf die Leinwand gezeichnet. Zusätzlich wird das updateInkTrailStartPoint()-Metode-Objekt des DelegatedInkTrailPresenter, das beim Erfüllen des presenter-Versprechens zurückgegeben wird, aufgerufen; dies erhält:

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

Das Ergebnis ist, dass eine delegierte Tintenlinie im angegebenen Stil im Voraus auf der Anwendungsebene vor der Standard-Browser-Darstellung gezeichnet wird, bis das nächste pointermove-Ereignis eintrifft.

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;

Ergebnis

• Verbesserung von Inking im Web