Element Builders – Créer et modifier des éléments SVG – C#

Générateurs d’éléments dans Aspose.SVG – Element Builders

Les Element Builders sont des constructions logicielles ou des classes conçues pour faciliter la création ou la modification d’éléments SVG. Ces générateurs suivent généralement des modèles de conception, tels que le modèle Fluent Builder, qui fournissent une syntaxe fluide et expressive lors de la définition des attributs et de la structure des éléments SVG.

Dans l’API Aspose.SVG Builder, tous les générateurs d’éléments, tels que SVGSVGElementBuilder, SVGGElementBuilder et autres, héritent de la classe principale SVGElementBuilder. Cette structure d’héritage rationalise le processus de création et de modification des éléments SVG, garantissant ainsi la cohérence et l’efficacité entre les différents types d’éléments.

Les générateurs d’éléments fournissent la méthode Build(Document document), permettant la création de nouveaux éléments SVG et leur ajout à un document SVG et la méthode Build(T element) pour mettre à jour les éléments SVG existants.

Cet article se penche sur les générateurs d’éléments utilisés dans l’API Aspose.SVG Builder. Vous verrez leur efficacité dans la manipulation SVG. Vous découvrirez la classe SVGSVGElementBuilder, ses constructeurs spécialisés et comment ils simplifient la programmation SVG.

Création de nouveaux éléments

L’API Aspose.SVG SVG Builder utilise le modèle Fluent Builder, une méthodologie de conception qui correspond parfaitement au besoin de simplicité, de clarté et de polyvalence dans la manipulation SVG.

Modèle de constructeur fluide

Dans l’API SVG Builder, le modèle Fluent Builder est utilisé pour simplifier la création et la mise à jour des éléments SVG, rendant le processus intuitif et moins sujet aux erreurs. L’essence de ce modèle réside dans les méthodes qui configurent un élément SVG puis renvoient un objet constructeur. Cette conception fournit une manière cohérente et cohérente de relier les méthodes, ce qui est particulièrement efficace pour réduire la complexité associée à la création et à la gestion des éléments SVG.

Dans ce contexte, les expressions lambda sont utilisées pour améliorer la clarté et la concision des méthodes de configuration du constructeur. Les expressions Lambda vous permettent de définir les attributs et les styles des éléments SVG de manière détaillée mais compacte. Par exemple, lors de l’ajout d’un élément cercle, l’expression lambda fournit une configuration lisible en ligne:

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();

Ici, circle => circle.Cx(100).Cy(100).R(50).Fill(Color.Red).Stroke(Paint.None).StrokeWidth(2) est une manière succincte de configurer le cercle. propriétés, telles que son centre, son rayon, son remplissage et son contour. Cette approche simplifie non seulement la configuration des éléments, mais améliore également la lisibilité et la maintenabilité du code.

Créer du SVG à partir de zéro

Ici, nous explorerons une approche concise et élégante pour créer des SVG à partir de zéro en utilisant 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    }

L’exemple utilise un modèle Fluent Builder dans SVGSVGElementBuilder pour construire les éléments SVG. Ce modèle fournit un moyen expressif et maintenable de générer des documents SVG par rapport à l’approche décrite dans l’article Modifier le fichier SVG, qui s’appuie davantage sur la manipulation DOM de bas niveau et la définition d’attributs explicites.

Texte “Visualisation du fichier svg-from-scratch.svg”

Ainsi, l’API SVG Builder offre un moyen flexible et efficace de générer des graphiques vectoriels en C#. En tirant parti des Element Builders et Builder Pattern, vous pouvez rationaliser le processus de création de SVG à partir de zéro. Cette approche:

fournit un moyen plus fluide et plus lisible de créer des structures complexes, rendant le code plus facile à comprendre et à maintenir.
réduit le code passe-partout, comme le montre l’exemple où la définition d’attributs tels que cx, cy, r, fill, etc., sont obtenus avec des appels de méthode directement sur le constructeur.

