Element Builder – SVG-Elemente erstellen und bearbeiten – C#

Element-Builder in Aspose.SVG

Element Builder sind Softwarekonstrukte oder Klassen, die das Erstellen oder Ändern von SVG-Elementen erleichtern sollen. Diese Builder folgen in der Regel Entwurfsmustern wie dem Fluent Builder-Muster, das eine flüssige und ausdrucksstarke Syntax beim Definieren der Attribute und der Struktur von SVG-Elementen bietet.

In der Aspose.SVG Builder-API erben alle Element-Builder, wie etwa SVGSVGElementBuilder, SVGGElementBuilder und andere, von der Kernklasse SVGElementBuilder. Diese Vererbungsstruktur rationalisiert den Prozess der Erstellung und Änderung von SVG-Elementen und gewährleistet Konsistenz und Effizienz über verschiedene Elementtypen hinweg.

Element-Builder stellen die Methode Build(Document document) zur Verfügung, die die Erstellung neuer SVG-Elemente und deren Hinzufügung zu einem SVG-Dokument ermöglicht, sowie die Methode Build(T element) zum Aktualisieren vorhandener Elemente SVG-Elemente.

Dieser Artikel befasst sich mit den Element Buildern, die in der Aspose.SVG Builder API verwendet werden. Sie werden ihre Effizienz bei der SVG-Manipulation sehen. Sie erfahren mehr über die SVGSVGElementBuilder-Klasse, ihre speziellen Builder und wie sie die SVG-Programmierung vereinfachen.

Neue Elemente erstellen

Die Aspose.SVG SVG Builder API verwendet das Fluent Builder-Muster, eine Designmethodik, die perfekt auf den Bedarf nach Einfachheit, Klarheit und Vielseitigkeit bei der SVG-Manipulation abgestimmt ist.

Fluent Builder-Muster

In der SVG Builder API wird das Fluent Builder-Muster verwendet, um die Erstellung und Aktualisierung von SVG-Elementen zu vereinfachen und den Prozess intuitiv und weniger fehleranfällig zu machen. Der Kern dieses Musters sind Methoden, die ein SVG-Element konfigurieren und dann ein “builder object” zurückgeben. Dieses Design bietet eine konsistente und kohärente Möglichkeit, Methoden zu verknüpfen, was besonders effektiv zur Reduzierung der Komplexität bei der Erstellung und Verwaltung von SVG-Elementen beiträgt.

In diesem Zusammenhang werden Lambda-Ausdrücke verwendet, um die Klarheit und Prägnanz der Konfigurationsmethoden des Builders zu verbessern. Mit Lambda-Ausdrücken können Sie die Attribute und Stile von SVG-Elementen detailliert und dennoch kompakt definieren. Wenn Sie beispielsweise ein Kreiselement hinzufügen, stellt der Lambda-Ausdruck eine inline lesbare Konfiguration bereit:

    var svgElement = new SVGSVGElementBuilder()
        .AddCircle(circle => circle
            .Cx(100).Cy(100).R(50)
            .Fill(Color.Red).Stroke(Paint.None)
            .StrokeWidth(2))
        .Build();

Hier ist circle => circle.Cx(100).Cy(100).R(50).Fill(Color.Red).Stroke(Paint.None).StrokeWidth(2) eine prägnante Möglichkeit, die Kreise zu konfigurieren Eigenschaften wie Mittelpunkt, Radius, Füllung und Strich. Dieser Ansatz vereinfacht nicht nur die Elementkonfiguration, sondern verbessert auch die Lesbarkeit und Wartbarkeit des Codes.

Erstellen Sie SVG von Grund auf

Hier werden wir einen prägnanten und eleganten Ansatz zur Erstellung von SVGs von Grund auf mit C# erkunden.

using Aspose.Svg.Builder;
using System.Drawing;
using System.IO;
...
    using (var document = new SVGDocument())
    {
        // Create an <svg> element with specified width, height and viewBox, and add into it other required elements
        var svg = new SVGSVGElementBuilder()
            .Width(700).Height(300)
            .ViewBox(0, 0, 700, 300)

            .AddG(g => g
            .AddCircle(circle => circle.Cx(130).Cy(130).R(60).Fill(Paint.None).Stroke(Color.FromArgb(200, 0, 0)).StrokeWidth(70).StrokeDashArray(2,14))
            .AddText("I can create SVG from scratch!", x: 270, y: 140, fontSize: 30, fill: Color.Teal)
            )
            .Build(document.FirstChild as SVGSVGElement);
        
        // Save the document
        document.Save(Path.Combine(OutputDir, "svg-from-scratch.svg"));
    }

