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.

 1using Aspose.Svg.Builder;
 2using System.Drawing;
 3using System.IO;
 4...
 5    using (var document = new SVGDocument())
 6    {
 7        var svg = new SVGSVGElementBuilder()
 8            .Width(100, LengthType.Percentage).Height(100, LengthType.Percentage)
 9            .ViewBox(0, 0, 400, 400)
10            .AddG(g => g
11                .AddPattern(p => p.Id("stars")
12                    .ViewBox(0, 0, 20, 20)
13                    .Width(5, LengthType.Percentage)
14                    .Height(5, LengthType.Percentage)
15                    .PatternUnits(CoordinateUnits.UserSpaceOnUse)
16                    .AddPolygon(points: new double[] { 5, 0, 7, 3, 10, 5, 7, 7, 5, 10, 3, 7, 0, 5, 3, 3 }, fill: Color.Teal)
17                    .AddPolygon(points: new double[] { 15, 0, 17, 3, 20, 5, 17, 7, 15, 10, 13, 7, 10, 5, 13, 3 }, fill: Color.DarkRed)
18                    .AddPolygon(points: new double[] { 15, 10, 17, 13, 20, 15, 17, 17, 15, 20, 13, 17, 10, 15, 13, 13 },  fill: Color.DarkBlue)
19                )
20                .AddRect(r => r.Rect(20, 40, 440, 80).Fill(pt => pt.PaintServerId("stars")))
21                )
22            .Build(document.FirstChild as SVGSVGElement);
23        document.Save(Path.Combine(OutputDir, "pattern-stars.svg"));
24    }

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

Текст «Визуализация узора “stars”.»

Создать SVG Pattern

В следующем примере кода C# показано, как создавать узоры SVG и применять их к фигурам в документе. Код демонстрирует подход «строитель внутри строителя», который использует несколько классов построителей, где один строитель вложен в другой, чтобы облегчить создание сложных объектов или структур и обеспечить модульный и структурированный подход к созданию документов SVG:

 1using Aspose.Svg.Builder;
 2using System.Drawing;
 3using System.IO;
 4...
 5    using (var document = new SVGDocument())
 6    {
 7        var svg = new SVGSVGElementBuilder()
 8            .Width(100, LengthType.Percentage).Height(100, LengthType.Percentage)
 9            .ViewBox(0, 0, 600, 600)
10            .AddG(g => g
11                .FontFamily("Arial")
12                .FontSize(10)
13                .AddPattern(p => p.Id("Pat3a")
14                    .Rect(0, 0, 20, 20)
15                    .PatternUnits(CoordinateUnits.UserSpaceOnUse)
16                    .AddRect(r => r.Rect(0, 0, 10, 10).Fill(Color.LightSlateGray))
17                    .AddRect(r => r.Rect(10, 0, 10, 10).Fill(Color.Teal))
18                    .AddRect(r => r.Rect(0, 10, 10, 10).Fill(Color.DarkRed))
19                    .AddRect(r => r.Rect(10, 10, 10, 10).Fill(Color.Gold))
20                )
21                .AddPattern(p => p.Id("Pat3b")
22                    .Href("#Pat3a")
23                    .Width(23).Height(23)
24                )
25                .AddPattern(p => p.Id("Pat3c")
26                    .Href("#Pat3a")
27                    .Width(15).Height(15)
28                )
29                .AddCircle(circle => circle.Cx(90).Cy(130).R(70).Fill(pt => pt.PaintServerId("Pat3a")))
30                .AddText(t => t.X(55).Y(50)
31                    .AddContent("Pattern #Pat3a")
32                )
33                .AddCircle(circle => circle.Cx(240).Cy(130).R(70).Fill(pt => pt.PaintServerId("Pat3b")))
34                .AddText(t => t.X(205).Y(50)
35                    .AddContent("Pattern #Pat3b")
36                )
37                .AddCircle(circle => circle.Cx(390).Cy(130).R(70).Fill(pt => pt.PaintServerId("Pat3c")))
38                .AddText(t => t.X(355).Y(50)
39                    .AddContent("Pattern #Pat3c")
40                )
41            )
42            .Build(document.FirstChild as SVGSVGElement);
43        document.Save(Path.Combine(OutputDir, "patterns.svg"));
44    }

Текст «Визуализация файла 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.

Rule Builder Сохраните документ SVG