Element Builders – Constructores de elementos SVG – C#

Constructores de elementos en Aspose.SVG

Los constructores de elementos son clases o construcciones de software diseñadas para facilitar la creación o modificación de elementos SVG. Estos constructores suelen seguir patrones de diseño, como Fluent Builder Pattern, que proporciona una sintaxis fluida y expresiva al definir los atributos y la estructura de los elementos SVG.

En la API Aspose.SVG Builder, todos los constructores de elementos, como SVGSVGElementBuilder, SVGGElementBuilder y otros, heredan de la clase principal SVGElementBuilder. Esta estructura de herencia agiliza el proceso de creación y modificación de elementos SVG, garantizando coherencia y eficiencia entre diferentes tipos de elementos.

Los creadores de elementos proporcionan el método Build(Document document), que permite la creación de nuevos elementos SVG y su adición a un documento SVG y el método Build(T element) para actualizar los existentes. Elementos SVG.

Este artículo profundiza en los constructores de elementos utilizados en la API Aspose.SVG Builder. Verás su eficiencia en la manipulación de SVG. Aprenderá sobre la clase SVGSVGElementBuilder, sus constructores especializados y cómo simplifican la programación SVG.

Creando nuevos elementos

Aspose.SVG SVG Builder API emplea Fluent Builder Pattern, una metodología de diseño que se alinea perfectamente con la necesidad de simplicidad, claridad y versatilidad en la manipulación de SVG.

Patrón de constructor fluido – Fluent Builder Pattern

En la API de SVG Builder, el patrón Fluent Builder se utiliza para simplificar la creación y actualización de elementos SVG, haciendo que el proceso sea intuitivo y menos propenso a errores. La esencia de este patrón son los métodos que configuran un elemento SVG y luego devuelven un objeto constructor. Este diseño proporciona una manera consistente y coherente de vincular métodos, lo cual es especialmente efectivo para reducir la complejidad asociada con la creación y administración de elementos SVG.

En este contexto, las expresiones lambda se utilizan para mejorar la claridad y concisión de los métodos de configuración del constructor. Las expresiones Lambda le permiten definir los atributos y estilos de los elementos SVG de forma detallada pero compacta. Por ejemplo, al agregar un elemento circular, la expresión lambda proporciona una configuración legible en línea:

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

Aquí, circle => Circle.Cx(100).Cy(100).R(50).Fill(Color.Red).Stroke(Paint.None).StrokeWidth(2) es una forma sucinta de configurar el círculo. propiedades, como su centro, radio, relleno y trazo. Este enfoque no sólo simplifica la configuración del elemento sino que también mejora la legibilidad y el mantenimiento del código.

Crear SVG desde cero

Aquí, exploraremos un enfoque conciso y elegante para crear SVG desde cero usando C#.

 1using Aspose.Svg.Builder;
 2using System.Drawing;
 3using System.IO;
 4...
 5    using (var document = new SVGDocument())
 6    {
 7        // Create an <svg> element with specified width, height and viewBox, and add into it other required elements
 8        var svg = new SVGSVGElementBuilder()
 9            .Width(700).Height(300)
10            .ViewBox(0, 0, 700, 300)
11
12            .AddG(g => g
13            .AddCircle(circle => circle.Cx(130).Cy(130).R(60).Fill(Paint.None).Stroke(Color.FromArgb(200, 0, 0)).StrokeWidth(70).StrokeDashArray(2,14))
14            .AddText("I can create SVG from scratch!", x: 270, y: 140, fontSize: 30, fill: Color.Teal)
15            )
16            .Build(document.FirstChild as SVGSVGElement);
17        
18        // Save the document
19        document.Save(Path.Combine(OutputDir, "svg-from-scratch.svg"));
20    }

El ejemplo utiliza un patrón Fluent Builder dentro de SVGSVGElementBuilder para construir los elementos SVG. Este patrón proporciona una forma expresiva y fácil de mantener para generar documentos SVG en comparación con el enfoque descrito en el artículo Editar archivo SVG, que se basa más en la manipulación DOM de bajo nivel y la configuración explícita de atributos.

