CSS Paint API: Ein CSS-ähnliches Zeichenbrett

.Kasten {
    Breite: 180px; Höhe: 180px;
    /* transparent-grid - nenne dich selbst*/
    Hintergrundbild: Farbe (transparentes Raster);
}

wenn (Fenster.CSS) {
    CSS.paintWorklet.addModule('paint-grid.js');
}

// transparent-grid-Benennung und CSS-Korrespondenz registerPaint('transparent-grid', class {
    malen(Kontext, Größe) {
       // Hier ist der Zeichencode….
    }
});

registerPaint('abc', Klasse {
    paint(Kontext, Größe, Eigenschaften) {
       // Der Zeichencode kommt hier hin...
    }
});

Größe

size ist ein Objekt, das die Zeichnungsgröße enthält. Die Datenstruktur ist wie folgt:

{
    Breite: 180,
    Höhe: 180
}

Die Größe der size wird durch die Größe background-size beeinflusst. Daher können Sie für wiederholte Hintergründe background-repeat verwenden, um eine Kachelschleife auszuführen, ohne den gezeichneten JS-Code in einer Schleife ausführen zu müssen. Beispielsweise kann der im Folgenden gezeigte Demo-Effekt auch auf diese Weise erzielt werden. CSS-Teil:

.Kasten {
    Breite: 180px; Höhe: 180px;
    Hintergrundbild: Farbe (transparentes Raster);
    Hintergrundgröße: 16px 16px;
}

Dann müssen Sie in paint-grid.js nur Weiß-Grau-Grau-Weiß ausfüllen, vier Gitter reichen aus, es ist keine Schleife erforderlich. Eigenschaften können verwendet werden, um die erhaltenen CSS-Eigenschaften und Eigenschaftswerte abzurufen, einschließlich CSS-Variablenwerten und einigen anderen Parametern.

Sehen heißt glauben, klicken Sie hier: CSS Paint API zeichnet ein transparentes Raster als Hintergrunddemo (funktioniert derzeit nur mit Chrome)

Die Wirkung ist wie folgt:

Der vollständige Zeichencode in paint-grid.js lautet wie folgt:

registerPaint('transparentes Raster', Klasse {
    malen(Kontext, Größe) {
        // Zwei Gitterfarben var color1 = '#fff', color2 = '#eee';
        // Rastergröße var units = 8;
        // Schleife durch die horizontale Achse for (var x = 0; x < size.width; x += units) {
            für (var y = 0; y < Größe.Höhe; y += Einheiten) {
                context.fillStyle = (x + y) % (Einheiten * 2) === 0 ? Farbe1 : Farbe2;
                Kontext.fillRect(x, y, Einheiten, Einheiten);
            }
        }
    }
});

Auffüllen:
Für sich wiederholende Hintergründe wie Gitter können Sie background-repeat verwenden, um sie gekachelt und in Schleife laufen zu lassen. Sie müssen den gezeichneten JS-Code nicht in eine Schleife einfügen, aber Sie müssen background-size verwenden, um die Zeichengröße zu ändern. Der obige Demo-Effekt kann beispielsweise auch folgendermaßen erzielt werden, CSS-Teil:

.Kasten {
    Breite: 180px; Höhe: 180px;
    Hintergrundbild: Farbe (transparentes Raster);
    Hintergrundgröße: 16px 16px;
}

Dann müssen Sie in paint-grid.js nur Weiß-Grau-Grau-Weiß ausfüllen, vier Gitter reichen aus, es ist keine Schleife erforderlich.

registerPaint('transparentes Raster', Klasse {
    malen(Kontext, Größe) {
        // Zwei Gitterfarben var color1 = '#fff', color2 = '#eee';
        // Zwei weiße Gitter context.fillStyle = color1;
        Kontext.fillRect(0, 0, 8, 8);
        Kontext.fillRect(8, 8, 8, 8);
        // Zwei graue Gitter context.fillStyle = color1;
        Kontext.fillRect(0, 4, 8, 8);
        Kontext.fillRect(4, 0, 8, 8);
    }
});

Seien Sie verständlicher.

3. CSS-Variablen lassen die Paint-API glänzen

Das obige Beispiel zeigt die grundlegende Verwendung der CSS Paint API. Obwohl es modern aussieht, spiegelt es jedoch nicht die herausragenden Funktionen der CSS Paint API wider.

Überlegen Sie einmal: Wenn ich JS plus Canvas-API direkt verwende, um ein Gittermuster zu zeichnen, es in Base64 zu konvertieren und es direkt als Hintergrundbild des Elements anzuzeigen, hätte ich dann nicht den gleichen Effekt und die Kompatibilität wäre besser (IE9+ wird unterstützt) und alle Canvas-APIs könnten ohne Einschränkungen verwendet werden? Im Vergleich dazu gibt es absolut keinen Grund, die CSS Paint API zu verwenden!

Das stimmt! Wenn wir nur einen statischen Hintergrund benötigen, ist es besser, ihn direkt auf Canvas zu zeichnen und ihn dann in ein Base64-Bild umzuwandeln (
toDataURL()-Methode) oder Blob-Bild (toBlob()-Methode).

Der Vorteil der CSS Paint API besteht darin, dass das Rendering als CSS-Eigenschaftswert in Echtzeit erfolgt und automatisch mit dem Browser neu gezeichnet wird. Solange unsere Zeichnung mit CSS-Variablen verknüpft ist, werden daher alle Rendering-Effekte in Echtzeit aktualisiert und neu gezeichnet, was großartig ist!