Modification du SVG

Une technique puissante pour éditer par programme des SVG consiste à utiliser Element Builders.

Ajout de nouveaux éléments

L’édition de fichiers SVG à l’aide de générateurs d’éléments offre une approche puissante et flexible pour manipuler les graphiques vectoriels par programmation. Dans l’exemple suivant, nous prenons un fichier SVG existant, y ajoutons quelques éléments et l’enregistrons:

 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    }

Dans cet exemple:

un nouvel élément <g> (groupe) est créé à l’aide de SVGGElementBuilder. Des attributs tels que fill, stroke et stroke-width sont définis pour cet élément de groupe.
au sein de l’élément <g>, les éléments <circle> et <polyline> sont configurés à l’aide du Fluent Builder Pattern.
une fois les éléments enfants configurés, la méthode Build(Document document) est appelée sur le SVGGElementBuilder pour construire l’élément <g> avec ses éléments enfants.
l’élément <g> nouvellement créé est ajouté en tant qu’enfant à l’élément racine <svg> du document SVG.

La figure (a) montre une visualisation du fichier circles.svg d’origine et la figure (b) montre une image du fichier circles-edited.svg modifié avec des éléments de cercle et de polyligne ajoutés.

Texte “Visualisation du fichier circles.svg original (a) et du fichier circles-edited.svg modifié avec des éléments de cercle et de polyligne ajoutés (b).”

Modification d’éléments existants

Dans l’exemple C# suivant, nous mettons à jour un document SVG existant en modifiant la couleur de remplissage et de contour du premier élément SVG <circle> dans le document:

 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    }

Les constructeurs d’éléments proposent la méthode Build(T element) pour mettre à jour les éléments SVG existants, permettant de modifier leurs attributs ou styles. La figure (a) montre le fichier circles.svg d’origine et la figure (b) montre une image du fichier circles-modified.svg modifié avec le premier élément de cercle recoloré.

Texte “Visualisation du fichier circles.svg original (a) et du fichier circles-modified.svg modifié avec le premier élément de cercle recoloré (b).”

Exemple d’utilisation de générateurs d’éléments

L’extrait de code suivant montre comment utiliser les générateurs d’éléments pour créer un document SVG avec divers éléments de forme 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    }

Texte “Visualisation du fichier svg-elements.svg avec les noms et images des 7 éléments de forme SVG.”

Les générateurs d’éléments fournissent une syntaxe fluide et expressive pour construire des éléments SVG, améliorant ainsi la lisibilité et la maintenabilité du code. Dans cet exemple, le générateur d’éléments, tel que SVGSVGElementBuilder, est utilisé pour construire un élément SVG avec les attributs width, height et viewBox. Le modèle Fluent Builder est ensuite utilisé pour créer des formes telles que des rectangles, des cercles, des ellipses, des lignes, des polylignes, des polygones et des chemins, chacun étant positionné et stylé en conséquence dans les éléments <g>.

Voir également

Dans l’article Modifier le fichier SVG, vous apprendrez comment éditer SVG à l’aide de la bibliothèque Aspose.SVG for .NET et examinerez des exemples C# détaillés sur la façon d’ajouter des éléments à un SVG. documenter et les modifier.
Veuillez consulter l’article Path Builder pour apprendre à utiliser Path Builder pour créer par programme des chemins SVG, un groupe de commandes permettant de dessiner divers contours ou formes en combinant des lignes SVG, des arcs SVG et des courbes de Bézier.
L’article Rule Builder concerne la classe RuleBuilder, qui est une classe de construction permettant de construire des règles de style CSS dans un document SVG.
L’article Paint Builder concerne PaintBuilder, une classe de construction permettant de créer des valeurs de peinture pour les éléments SVG. Cette classe est utilisée pour spécifier la valeur des attributs stroke ou fill pour diverses formes et éléments SVG lors du remplissage avec de la peinture, un motif ou un dégradé.

SVG Builder API Path Builder