Texto “visualización del archivo svg-from-scratch.svg”

Por lo tanto, SVG Builder API ofrece una forma flexible y eficiente de generar gráficos vectoriales en C#. Al aprovechar Element Builders y Builder Pattern, puede agilizar el proceso de creación de SVG desde cero. Este enfoque:

proporciona una forma más fluida y legible de crear estructuras complejas, haciendo que el código sea más fácil de entender y mantener.
reduce el código repetitivo, como se ve en el ejemplo donde la configuración de atributos como cx, cy, r, fill, etc., se logra con llamadas a métodos directamente en el constructor.

Edición de SVG

Una técnica poderosa para editar SVG mediante programación es mediante el uso de Element Builders.

Agregar nuevos elementos

La edición de SVG mediante creadores de elementos proporciona un enfoque potente y flexible para manipular gráficos vectoriales mediante programación. En el siguiente ejemplo, tomamos un archivo SVG existente, le agregamos algunos elementos y lo guardamos:

 1using Aspose.Svg.Builder;
 2using System.Drawing;
 3using System.IO;
 4...
 5    string documentPath = Path.Combine(DataDir, "circles.svg");
 6
 7    using (var document = new SVGDocument(documentPath))
 8    {
 9        // Create a new <g> (group) element using SVGGElementBuilder and set attributes
10        var gElement = new SVGGElementBuilder()
11            .Fill(Paint.None).Stroke(Color.FromArgb(80, 132, 132)).StrokeWidth(10)
12
13            // Add <circle> and <polyline> element configurations
14            .AddCircle(c => c.Cx(350).Cy(70).R(50))
15            .AddPolyline(points: new double[] { 125, 130, 275, 180, 425, 130 })
16            .Build(document);
17
18        // Append the newly created <g> element to the root <svg> element
19        document.RootElement.AppendChild(gElement);
20
21        // Save the document
22        document.Save(Path.Combine(OutputDir, "circles-edited.svg"));
23    }

En este ejemplo:

Se crea un nuevo elemento <g> (grupo) usando SVGGElementBuilder. Atributos como fill, stroke y stroke-width están establecidos para este elemento de grupo.
dentro del elemento <g>, el elemento <circle> y el elemento <polyline> se configuran usando el patrón Fluent Builder.
una vez configurados los elementos secundarios, se llama al método Build(Document document) en SVGGElementBuilder para construir el elemento <g> con sus elementos secundarios.
el elemento <g> recién creado se agrega como elemento secundario al elemento raíz <svg> del documento SVG.

La figura (a) muestra una visualización del archivo Circles.svg original y la figura (b) muestra una imagen del archivo circles-edited.svg editado con elementos de círculo y polilínea agregados.

Texto “Visualización del archivo círculos.svg original (a) y el archivo círculos-editado.svg editado con elementos de círculo y polilínea agregados (b)”.

Modificar elementos existentes

En el siguiente ejemplo de C#, actualizamos un documento SVG existente cambiando el color de relleno y trazo del primer elemento SVG <circle> del documento:

 1using Aspose.Svg.Builder;
 2using System.Drawing;
 3using System.Linq;
 4using System.IO;
 5...
 6    string documentPath = Path.Combine(DataDir, "circles.svg");
 7
 8    using (var document = new SVGDocument(documentPath))
 9    {
10        // Find the first <circle> element in the document
11        var circle = document.GetElementsByTagName("circle").First() as SVGCircleElement;
12
13        // Modify the first <circle> element using SVGCircleElementBuilder
14        new SVGCircleElementBuilder()
15            .Stroke(Color.DarkRed).Fill(Color.LightGray)
16
17            // The first <circle> element is now updated with new configurations
18            .Build(circle);
19
20        // Save the document
21        document.Save(Path.Combine(OutputDir, "circles-modified.svg"));
22    }

Los creadores de elementos ofrecen el método Build(T element) para actualizar elementos SVG existentes, permitiendo modificaciones a sus atributos o estilos. La figura (a) muestra el archivo círculos.svg original y la figura (b) muestra una imagen del archivo círculos-modificado.svg modificado con el primer elemento círculo recoloreado.

