Paint Builder – SVG Pattern erstellen – C#

SVG Pattern

SVG Pattern (SVG-Musterung, Ornament, Mosaik) bieten eine vielseitige Möglichkeit, Formen und Elemente in SVG-Dokumenten zu füllen. Mit Mustern können Sie komplexe Texturen, Hintergründe und sich wiederholende Muster erstellen und so die visuelle Attraktivität von SVG-Grafiken verbessern.

SVG Pattern sind wiederverwendbare Grafikelemente, die zum Füllen von Formen, Text und Pfaden in einem SVG-Dokument verwendet werden können. Sie definieren ein grafisches Muster, das wiederholt oder in einem Bereich platziert werden kann und so Flexibilität bei der Schaffung unterschiedlicher visueller Effekte bietet. SVG Pattern werden mithilfe des Elements <pattern> definiert, das die grafischen Elemente (Formen, Bilder oder Verläufe) und Attribute enthält, die das Muster definieren.

Die Aspose.SVG Builder-API bietet den SVGPatternElementBuilder, eine Builder-Klasse zum Erstellen eines SVG-Elements <pattern>. Diese Klasse stellt Methoden bereit, um verschiedene Attribute speziell für das Element <pattern> festzulegen und seinen Inhalt zu erstellen. Außerdem führt die SVG Builder API Syntax Sugar ein, um den Prozess der SVG-Erstellung und -Bearbeitung weiter zu verfeinern. Dazu gehören verschachtelte Builder für verschiedene SVG-Elemente, die eine intuitivere und effizientere Möglichkeit bieten, komplexe SVG-Strukturen zu definieren.

Dieser Artikel betrifft PaintBuilder, eine Builder-Klasse zum Erstellen von Farbwerten für SVG-Elemente. Diese Klasse wird verwendet, um den Wert der Attribute stroke oder fill für verschiedene SVG-Formen und -Elemente anzugeben, wenn diese mit Farbe, Muster oder Farbverlauf gefüllt werden.

Paint Builder – Farbenbauer

Der PaintBuilder wird verwendet, um den Wert des Strichs oder der Füllung anzugeben, der für verschiedene SVG-Formen und -Elemente verwendet wird, wenn diese mit einem Muster, einem Farbverlauf oder einer beliebigen Farbe gefüllt werden. Im folgenden Beispiel legt die Methode PaintServerId() der PaintBuilder-Klasse die Farbfüllung für den Paint-Server nach Id fest.

using Aspose.Svg.Builder;
using System.Drawing;
using System.IO;

// Create SVG pattern with polygons and apply as fill to rectangle using C# Builder API

using (SVGDocument document = new SVGDocument())
{
    SVGSVGElement svg = new SVGSVGElementBuilder()
        .Width(100, LengthType.Percentage).Height(100, LengthType.Percentage)
        .ViewBox(0, 0, 400, 400)
        .AddG(g => g
            .AddPattern(p => p.Id("stars")
                .ViewBox(0, 0, 20, 20)
                .Width(5, LengthType.Percentage)
                .Height(5, LengthType.Percentage)
                .PatternUnits(CoordinateUnits.UserSpaceOnUse)
                .AddPolygon(points: new double[] { 5, 0, 7, 3, 10, 5, 7, 7, 5, 10, 3, 7, 0, 5, 3, 3 }, fill: Color.Teal)
                .AddPolygon(points: new double[] { 15, 0, 17, 3, 20, 5, 17, 7, 15, 10, 13, 7, 10, 5, 13, 3 }, fill: Color.DarkRed)
                .AddPolygon(points: new double[] { 15, 10, 17, 13, 20, 15, 17, 17, 15, 20, 13, 17, 10, 15, 13, 13 }, fill: Color.DarkBlue)
            )
            .AddRect(r => r.Rect(20, 40, 440, 80).Fill(pt => pt.PaintServerId("stars")))
            )
        .Build(document.FirstChild as SVGSVGElement);
    document.Save(Path.Combine(OutputDir, "pattern-stars.svg"));
}

In diesem Beispiel wird zunächst mit AddPattern() ein Muster definiert, bei dem verschiedene farbige Polygone kombiniert werden, um ein komplexes Füllmuster zu erstellen. Die Methode AddPattern() fügt dem Builder eine <pattern>-Elementkonfiguration hinzu. Das Muster erhält die Bezeichnung stars. Anschließend wird dieses Muster mithilfe der Methode Fill() mit PaintServerId("stars"), die auf das zuvor definierte Muster verweist, auf ein Rechteckelement angewendet.

Erstellen Sie SVG Pattern

Das folgende C#-Codebeispiel zeigt, wie SVG Pattern erstellt und auf Formen im Dokument angewendet werden. Der Code stellt den Builder-im-Builder-Ansatz dar, der mehrere Builder-Klassen verwendet, wobei ein Builder in einem anderen verschachtelt ist, um die Konstruktion komplexer Objekte oder Strukturen zu erleichtern und einen modularen und strukturierten Ansatz für die Erstellung von SVG-Dokumenten bereitzustellen:

