Paint Builder – Создание SVG узора (pattern) – C#

SVG Pattern

SVG Pattern (SVG узор, мозайка) предлагает универсальный способ заполнения фигур и элементов в документах SVG. Узоры позволяют создавать сложные текстуры, фоны и повторяющиеся графические шаблоны, повышая визуальную привлекательность графики SVG.

SVG Patterns – это графические элементы многократного использования, которые можно применять для заполнения фигур, текста и контуров в документе SVG. Они определяют графический узор, который можно повторять или размещать по всей площади, обеспечивая гибкость в создании различных визуальных эффектов. SVG Patterns определяются с помощью элемента <pattern>, который содержит другие графические элементы (фигуры, изображения или градиенты) и атрибуты, определяющие узор.

Aspose.SVG Builder API предлагает SVGPatternElementBuilder, который представляет собой класс-конструктор для создания элемента SVG <pattern>. Этот класс предоставляет методы для установки различных атрибутов, специфичных для элемента <pattern>, и для создания его содержимого. Кроме того, SVG Builder API представляет синтаксический сахар для дальнейшего совершенствования процесса создания и манипулирования SVG. Сюда входят вложенные построители для различных элементов SVG, обеспечивающие более интуитивно понятный и эффективный способ определения сложных структур SVG.

Эта статья посвящена PaintBuilder, классу-строителю для создания значений красок рисования для элементов SVG. Этот класс используется для указания значения атрибутов stroke или fill для различных фигур и элементов SVG при заполнении их краской, узором или градиентом.

Paint Builder

PaintBuilder используется для указания значения обводки или заливки, которые используются для различных фигур и элементов SVG при заполнении их узором, градиентом или любой краской. В следующем примере метод PaintServerId() класса PaintBuilder устанавливает цветовую заливку для сервера рисования по 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"));
}

В этом примере узор сначала определяется с помощью метода AddPattern(), где полигоны разных цветов комбинируются для создания сложного узора заливки. Метод AddPattern() добавляет в построитель конфигурацию элемента <pattern>. Узору присвоен идентификатор stars. Впоследствии этот узор применяется к прямоугольному элементу с использованием метода Fill() с PaintServerId("stars"), который ссылается на ранее определенный узор.

Создать SVG Pattern

В следующем примере кода C# показано, как создавать узоры SVG и применять их к фигурам в документе. Код демонстрирует подход «строитель внутри строителя», который использует несколько классов построителей, где один строитель вложен в другой, чтобы облегчить создание сложных объектов или структур и обеспечить модульный и структурированный подход к созданию документов 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"));
}

В этом примере в документ SVG добавляются три разных узора с именами Pat3a, Pat3b и Pat3c.

• Для Pat3a узор определяется с помощью метода AddPattern() внутри метода AddG(). В этот узор добавлены четыре прямоугольника, чтобы обозначить различные части узора разными цветами. Каждый прямоугольник расположен на плитке - в пространстве размером 20x20.
• Pat3b и Pat3c определяются как ссылки на Pat3a, при этом разные размеры плиток указываются с помощью методов Width() и Height().

Высота и ширина плитки в элементе узора определяют размер повторяющейся единицы узора в документе SVG. Этот размер определяет, как будет выглядеть узор при применении к фигурам или элементам документа. В узоре Pat3b увеличение высоты и ширины плитки увеличивает единицу узора, что приводит к появлению незаполненных (прозрачных) областей. В узоре Pat3c уменьшение высоты и ширины плитки делает узор более плотным, создавая другой визуальный эффект. Таким образом, регулировка высоты и ширины плитки в элементе SVG <pattern> позволяет вам контролировать плотность и повторение узора в документе SVG и позволяет создавать разнообразные визуальные эффекты.

Смотрите также

• В статье Element Builders подробно рассматриваются конструкторы элементов, используемые в SVG Builder API. Вы узнаете о классе SVGElementBuilder, его специализированных сборщиках и о том, как они упрощают программирование SVG.
• Обратитесь к статье Path Builder, чтобы узнать больше о классе PathBuilder, предназначенном для упрощения создания и управления путями SVG. В статье показано, как PathBuilder предлагает интуитивно понятный синтаксис для программного определения путей SVG, что позволяет разработчикам упростить процесс создания сложных фигур и кривых.
• Статья Rule Builder посвящена классу RuleBuilder, который представляет собой класс-конструктор для создания правил стиля CSS в документе SVG.