Paint Builder – Crear patrones SVG – C#

Patrón SVG – SVG Pattern

Los patrones SVG ofrecen una forma versátil de rellenar formas y elementos en documentos SVG. Los patrones le permiten crear texturas complejas, fondos y patrones repetidos, mejorando el atractivo visual de los gráficos SVG.

Los patrones SVG son elementos gráficos reutilizables que se pueden aplicar para rellenar formas, texto y trazados en un documento SVG. Definen un patrón gráfico que se puede repetir o colocar en un área, brindando flexibilidad para crear diferentes efectos visuales. Los patrones SVG se definen utilizando el elemento <pattern>, que contiene los elementos gráficos (formas, imágenes o degradados) y los atributos que definen el patrón.

Aspose.SVG Builder API ofrece SVGPatternElementBuilder, que es una clase constructora para construir un elemento SVG <pattern>. Esta clase proporciona métodos para establecer varios atributos específicos del elemento <pattern> y crear su contenido. Además, la API SVG Builder introduce azúcar de sintaxis para refinar aún más el proceso de creación y manipulación de SVG. Esto incluye constructores anidados para varios elementos SVG, lo que proporciona una forma más intuitiva y eficiente de definir estructuras SVG complejas.

Este artículo trata sobre PaintBuilder, una clase constructora 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 cualquier pintura, patrón o degradado.

Paint Builder

PaintBuilder se utiliza para especificar el valor del trazo o relleno que se utilizan para varias formas y elementos SVG al rellenarlos con un patrón, degradado o cualquier pintura. En el siguiente ejemplo, el método PaintServerId() de la clase PaintBuilder establece el color de relleno para el servidor de pintura mediante “Id”.

using Aspose.Svg.Builder;
using System.Drawing;
using System.IO;

// Create SVG pattern with polygons and apply as fill to rectangle using C# Builder API

using (SVGDocument document = new SVGDocument())
{
    SVGSVGElement 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"));
}

En este ejemplo, primero se define un patrón usando AddPattern(), donde se combinan varios polígonos de colores para crear un patrón de relleno complejo. El método AddPattern() agrega una configuración de elemento <pattern> al constructor. El patrón recibe un identificador “estrellas”. Posteriormente, este patrón se aplica a un elemento rectangular usando el método Fill() con PaintServerId("stars"), que hace referencia al patrón definido previamente.

Crear patrones SVG

El siguiente ejemplo de código C# demuestra cómo crear patrones SVG y aplicarlos a formas dentro del documento. El código muestra el enfoque de “builder within a builder”, que utiliza múltiples clases de constructores, donde un constructor está anidado dentro de otro para facilitar la construcción de estructuras o objetos complejos y proporcionar un enfoque modular y estructurado para la creación de documentos SVG:

using Aspose.Svg.Builder;
using System.Drawing;
using System.IO;

// Create SVG patterns with reusable elements and apply them to circles using C# Builder API

using (SVGDocument document = new SVGDocument())
{
    SVGSVGElement 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"));
}

En el ejemplo, se agregan al documento SVG tres patrones diferentes, denominados Pat3a, Pat3b y Pat3c.

• Para Pat3a, un patrón se define usando el método AddPattern() dentro del método AddG(). Dentro de este patrón, se agregan cuatro rectángulos para definir las diferentes secciones del patrón en diferentes colores. Los rectángulos se colocan dentro de un espacio unitario de 20x20: un mosaico.
• Pat3b y Pat3c se definen como referencias a Pat3a, con diferentes tamaños de mosaico especificados usando los métodos Width() y Height().

La altura y el ancho de un mosaico en un elemento de patrón definen el tamaño de la unidad de patrón repetida en el documento SVG. Este tamaño determina cómo se verá el patrón cuando se aplique a formas o elementos del documento. En el patrón Pat3b, aumentar la altura y el ancho del mosaico amplía la unidad del patrón, lo que da como resultado áreas sin relleno (transparentes). En el patrón Pat3c, reducir la altura y el ancho del mosaico hace que el patrón parezca más denso, creando un efecto visual diferente.

Por lo tanto, ajustar la altura y el ancho del mosaico en un elemento SVG <pattern> le permite controlar la densidad y la repetición del patrón dentro del documento SVG y permite la creación de diversos efectos visuales.

Ver también

• El artículo Element Builders profundiza en los Element Builders utilizados en Aspose.SVG Builder API. Aprenderá sobre la clase SVGElementBuilder, sus constructores especializados y cómo simplifican la programación SVG.
• Consulte el artículo Path Builder para obtener más información sobre la clase PathBuilder, diseñada para simplificar la creación y manipulación de rutas SVG. El artículo muestra cómo Path Builder ofrece una sintaxis intuitiva para definir rutas SVG mediante programación, lo que permite a los desarrolladores agilizar el proceso de creación de formas y curvas intrincadas.
• 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.