using Aspose.Svg.Builder;
using System.Drawing;
using System.IO;

// Create SVG patterns with reusable elements and apply them to circles using C# Builder API

using (SVGDocument document = new SVGDocument())
{
    SVGSVGElement svg = new SVGSVGElementBuilder()
        .Width(100, LengthType.Percentage).Height(100, LengthType.Percentage)
        .ViewBox(0, 0, 600, 600)
        .AddG(g => g
            .FontFamily("Arial")
            .FontSize(10)
            .AddPattern(p => p.Id("Pat3a")
                .Rect(0, 0, 20, 20)
                .PatternUnits(CoordinateUnits.UserSpaceOnUse)
                .AddRect(r => r.Rect(0, 0, 10, 10).Fill(Color.LightSlateGray))
                .AddRect(r => r.Rect(10, 0, 10, 10).Fill(Color.Teal))
                .AddRect(r => r.Rect(0, 10, 10, 10).Fill(Color.DarkRed))
                .AddRect(r => r.Rect(10, 10, 10, 10).Fill(Color.Gold))
            )
            .AddPattern(p => p.Id("Pat3b")
                .Href("#Pat3a")
                .Width(23).Height(23)
            )
            .AddPattern(p => p.Id("Pat3c")
                .Href("#Pat3a")
                .Width(15).Height(15)
            )
            .AddCircle(circle => circle.Cx(90).Cy(130).R(70).Fill(pt => pt.PaintServerId("Pat3a")))
            .AddText(t => t.X(55).Y(50)
                .AddContent("Pattern #Pat3a")
            )
            .AddCircle(circle => circle.Cx(240).Cy(130).R(70).Fill(pt => pt.PaintServerId("Pat3b")))
            .AddText(t => t.X(205).Y(50)
                .AddContent("Pattern #Pat3b")
            )
            .AddCircle(circle => circle.Cx(390).Cy(130).R(70).Fill(pt => pt.PaintServerId("Pat3c")))
            .AddText(t => t.X(355).Y(50)
                .AddContent("Pattern #Pat3c")
            )
        )
        .Build(document.FirstChild as SVGSVGElement);
    document.Save(Path.Combine(OutputDir, "patterns.svg"));
}

Im Beispiel werden dem SVG-Dokument drei verschiedene Muster mit den Namen Pat3a, Pat3b und Pat3c hinzugefügt.

• Für Pat3a wird ein Muster mithilfe der Methode AddPattern() innerhalb der Methode AddG() definiert. Innerhalb dieses Musters werden vier Rechtecke hinzugefügt, um die verschiedenen Abschnitte des Musters in verschiedenen Farben zu definieren. Rechtecke werden innerhalb eines 20x20-Einheitsraums – einer Kachel – positioniert.
• Pat3b und Pat3c werden als Verweise auf Pat3a definiert, wobei unterschiedliche Kachelgrößen mithilfe der Methoden Width() und Height() angegeben werden.

Die Höhe und Breite einer Kachel in einem Musterelement definieren die Größe der wiederholten Mustereinheit im SVG-Dokument. Diese Größe bestimmt, wie das Muster aussieht, wenn es auf Formen oder Elemente im Dokument angewendet wird. Im Muster Pat3b wird durch Erhöhen der Höhe und Breite der Kachel die Mustereinheit vergrößert, was zu ungefüllten (transparenten) Bereichen führt. Beim Muster Pat3c führt die Verringerung der Höhe und Breite der Fliese dazu, dass das Muster dichter erscheint und ein anderer optischer Effekt entsteht.

Wenn Sie also die Höhe und Breite der Kachel in einem SVG-Element <pattern> anpassen, können Sie die Dichte und Wiederholung des Musters im SVG-Dokument steuern und verschiedene visuelle Effekte erstellen.

Siehe auch

• Der Artikel Element Builders befasst sich mit den Element Buildern, die in der Aspose.SVG Builder API verwendet werden. Sie erfahren mehr über die SVGElementBuilder-Klasse, ihre speziellen Builder und wie sie die SVG-Programmierung vereinfachen.
• Bitte lesen Sie den Artikel Path Builder, um mehr über die PathBuilder-Klasse zu erfahren, die die Erstellung und Bearbeitung von SVG-Pfaden vereinfachen soll. Der Artikel zeigt, wie der Path Builder eine intuitive Syntax zum programmgesteuerten Definieren von SVG-Pfaden bietet und es Entwicklern ermöglicht, den Prozess der Erstellung komplizierter Formen und Kurven zu optimieren.
• Im Artikel Rule Builder geht es um die RuleBuilder-Klasse, eine Builder-Klasse zum Erstellen von CSS-Stilregeln in einem SVG-Dokument.