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
requestPresenter(event, style)
Parameter
event
Optional-
Ein
PointerEvent
. style
-
Ein Objekt, das den Stil der Spur definiert und die folgenden Eigenschaften enthält:
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.
- die
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
<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
Spezifikationen
Specification |
---|
Ink API # dom-delegatedinktrailpresenter-updateinktrailstartpoint |
Browser-Kompatibilität
BCD tables only load in the browser