Paint Builder – Créer des SVG patterns – C#

SVG Pattern – SVG Mosaïque

Les SVG patterns (motifs SVG, mosaïque) offrent un moyen polyvalent de remplir des formes et des éléments dans des documents SVG. Les motifs vous permettent de créer des textures, des arrière-plans et des motifs répétitifs complexes, améliorant ainsi l’attrait visuel des graphiques SVG.

Les SVG patterns sont des éléments graphiques réutilisables qui peuvent être appliqués pour remplir des formes, du texte et des chemins dans un document SVG. Ils définissent un motif graphique qui peut être répété ou placé dans une zone, offrant ainsi une flexibilité dans la création de différents effets visuels. Les SVG patterns sont définis à l’aide de l’élément <pattern>, qui contient les éléments graphiques (formes, images ou dégradés) et les attributs qui définissent le motif.

L’API Aspose.SVG Builder propose le SVGPatternElementBuilder, qui est une classe de construction permettant de construire un élément SVG <pattern>. Cette classe fournit des méthodes pour définir divers attributs spécifiques à l’élément <pattern> et pour construire son contenu. En outre, l’API SVG Builder introduit du sucre de syntaxe pour affiner davantage le processus de création et de manipulation SVG. Cela inclut des générateurs imbriqués pour divers éléments SVG, offrant un moyen plus intuitif et efficace de définir des structures SVG complexes.

Cet article 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 lorsque vous les remplissez avec de la peinture, un motif ou un dégradé.

Paint Builder – Constructeur de peinture

Le PaintBuilder est utilisé pour spécifier la valeur du trait ou du remplissage utilisé pour diverses formes et éléments SVG lors du remplissage avec un motif, un dégradé ou n’importe quelle peinture. Dans l’exemple suivant, la méthode PaintServerId() de la classe PaintBuilder définit le remplissage de couleur du serveur de peinture par Id.

using Aspose.Svg.Builder;
using System.Drawing;
using System.IO;
...
    using (var document = new SVGDocument())
    {
        var 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"));
    }

Dans cet exemple, un motif est d’abord défini à l’aide de AddPattern(), où différents polygones colorés sont combinés pour créer un motif de remplissage complexe. La méthode AddPattern() ajoute une configuration d’élément <pattern> au constructeur. Le motif reçoit un identifiant “stars”. Par la suite, ce motif est appliqué à un élément rectangle à l’aide de la méthode Fill() avec PaintServerId("stars"), qui fait référence au motif défini précédemment.

Créer des SVG patterns

L’exemple de code C# suivant montre comment créer des SVG patterns et les appliquer aux formes du document. Le code présente l’approche «constructeur dans un constructeur», qui utilise plusieurs classes de constructeur, où un constructeur est imbriqué dans un autre pour faciliter la construction d’objets ou de structures complexes et fournir une approche modulaire et structurée de la création de documents SVG:

using Aspose.Svg.Builder;
using System.Drawing;
using System.IO;
...
    using (var document = new SVGDocument())
    {
        var 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"));
    }

Dans l’exemple, trois modèles différents, nommés Pat3a, Pat3b et Pat3c, sont ajoutés au document SVG.

• Pour Pat3a, un motif est défini à l’aide de la méthode AddPattern() au sein de la méthode AddG(). Au sein de ce motif, quatre rectangles sont ajoutés pour définir les différentes sections du motif dans des couleurs différentes. Les rectangles sont positionnés dans un espace unitaire de 20x20 - une tuile.
• Pat3b et Pat3c sont définis comme des références à Pat3a, avec différentes tailles de tuiles spécifiées à l’aide des méthodes Width() et Height().

La hauteur et la largeur d’une tuile dans un élément de motif définissent la taille de l’unité de motif répétée dans le document SVG. Cette taille détermine l’apparence du motif lorsqu’il est appliqué aux formes ou aux éléments du document. Dans le motif Pat3b, l’augmentation de la hauteur et de la largeur du carreau agrandit l’unité du motif, ce qui entraîne des zones non remplies (transparentes). Dans le motif Pat3c, la réduction de la hauteur et de la largeur du carreau donne un aspect plus dense au motif, créant ainsi un effet visuel différent.

Ainsi, ajuster la hauteur et la largeur de la vignette dans un élément SVG <pattern> vous permet de contrôler la densité et la répétition du motif dans le document SVG et permet la création de divers effets visuels.

Voir également

• L’article Element Builders se penche sur les Element Builders utilisés dans l’API Aspose.SVG Builder. Vous découvrirez la classe SVGElementBuilder, ses constructeurs spécialisés et comment ils simplifient la programmation SVG.
• Veuillez consulter l’article Path Builder pour en savoir plus sur la classe PathBuilder, conçue pour simplifier la création et la manipulation des chemins SVG. L’article montre comment Path Builder offre une syntaxe intuitive pour définir des chemins SVG par programme, permettant aux développeurs de rationaliser le processus de création de formes et de courbes complexes.
• 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.