Neue Möglichkeiten mit Chrome 65
Die CSS Paint API (auch bekannt als „CSS Custom Paint“ oder „Houdini’s Paint Worklet“) ist ab Chrome 65 standardmäßig aktiviert. Worum handelt es sich? Was kannst du tun? damit zu tun haben? Und wie funktioniert das? Na ja, lies weiter, ja ...
Mit der CSS Paint API können Sie ein Bild programmatisch generieren, wenn ein CSS-Code
erwartet ein Bild. Attribute wie background-image
oder border-image
werden normalerweise mit url()
zum Laden einer Bilddatei oder mit integriertem CSS verwendet.
Funktionen wie linear-gradient()
. Anstatt diese zu verwenden, können Sie
paint(myPainter)
, um auf ein paint-Worklet zu verweisen.
Paint-Worklet schreiben
Um ein Paint-Worklet namens myPainter
zu definieren, müssen wir ein CSS-Painting laden.
Worklet-Datei mithilfe von CSS.paintWorklet.addModule('my-paint-worklet.js')
. Dabei
können wir mit der Funktion registerPaint
eine Paint-Worklet-Klasse registrieren:
class MyPainter {
paint(ctx, geometry, properties) {
// ...
}
}
registerPaint('myPainter', MyPainter);
Innerhalb des paint()
-Callbacks können wir ctx
genauso verwenden, wie wir
CanvasRenderingContext2D
, wie wir es von <canvas>
kennen. Wenn Sie wissen, wie Sie
Zeichnen Sie in einem <canvas>
, dann können Sie in einem Pain-Worklet zeichnen. geometry
teilt uns mit,
Breite und Höhe des Canvas, das uns zur Verfügung steht. properties
Ich werde
werden wir später in diesem Artikel erläutern.
Schreiben wir als Einführungsbeispiel ein Schachbrett-Painting-Worklet und verwenden es
als Hintergrundbild einer <textarea>
. (Ich verwende einen Textbereich,
die Größe kann standardmäßig angepasst werden.):
<!-- index.html -->
<!doctype html>
<style>
textarea {
background-image: paint(checkerboard);
}
</style>
<textarea></textarea>
<script>
CSS.paintWorklet.addModule('checkerboard.js');
</script>
// checkerboard.js
class CheckerboardPainter {
paint(ctx, geom, properties) {
// Use `ctx` as if it was a normal canvas
const colors = ['red', 'green', 'blue'];
const size = 32;
for(let y = 0; y < geom.height/size; y++) {
for(let x = 0; x < geom.width/size; x++) {
const color = colors[(x + y) % colors.length];
ctx.beginPath();
ctx.fillStyle = color;
ctx.rect(x * size, y * size, size, size);
ctx.fill();
}
}
}
}
// Register our class under a specific name
registerPaint('checkerboard', CheckerboardPainter);
Wenn Sie <canvas>
in der Vergangenheit verwendet haben, sollte Ihnen dieser Code bekannt vorkommen. Weitere Informationen finden Sie unter
das Live-
Demo
hier.
Der Unterschied zur Verwendung eines üblichen Hintergrundbilds besteht darin, werden bei Bedarf neu gezeichnet, wenn der Nutzer die Größe des Textbereichs ändert. Das bedeutet, Das Hintergrundbild ist immer genau so groß, wie es sein muss, einschließlich der Kompensierung von hochauflösenden Displays.
Das ist ziemlich cool, aber auch ziemlich statisch. Würden wir eine neue das gleiche Muster, aber mit unterschiedlicher Größe, Squares? Nein.
Worklet parametrisieren
Glücklicherweise kann das Paint-Worklet auf andere CSS-Eigenschaften zugreifen.
der zusätzliche Parameter properties
ins Spiel. Indem Sie der Klasse eine statische
inputProperties
verwenden, können Sie Änderungen an allen Preisvergleichsportal-Properties abonnieren.
einschließlich benutzerdefinierter Eigenschaften. Die Werte werden Ihnen über die
properties
-Parameter.
<!-- index.html -->
<!doctype html>
<style>
textarea {
/* The paint worklet subscribes to changes of these custom properties. */
--checkerboard-spacing: 10;
--checkerboard-size: 32;
background-image: paint(checkerboard);
}
</style>
<textarea></textarea>
<script>
CSS.paintWorklet.addModule('checkerboard.js');
</script>
// checkerboard.js
class CheckerboardPainter {
// inputProperties returns a list of CSS properties that this paint function gets access to
static get inputProperties() { return ['--checkerboard-spacing', '--checkerboard-size']; }
paint(ctx, geom, properties) {
// Paint worklet uses CSS Typed OM to model the input values.
// As of now, they are mostly wrappers around strings,
// but will be augmented to hold more accessible data over time.
const size = parseInt(properties.get('--checkerboard-size').toString());
const spacing = parseInt(properties.get('--checkerboard-spacing').toString());
const colors = ['red', 'green', 'blue'];
for(let y = 0; y < geom.height/size; y++) {
for(let x = 0; x < geom.width/size; x++) {
ctx.fillStyle = colors[(x + y) % colors.length];
ctx.beginPath();
ctx.rect(x*(size + spacing), y*(size + spacing), size, size);
ctx.fill();
}
}
}
}
registerPaint('checkerboard', CheckerboardPainter);
Jetzt können wir denselben Code für alle verschiedenen Arten von Schachbrettern verwenden. Aber selbst Besser können wir uns jetzt in den Entwicklertools mit den Werten herumschlagen. bis wir den richtigen Look gefunden haben.
Browser, die Paint-Worklet nicht unterstützen
Zum Zeitpunkt der Erstellung dieses Dokuments war das Paint-Worklet nur für Chrome implementiert. Während ich dort positive Signale von allen anderen Browser-Anbietern gibt, gibt es nicht viel Fortschritt. Wenn Sie auf dem Laufenden bleiben möchten, lesen Sie Is Houdini Ready Yet? (in englischer Sprache). regelmäßig. Verwenden Sie in der Zwischenzeit das Vollbildverfahren Verbesserung, damit Ihr Code auch dann ausgeführt wird, wenn keine Unterstützung für Paint Worklet zu erstellen. Damit alles wie erwartet funktioniert, müssen Sie Ihren Code in zwei Stellen: die CSS- und die JS-Datei.
Wenn in JS das Paint-Worklet unterstützt wird, können Sie das CSS
-Objekt prüfen:
js
if ('paintWorklet' in CSS) {
CSS.paintWorklet.addModule('mystuff.js');
}
Auf der Preisvergleichsportal-Seite haben Sie zwei Möglichkeiten. Sie können @supports
verwenden:
@supports (background: paint(id)) {
/* ... */
}
Ein kompakterer Trick besteht darin, die Tatsache zu nutzen, dass CSS ungültig macht und ignoriert eine gesamte Property-Deklaration, wenn eine unbekannte Funktion darin enthalten ist. Wenn geben Sie eine Eigenschaft zweimal an – zuerst ohne Paint-Worklet und dann mit dem Paint-Worklet – Sie erhalten Progressive Enhancement:
textarea {
background-image: linear-gradient(0, red, blue);
background-image: paint(myGradient, red, blue);
}
In Browsern mit Unterstützung für Paint-Worklet wird die zweite Deklaration
background-image
überschreibt das erste. In Browsern ohne Unterstützung
Für Paint-Worklet ist die zweite Deklaration ungültig und wird verworfen.
sodass die erste Erklärung in Kraft bleibt.
CSS-Farbfüllung (Polyfill)
In vielen Fällen ist es auch möglich, die CSS Paint Polyfill um die Unterstützung von CSS Custom Paint und Paint Worklets für moderne Browser hinzuzufügen.
Anwendungsfälle
Es gibt viele Anwendungsfälle für Paint-Worklets, von denen einige offensichtlicher sind als
andere. Eine der offensichtlichsten Methoden ist die Verwendung von Paint-Worklet zur Größenreduzierung.
Ihres DOMs verwenden. Oft werden Elemente nur hinzugefügt, um Verzierungen zu kreieren.
mit CSS. In Material Design Lite kann beispielsweise die Schaltfläche
enthält mit dem Welleneffekt zwei zusätzliche <span>
-Elemente zur Implementierung des
sich ausbreiten. Bei vielen Schaltflächen kann dies eine ganze Menge
von DOM-Elementen und kann auf Mobilgeräten
zu Leistungseinbußen führen. Wenn Sie
Ripple-Effekt mit Paint-Worklet implementieren
Stattdessen haben Sie 0 zusätzliche Elemente und nur ein Paint-Worklet.
Außerdem lässt sich die Funktion viel leichter anpassen
parametrisieren.
Ein weiterer Vorteil von Paint Worklet besteht darin, dass in den meisten Szenarien eine Lösung Paint-Worklet ist in Bytes klein. Natürlich gibt es auch Kompromiss: Ihr Paint-Code wird immer dann ausgeführt, wenn die Größe des Canvas ändern. Wenn Ihr Code komplex ist und lange dauert, Verzögerung. Chrome arbeitet daran, Farb-Worklets aus dem Hauptthread zu verschieben, selbst lang andauernde Paint-Worklets nicht auf die Reaktionsfähigkeit der Haupt- Diskussions-Thread.
Für mich ist die interessanteste Idee, dass Paint-Worklet Polyfilling von CSS-Funktionen, die im Browser noch nicht verfügbar sind. Ein Beispiel wäre um konische Farbverläufe zu füllen, bis landen sie nativ in Chrome. Ein weiteres Beispiel: In einer Preisvergleichsportal-Besprechung beschlossen, dass Sie jetzt mehrere Rahmenfarben haben können. Während dieser Besprechung mein Kollege Ian Kilpatrick schrieb ein Polyfill für dieses neue CSS Paint-Worklet nutzen.
Über den Tellerrand blicken
Die meisten Menschen denken erst an Hintergrundbilder und Rahmenbilder, wenn sie
etwas über Paint-Worklet. Ein weniger intuitiver Anwendungsfall für Paint-Worklet ist
mask-image
, damit DOM-Elemente beliebige Formen haben. Beispiel:
diamond verwenden:
mask-image
nimmt ein Bild auf, das die Größe des Elements hat. Bereiche, in denen die
Maskenbild ist transparent, das Element ist transparent. Bereiche, in denen die Maske
Bild ist „undurchsichtig“, das Element „undurchsichtig“.
Jetzt in Chrome
Paint Worklet ist schon seit einiger Zeit in Chrome Canary verfügbar. Mit Chrome 65 ist standardmäßig aktiviert. Probieren Sie die neuen Möglichkeiten aus öffnet sich das Paint-Worklet und zeigt uns, was Sie gebaut haben! Weitere Anregungen finden Sie Sehen Sie sich Vincent De Oliveiras Kollektion an.