Das Beispiel verwendet ein Fluent Builder-Muster in SVGSVGElementBuilder, um die SVG-Elemente zu erstellen. Dieses Muster bietet eine ausdrucksstarke und wartbare Möglichkeit zum Generieren von SVG-Dokumenten im Vergleich zu dem im Artikel SVG-Datei bearbeiten beschriebenen Ansatz, der mehr auf DOM-Manipulation auf niedriger Ebene und expliziter Attributeinstellung basiert.

Daher bietet die SVG Builder API eine flexible und effiziente Möglichkeit, Vektorgrafiken in C# zu generieren. Durch die Nutzung der Element Builder und des Builder-Patterns können Sie den Prozess der SVG-Erstellung von Grund auf optimieren. Dieser Ansatz:

• Bietet eine flüssigere und lesbarere Möglichkeit, komplexe Strukturen zu erstellen, wodurch der Code leichter zu verstehen und zu warten ist.
• Reduziert Boilerplate-Code, wie im Beispiel zu sehen ist, in dem Einstellungsattribute wie cx, cy, r, fill usw. mit Methodenaufrufen direkt im Builder erreicht werden.

SVG bearbeiten

Eine leistungsstarke Technik zum programmgesteuerten Bearbeiten von SVGs ist die Verwendung von Element Buildern.

Neue Elemente hinzufügen

Das Bearbeiten von SVGs mithilfe von Element-Buildern bietet einen leistungsstarken und flexiblen Ansatz zur programmgesteuerten Bearbeitung von Vektorgrafiken. Im folgenden Beispiel nehmen wir eine vorhandene SVG-Datei, fügen ihr einige Elemente hinzu und speichern sie:

using Aspose.Svg.Builder;
using System.Drawing;
using System.IO;
...
    string documentPath = Path.Combine(DataDir, "circles.svg");

    using (var document = new SVGDocument(documentPath))
    {
        // Create a new <g> (group) element using SVGGElementBuilder and set attributes
        var gElement = new SVGGElementBuilder()
            .Fill(Paint.None).Stroke(Color.FromArgb(80, 132, 132)).StrokeWidth(10)

            // Add <circle> and <polyline> element configurations
            .AddCircle(c => c.Cx(350).Cy(70).R(50))
            .AddPolyline(points: new double[] { 125, 130, 275, 180, 425, 130 })
            .Build(document);

        // Append the newly created <g> element to the root <svg> element
        document.RootElement.AppendChild(gElement);

        // Save the document
        document.Save(Path.Combine(OutputDir, "circles-edited.svg"));
    }

In diesem Beispiel:

• Mit dem SVGGElementBuilder wird ein neues <g>-Element (Gruppe) erstellt. Für dieses Gruppenelement werden Attribute wie fill, stroke und stroke-width festgelegt.
• Innerhalb des <g>-Elements werden das <circle>- und das <polyline>-Element mithilfe des Fluent Builder-Muster konfiguriert.
• Sobald die untergeordneten Elemente konfiguriert sind, wird die Methode Build(Document document) auf dem SVGGElementBuilder aufgerufen, um das <g>-Element mit seinen untergeordneten Elementen zu erstellen.
• Das neu erstellte <g>-Element wird als untergeordnetes Element zum Stammelement <svg> des SVG-Dokuments hinzugefügt.

Abbildung (a) zeigt eine Visualisierung der ursprünglichen Datei circles.svg und Abbildung (b) zeigt ein Bild der bearbeiteten Datei circles-edited.svg mit hinzugefügten Kreis- und Polylinienelementen.

Vorhandene Elemente ändern

Im folgenden C#-Beispiel aktualisieren wir ein vorhandenes SVG-Dokument, indem wir die Füll- und Strichfarbe des ersten SVG-Elements <circle> im Dokument ändern:

using Aspose.Svg.Builder;
using System.Drawing;
using System.Linq;
using System.IO;
...
    string documentPath = Path.Combine(DataDir, "circles.svg");

    using (var document = new SVGDocument(documentPath))
    {
        // Find the first <circle> element in the document
        var circle = document.GetElementsByTagName("circle").First() as SVGCircleElement;

        // Modify the first <circle> element using SVGCircleElementBuilder
        new SVGCircleElementBuilder()
            .Stroke(Color.DarkRed).Fill(Color.LightGray)

            // The first <circle> element is now updated with new configurations
            .Build(circle);

        // Save the document
        document.Save(Path.Combine(OutputDir, "circles-modified.svg"));
    }

