DelegatedInkTrailPresenter: updateInkTrailStartPoint() Methode
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 vor der Verwendung auf produktiven Webseiten.
Die updateInkTrailStartPoint()
Methode der DelegatedInkTrailPresenter
Schnittstelle zeigt an, welches PointerEvent
als letzter Rendering-Punkt für den aktuellen Frame verwendet wurde, um dem OS-level Compositor zu ermöglichen, eine delegierte Tintenlinie vor dem nächsten Zeigereignis zu rendern, das versendet wird.
Syntax
updateInkTrailStartPoint(event, style)
Parameter
event
Optional-
Ein
PointerEvent
. style
-
Ein Objekt, das den Stil der Linie definiert und die folgenden Eigenschaften enthält:
Rückgabewert
undefined
.
Ausnahmen
Error
DOMException
-
Ein Fehler wird geworfen und der Vorgang abgebrochen, wenn:
- die
color
Eigenschaft keinen gültigen CSS-Farbcode enthält. - die
diameter
Eigenschaft keine Zahl ist oder kleiner als 1 ist. - das
presentationArea
Element vor oder während des Renderns aus dem Dokument entfernt wird.
- die
Beispiele
Zeichnen einer Tintenlinie
In diesem Beispiel zeichnen wir eine Linie auf eine 2D-Leinwand. Nahe dem Anfang des Codes rufen wir Ink.requestPresenter()
auf, übergeben die Leinwand als Präsentationsbereich zur Bearbeitung und speichern das zurückgegebene Versprechen in der Variable presenter
.
Später im pointermove
Ereignis-Listener wird die neue Position des Linienstücks jedes Mal, wenn das Ereignis ausgelöst wird, auf die Leinwand gezeichnet. Zusätzlich wird das DelegatedInkTrailPresenter
Objekt, das zurückgegeben wird, wenn das presenter
Versprechen erfüllt ist, seine updateInkTrailStartPoint()
Methode aufgerufen; dies wird übergeben:
- Das letzte vertrauenswürdige Zeigereignis, das den Rendering-Punkt für den aktuellen Frame darstellt.
- Ein
style
Objekt, das Farb- und Durchmessereinstellungen enthält.
Das Ergebnis ist, dass eine delegierte Tintenlinie im Namen der App im angegebenen Stil vor dem Standard-Browser-Rendering gezeichnet wird, bis es das nächste Mal ein pointermove
Ereignis erhält.
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
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
updateInkTrailStartPoint |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- No support
- No support
- Experimental. Expect behavior to change in the future.