Signatur
Beschreibung
Die schreibgeschützte Eigenschaft navigator.ink liefert ein Ink-Objekt. Es ist der Einstieg in die Ink API. Mit dieser API zeichnen Web-Apps Stift- und Fingereingaben spürbar schneller. Das Betriebssystem bzw. der Compositor des Browsers zeichnet dabei das letzte Stück eines Strichs selbst, und zwar schon bevor das nächste Bild der Seite fertig gerendert ist. Das nennt man delegiertes Rendern.
Wichtigste Methode des Ink-Objekts ist Ink.requestPresenter(). Sie gibt ein Promise zurück, das zu einem DelegatedInkTrailPresenter aufgelöst wird. Bei jedem pointermove-Ereignis ruft man darauf updateInkTrailStartPoint(event, style) auf. Damit teilt man dem Browser mit, bis zu welchem Punkt die Anwendung den Strich bereits selbst gezeichnet hat. Den Rest bis zur aktuellen Zeigerposition zeichnet dann das System.
Die API lohnt sich vor allem für Zeichen-, Notiz- und Whiteboard-Anwendungen auf Tablets und Geräten mit Stift. Dort fällt die Verzögerung zwischen Stiftspitze und angezeigtem Strich besonders auf. Die Anwendung zeichnet ihre Striche weiterhin selbst, zum Beispiel in ein <canvas>. Die Ink API verkürzt nur die sichtbare Verzögerung am Ende des Strichs.
Rückgabewert
Ink-Objekt des aktuellen Dokuments. In Browsern ohne Unterstützung existiert die Eigenschaft nicht, der Zugriff ergibt dann undefined.Beispiele
Unterstützung prüfen
const inkSupported = 'ink' in navigator;
console.log(inkSupported ? 'Ink API verfügbar' : 'Ink API nicht verfügbar');
console.log(navigator.ink); // Ink {} oder undefinedPresenter für ein Canvas anfordern und Striche verkürzen
const canvas = document.querySelector('#zeichenflaeche');
const ctx = canvas.getContext('2d');
const initInk = async () => {
if (!('ink' in navigator)) return null;
// Die Vorschau des Systems wird auf den Bereich des Canvas beschränkt
return navigator.ink.requestPresenter({ presentationArea: canvas });
};
const presenter = await initInk();
const style = { color: 'rgb(0, 0, 255)', diameter: 4 };
let zeichnet = false;
canvas.addEventListener('pointerdown', (e) => {
zeichnet = true;
ctx.beginPath();
ctx.moveTo(e.offsetX, e.offsetY);
});
canvas.addEventListener('pointermove', (e) => {
if (!zeichnet) return;
ctx.strokeStyle = style.color;
ctx.lineWidth = style.diameter;
ctx.lineTo(e.offsetX, e.offsetY);
ctx.stroke();
// Das System zeichnet ab diesem Punkt bis zur aktuellen Zeigerposition weiter
presenter?.updateInkTrailStartPoint(e, style);
});
canvas.addEventListener('pointerup', () => { zeichnet = false; });Presenter ohne Präsentationsbereich (ganzes Fenster)
const presenter = await navigator.ink?.requestPresenter();
console.log(presenter?.presentationArea); // null: die Vorschau gilt für den gesamten Viewport// Wichtig · Fallstricke
- Experimentell: Die API ist nur in Chromium-basierten Browsern verfügbar (ab Version 94). Firefox und Safari unterstützen sie nicht. Prüfe deshalb immer vorher mit
'ink' in navigatorund biete einen normalen Zeichenweg ohne Ink API als Rückfall an. updateInkTrailStartPoint()erwartet ein vertrauenswürdigesPointerEvent, also eines, das der Browser selbst ausgelöst hat. Mit einem selbst erzeugten Ereignis (new PointerEvent()) wirft die Methode einen Fehler.- Farbe und Durchmesser im
style-Objekt sollten zu dem passen, was die Anwendung selbst zeichnet. Sonst sieht man am Ende des Strichs einen Bruch.diametermuss größer als 0 sein. - Das Element in
presentationAreasollte im Dokument sichtbar sein. Außerhalb dieses Bereichs zeichnet das System nichts. - Die API verringert nur die sichtbare Verzögerung. Wie gut das wirkt, hängt vom Gerät und vom Betriebssystem ab.