DelegatedInkTrailPresenter

expectedImprovement Veraltet Nicht standardisiert Schreibgeschützt

Gibt einen Wert in Millisekunden zurück, der die erwartete Latenzverbesserung beim Einsatz dieses Presenters angibt.

presentationArea Experimentell Schreibgeschützt

Gibt das Element zurück, innerhalb dessen die Darstellung der Tintenstriche begrenzt ist.

updateInkTrailStartPoint() Experimentell

Gibt das PointerEvent weiter, das als letzter Rendering-Punkt für den aktuellen Frame verwendet wurde, und ermöglicht es dem OS-Level-Kompositor, eine delegierte Tintenlinie vor dem nächsten Zeigerereignis zu rendern, das gesendet wird.

In diesem Beispiel zeichnen wir eine Spur auf eine 2D-Leinwand. Zu Beginn des Codes rufen wir Ink.requestPresenter() auf, übergeben das Canvas als Präsentationsfläche und speichern das zurückgegebene Versprechen in der Variablen 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 die Methode updateInkTrailStartPoint() des DelegatedInkTrailPresenter-Objekts aufgerufen, das zurückgegeben wird, wenn das presenter-Versprechen erfüllt wird; dies wird übergeben:

• Das letzte vertrauenswürdige Zeigerereignis, das den Renderpunkt für den aktuellen Frame darstellt.
• Ein style-Objekt, das Farb- und Durchmessereinstellungen enthält.

Das Ergebnis ist, dass eine delegierte Tintenlinie im Auftrag der Anwendung in dem angegebenen Stil vor der Standardbrowser-Darstellung gezeichnet wird, bis das nächste Mal, wenn ein pointermove-Ereignis empfangen wird.

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;

• Enhancing Inking on the Web