DieDelegatedInkTrailPresenter-Schnittstelle derInk API ermöglicht es, dem Betriebssystem-Kompositor anzuleiten, Tintenstriche zwischen der Dispatching von Zeigerereignissen zu rendern.

Instanzeigenschaften

expectedImprovementVeraltetNicht standardisiertSchreibgeschützt

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

presentationAreaExperimentellSchreibgeschützt

Gibt dasElement zurück, in dem das Rendern der Tintenstriche beschränkt ist.

Instanzmethoden

updateInkTrailStartPoint()Experimentell

Übergibt dasPointerEvent, das als letzter Rendering-Punkt für das aktuelle Bild genutzt wurde, damit der Betriebssystem-Kompositor eine delegierte Tintenspur vor dem nächsten Zeigerereignis rendern kann.

Beispiel

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

Später, impointermove-Ereignislistener, wird die neue Position des Spurkopfes jedes Mal auf die Leinwand gezeichnet, wenn das Ereignis ausgelöst wird. Darüber hinaus wird die MethodeupdateInkTrailStartPoint() desDelegatedInkTrailPresenter-Objekts aufgerufen, das zurückgegeben wird, wenn daspresenter-Versprechen erfüllt wird; dieses wird übergeben:

• Der letzte vertrauenswürdige Zeigerereignis, der den Rendering-Punkt für das aktuelle Bild darstellt.
• Einstyle-Objekt, das Farb- und Durchmessereinstellungen enthält.

Das Ergebnis ist, dass eine delegierte Tintenlinie, in dem angegebenen Stil, vor dem Standard-Browser-Rendering im Auftrag der App gezeichnet wird, bis zum nächsten Empfang einespointermove-Ereignisses.

const ctx = canvas.getContext("2d");let presenter = navigator.ink.requestPresenter({ presentationArea: canvas });let moveCnt = 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 = "black";  ctx.fillRect(evt.pageX, evt.pageY, pointSize, pointSize);  if (moveCnt === 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,    };    moveCnt = 0;    document.getElementById("div").style.backgroundColor =      `rgb(${r} ${g} ${b} / 100%)`;  }  moveCnt += 1;  presenter.then((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;

Spezifikationen

Browser-Kompatibilität