Element-Builder bieten die Methode Build(T element) zum Aktualisieren vorhandener SVG-Elemente und ermöglichen Änderungen an deren Attributen oder Stilen. Abbildung (a) zeigt die ursprüngliche Datei circles.svg und Abbildung (b) zeigt ein Bild der geänderten Datei circles-modified.svg mit dem neu eingefärbten ersten Kreiselement.

Beispiel für die Verwendung von Element Buildern

Der folgende Codeausschnitt zeigt, wie Sie mithilfe von Element-Buildern ein SVG-Dokument mit verschiedenen SVG-Formelementen erstellen.

using Aspose.Svg.Builder;
using System.Drawing;
using System.IO;
...
    var svgContent = "<svg xmlns=\"http://www.w3.org/2000/svg\"></svg>";
    using (var document = new SVGDocument(svgContent, "."))
    {
        var svg = new SVGSVGElementBuilder()
            .Width(100, LengthType.Percentage).Height(100, LengthType.Percentage)
            .ViewBox(0, 0, 800, 800)
            
                .AddG(g => g.FontSize(20).TextAnchor(TextAnchor.End)
                    .AddText("<rect>", y: 30)
                    .AddText("<circle>", y: 70)
                    .AddText("<ellipse>", y: 110)
                    .AddText("<line>", y: 150)
                    .AddText("<polyline>", x: 300, y: 30)
                    .AddText("<polygon>", x: 300, y: 70)
                    .AddText("<path>", x: 300, y: 110)
                    )
                    
                .AddG(gg => gg.Fill(Color.Teal).StrokeWidth(3)
                    .AddRect(r => r.X(35).Y(5).Width(30).Height(30))
                    .AddCircle(c => c.Cx(50).Cy(60).R(17))
                    .AddEllipse(e => e.Cx(50).Cy(100).Rx(25).Ry(12))
                    .AddLine(l => l.X1(30).X2(70).Y1(140).Y2(140).Stroke(Color.Teal))
                    )
                .AddG(ggg => ggg.Fill(Paint.None).StrokeWidth(3).Stroke(Color.Teal).Transform(t => t.Translate(300, -160))
                    .AddPolygon(points: new double[] { 30, 215, 90, 215, 120, 230, 70, 240, 30, 215 }, fill: Color.Teal)
                    .AddPolyline(points: new double[] { 30, 200, 65, 170, 90, 190, 120, 180 })
                    .AddPath(d: path => path.M(30, 275).Q(55, 250, 70, 250).T(80, 275).T(120,260))
                    )

            .Build(document.FirstChild as SVGSVGElement);
        document.Save(Path.Combine(OutputDir, "svg-elements.svg"));
    }

Element-Builder bieten eine flüssige und ausdrucksstarke Syntax zum Erstellen von SVG-Elementen und verbessern so die Lesbarkeit und Wartbarkeit des Codes. In diesem Beispiel wird der Element-Builder wie SVGSVGElementBuilder verwendet, um ein SVG-Element mit den Attributen width, height und viewBox zu erstellen. Das Fluent Builder-Muster wird dann verwendet, um Formen wie Rechtecke, Kreise, Ellipsen, Linien, Polylinien, Polygone und Pfade zu erstellen, die jeweils innerhalb von <g>-Elementen entsprechend positioniert und gestaltet werden.

Siehe auch

• Im Artikel SVG-Datei bearbeiten erfahren Sie, wie Sie SVG mit der Bibliothek Aspose.SVG für .NET bearbeiten und betrachten detaillierte C#-Beispiele zum Hinzufügen von Elementen zu einer SVG dokumentieren und bearbeiten.
• Bitte besuchen Sie den Artikel Path Builder, um zu erfahren, wie Sie Path Builder verwenden, um SVG-Pfade programmgesteuert zu erstellen, eine Gruppe von Befehlen zum Zeichnen verschiedener Umrisse oder Formen durch die Kombination von SVG-Linien, SVG-Bögen und Bezier-Kurven . – Im Artikel Rule Builder geht es um die RuleBuilder-Klasse, eine Builder-Klasse zum Erstellen von CSS-Stilregeln in einem SVG-Dokument.
• Im Artikel Paint Builder geht es um 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.