Signatur
Beschreibung
Die Eigenschaft presentationArea gehört zur Ink API. Diese API verringert die spürbare Verzögerung beim Zeichnen mit Stift, Finger oder Maus: Der Browser übergibt das Zeichnen der letzten Strichsegmente an den Compositor bzw. an das Betriebssystem. So erscheint die Tinte schon, bevor die eigene Anwendung den Frame fertig gerendert hat.
Das Presenter-Objekt erzeugt man mit navigator.ink.requestPresenter({ presentationArea: element }). Das dort übergebene Element, meist ein <canvas>, legt fest, wo die vorgezeichnete Tinte sichtbar sein darf. Striche außerhalb seiner Rahmenbox werden abgeschnitten. presentationArea gibt genau dieses Element zurück. Wurde keines angegeben, ist der Wert null, und die Tinte ist auf den Viewport des Dokuments begrenzt.
Die Eigenschaft ist schreibgeschützt. Um den Bereich zu ändern, fordert man einen neuen Presenter an. In der Praxis nutzt man presentationArea, um zu prüfen, zu welcher Zeichenfläche ein Presenter gehört, zum Beispiel wenn eine Anwendung mehrere Canvas-Elemente hat oder den Presenter zentral in einer Hilfsklasse speichert.
Rückgabewert
null, wenn beim Anfordern des Presenters kein presentationArea angegeben wurde. Dann gilt der Viewport als Grenze.Beispiele
Presenter für ein Canvas anfordern und Bereich prüfen
const canvas = document.querySelector('#zeichenflaeche');
const initInk = async () => {
if (!('ink' in navigator)) {
console.log('Ink API wird nicht unterstützt');
return null;
}
const presenter = await navigator.ink.requestPresenter({ presentationArea: canvas });
console.log(presenter.presentationArea === canvas);
console.log(presenter.presentationArea.id);
return presenter;
};
initInk();Ohne presentationArea: Begrenzung auf den Viewport
const presenter = await navigator.ink.requestPresenter();
if (presenter.presentationArea === null) {
console.log('Tinte ist auf den Viewport begrenzt');
}Tintenspur beim Zeichnen mit pointermove aktualisieren
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
const presenter = await navigator.ink.requestPresenter({ presentationArea: canvas });
const stil = { color: 'rgb(0, 0, 200)', diameter: 4 };
canvas.addEventListener('pointermove', (event) => {
if (event.buttons !== 1) return;
// Sicherheitsprüfung: Das Event muss aus dem Bereich des Presenters stammen
if (!presenter.presentationArea.contains(event.target)) return;
const rect = canvas.getBoundingClientRect();
ctx.fillStyle = stil.color;
ctx.beginPath();
ctx.arc(event.clientX - rect.left, event.clientY - rect.top, stil.diameter / 2, 0, Math.PI * 2);
ctx.fill();
// Der Browser zeichnet die Spur ab diesem Punkt vor, bis der nächste Frame fertig ist
presenter.updateInkTrailStartPoint(event, stil);
});// Wichtig · Fallstricke
- Experimentell: Die Ink API gibt es nur in Chromium-Browsern (Chrome/Edge ab 94). Firefox und Safari unterstützen sie nicht. Prüfen Sie deshalb immer vorher mit
'ink' in navigatorund sehen Sie normales Canvas-Zeichnen als Ausweichlösung vor. - Die Eigenschaft ist schreibgeschützt. Eine Zuweisung wird ignoriert, im Strict Mode löst sie einen
TypeErroraus. Für einen anderen Bereich fordern Sie einen neuen Presenter an. - Die Begrenzung richtet sich nach der Rahmenbox (border box) des Elements zum Zeitpunkt des Zeichnens. Wird das Element per CSS verschoben oder in der Größe geändert, wird die Tinte am neuen Rahmen abgeschnitten.
- Ist
presentationAreakein gültiges, im Dokument eingebundenes Element, wird das Promise vonrequestPresenter()abgelehnt. - Die vorgezeichnete Tinte ist nur eine kurzlebige Vorschau. Den eigentlichen Strich muss die Anwendung weiterhin selbst zeichnen, sonst verschwindet er im nächsten Frame.