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.
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 comofill
,stroke
ystroke-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
) enSVGGElementBuilder
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.
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.
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 }
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.