Wenn wir weiterhin das obige Beispiel eines transparenten Rasters verwenden, können wir die Rasterfarbe und -größe wie folgt als CSS-Variablen extrahieren:

.Kasten {
    Breite: 180px; Höhe: 180px;
    --Farbe1: #fff;
    --Farbe2: #eee;
    --Einheiten: 8;
    Hintergrund: Farbe (benutzerdefiniertes Raster);
}

Wir können diese definierten Variablen beim Zeichnen erhalten, wie unten gezeigt:

registerPaint('custom-grid', Klasse {
    // 3 Variablen abrufen static get inputProperties() {
        zurückkehren [
            '--Farbe1',
            '--Farbe2',
            '--Einheiten'
        ]
    }
    paint(Kontext, Größe, Eigenschaften) {
        // Zwei Rasterfarben var color1 = Properties.get('--color1').toString();
        var color2 = Eigenschaften.get('--color2').toString();
        // Rastergröße var units = Number(properties.get('--units'));
        // Zeichencode, derselbe wie zuvor ...
    }
});

Der statische Effekt ist der gleiche:

Wenn wir jedoch den im CSS-Code definierten Variablenwert ändern, können wir den Änderungseffekt des Paint-Hintergrundbildes in Echtzeit sehen (siehe GIF unten):

Sehen heißt glauben. Sie können hier klicken: CSS-Variablen plus Paint-API zum Zeichnen einer transparenten Rasterdemo

Es ist kein zusätzlicher Timer erforderlich, die Echtzeitwiedergabe und -steuerung ist sehr komfortabel.

Mit der CSS Properties & Values ​​API können wir alle Variablen wie --units als gültige CSS-Eigenschaften registrieren. Dann können wir transition und animation verwenden, um die Bewegung und Animation des Paint-Hintergrundbilds mit reinem CSS zu steuern, und der Effekt schwebender Wolken auf der Schaltfläche ist überhaupt kein Problem.

Dieser Fall wird später vorgestellt.

Houdini, kompatibel mit anderen

Die in diesem Artikel vorgestellte CSS Paint API ist Teil von CSS Houdini, und die am Ende erwähnte CSS Properties & Values ​​​​API ist auch Teil der derzeit von Chrome unterstützten API. CSS Houdini kann CSS-Eigenschaften, Layout usw. anpassen und sein Zukunftspotenzial ist grenzenlos.

Wenn Sie die CSS Paint API in einem tatsächlichen Projekt verwenden möchten, müssen Sie aufgrund von Kompatibilitätsproblemen auch eine Kompatibilitätsverarbeitung durchführen, zum Beispiel:

.Kasten {
    Breite: 180px; Höhe: 180px;
    Hintergrund: URL (Daten: Bild/png; Base64, iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAAf8/9hAAAAMElEQVQ4T2P8////fwY84P379/ikGRhHDRgWYfDu3Tu86UBQUBB/Ohg1gIFx6IcBABlfVjmYTYi7AAAAAElFTkSuQmCC);
    Hintergrund: Farbe (transparentes Gitter, was auch immer);
}

Die CSS Paint API eignet sich besser für dynamische Szenen und zum Erfüllen von Anforderungen, die Zeichnen und Rendern in Echtzeit erfordern. Wenn es sich um eine rein statische Anzeige handelt, kann dies direkt mit JS plus Canvas erreicht werden. Es besteht keine Notwendigkeit, Technologie nur um der Technologie willen einzusetzen.

Es gibt viele Dinge, die man mit CSS Houdini und den damit verbundenen neuen Technologien ausprobieren kann. Ich werde in Zukunft mehr darüber vorstellen. Dieser Artikel endet hier. Vielen Dank fürs Lesen!

Referenzdokumentation

https://www.w3.org/TR/css-paint-api-1/https://css-houdini.rocks/

Zum Schluss möchte ich noch etwas anderes ansprechen, das Sie vielleicht interessiert. Um den transparenten Gittereffekt in diesem Artikel zu erzielen, können Sie den CSS- background am besten direkt zeichnen und dabei lineare Farbverläufe und mehrere CSS3-Hintergründe verwenden.

Der Code lautet wie folgt:

.Kasten {
    Breite: 180px; Höhe: 180px;
    Hintergrundfarbe: #fff;
    Hintergrundbild: linearer Farbverlauf (45 Grad, #eee 25 %, transparent 25 %, transparent 75 %, #eee 75 %, #eee), linearer Farbverlauf (45 Grad, #eee 25 %, transparent 25 %, transparent 75 %, #eee 75 %, #eee);
    Hintergrundgröße: 16px 16px;
    Hintergrundposition: 0 0, 8px 8px;
}

Der Echtzeiteffekt ist wie folgt:

Die Größensteuerung ist sehr praktisch und unterstützt natürlich animation .

Bei diesem Artikel handelt es sich um einen Originalartikel. Die Wissenspunkte werden regelmäßig aktualisiert und einige Fehler werden korrigiert. Behalten Sie daher beim Nachdruck die Originalquelle bei, um die Nachverfolgung zu erleichtern, nicht durch veraltetes und fehlerhaftes Wissen in die Irre geführt zu werden und ein besseres Leseerlebnis zu haben.
Adresse dieses Artikels: https://www.zhangxinxu.com/wordpress/?p=8204

Dies ist das Ende dieses Artikels über die CSS Paint API, das Zeichenbrett der CSS-Welt. Weitere relevante Inhalte zur CSS Paint API finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!