Texto “Visualización del archivo círculos.svg original (a) y el archivo círculos-modificado.svg modificado con el primer elemento círculo recoloreado (b)”.

Ejemplo de uso de creadores de elementos

El siguiente fragmento de código muestra cómo utilizar creadores de elementos para crear un documento SVG con varios elementos de forma SVG.

 1using Aspose.Svg.Builder;
 2using System.Drawing;
 3using System.IO;
 4...
 5    var svgContent = "<svg xmlns=\"http://www.w3.org/2000/svg\"></svg>";
 6    using (var document = new SVGDocument(svgContent, "."))
 7    {
 8        var svg = new SVGSVGElementBuilder()
 9            .Width(100, LengthType.Percentage).Height(100, LengthType.Percentage)
10            .ViewBox(0, 0, 800, 800)
11            
12                .AddG(g => g.FontSize(20).TextAnchor(TextAnchor.End)
13                    .AddText("<rect>", y: 30)
14                    .AddText("<circle>", y: 70)
15                    .AddText("<ellipse>", y: 110)
16                    .AddText("<line>", y: 150)
17                    .AddText("<polyline>", x: 300, y: 30)
18                    .AddText("<polygon>", x: 300, y: 70)
19                    .AddText("<path>", x: 300, y: 110)
20                    )
21                    
22                .AddG(gg => gg.Fill(Color.Teal).StrokeWidth(3)
23                    .AddRect(r => r.X(35).Y(5).Width(30).Height(30))
24                    .AddCircle(c => c.Cx(50).Cy(60).R(17))
25                    .AddEllipse(e => e.Cx(50).Cy(100).Rx(25).Ry(12))
26                    .AddLine(l => l.X1(30).X2(70).Y1(140).Y2(140).Stroke(Color.Teal))
27                    )
28                .AddG(ggg => ggg.Fill(Paint.None).StrokeWidth(3).Stroke(Color.Teal).Transform(t => t.Translate(300, -160))
29                    .AddPolygon(points: new double[] { 30, 215, 90, 215, 120, 230, 70, 240, 30, 215 }, fill: Color.Teal)
30                    .AddPolyline(points: new double[] { 30, 200, 65, 170, 90, 190, 120, 180 })
31                    .AddPath(d: path => path.M(30, 275).Q(55, 250, 70, 250).T(80, 275).T(120,260))
32                    )
33
34            .Build(document.FirstChild as SVGSVGElement);
35        document.Save(Path.Combine(OutputDir, "svg-elements.svg"));
36    }

Texto “Visualización del archivo svg-elements.svg con nombres e imágenes de los 7 elementos SVG de formas.”

Los creadores de elementos proporcionan una sintaxis fluida y expresiva para construir elementos SVG, mejorando la legibilidad y el mantenimiento del código. En este ejemplo, el generador de elementos, como SVGSVGElementBuilder, se emplea para construir un elemento SVG con los atributos width, height y viewBox. Luego, el patrón Fluent Builder se utiliza para crear formas como rectángulos, círculos, elipses, líneas, polilíneas, polígonos y trazados, cada uno de ellos posicionado y con el estilo correspondiente dentro de los elementos <g>.

Ver también

En el artículo Editar archivo SVG, puede aprender cómo editar SVG usando la biblioteca Aspose.SVG for .NET y considerar ejemplos detallados de C# sobre cómo agregar elementos a un SVG. documentarlos y editarlos.
Visite el artículo Path Builder para aprender cómo usar Path Builder para crear rutas SVG mediante programación, un grupo de comandos para dibujar varios contornos o formas combinando líneas SVG, arcos SVG y curvas Bézier.
El artículo Rule Builder trata sobre la clase RuleBuilder, que es una clase constructora para construir reglas de estilo CSS en un documento SVG.
El artículo Paint Builder trata sobre PaintBuilder, una clase de creación para crear valores de pintura para elementos SVG. Esta clase se utiliza para especificar el valor de los atributos “trazo” o “relleno” para varias formas y elementos SVG al rellenarlos con pintura, patrón o degradado.

SVG Builder API Path Builder