Element Builders – Конструкторы SVG элементов – C#

Конструкторы элементов в Aspose.SVG

Конструкторы элементов (Element Builders) – это программные конструкции или классы, предназначенные для упрощения создания или изменения элементов SVG. Эти конструкторы обычно следуют шаблонам проектирования, таким как Fluent Builder Pattern, который обеспечивает свободный и выразительный синтаксис при определении атрибутов и структуры элементов SVG.

В Aspose.SVG Builder API все конструкторы элементов, такие как SVGSVGElementBuilder, SVGGElementBuilder и другие, наследуются от основного класса SVGElementBuilder. Эта структура наследования упрощает процесс создания и изменения элементов SVG, обеспечивая согласованность и эффективность для различных типов элементов.

Конструкторы элементов предоставляют метод Build(Document document), позволяющий создавать новые элементы SVG и добавлять их в документ SVG, а также метод Build(T element) для обновления существующих SVG-элементов.

В этой статье рассматриваются Element Builders, используемые в Aspose.SVG Builder API. Вы увидите их эффективность при работе с SVG. Вы узнаете о классе SVGSVGElementBuilder, его специализированных сборщиках и о том, как они упрощают программирование SVG.

Создание новых элементов

Aspose.SVG SVG Builder API использует шаблон Fluent Builder – методологию проектирования, которая идеально соответствует требованиям простоты, ясности и универсальности при манипулировании SVG.

Шаблон Fluent Builder

В SVG Builder шаблон Fluent Builder используется для упрощения создания и обновления элементов SVG, что делает процесс интуитивно понятным и менее подверженным ошибкам. Суть этого шаблона – это методы, которые настраивают элемент SVG, а затем возвращают builder object. Такая конструкция обеспечивает согласованный и последовательный способ связывания методов, что особенно эффективно для снижения сложности, связанной с созданием элементов SVG и управлением ими.

В этом контексте лямбда-выражения используются для повышения ясности и краткости методов настройки компоновщика. Лямбда-выражения позволяют подробно, но компактно определять атрибуты и стили элементов SVG. Например, при добавлении элемента круга лямбда-выражение предоставляет встроенную читаемую конфигурацию:

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

Здесь circle => Circle.Cx(100).Cy(100).R(50).Fill(Color.Red).Stroke(Paint.None).StrokeWidth(2) – это краткий способ настройки SVG круга, таких его свойств, как координаты центра, радиус, заливка и обводка. Такой подход не только упрощает настройку элемента, но и повышает читаемость и удобство сопровождения кода.

Создать SVG с нуля

Здесь мы рассмотрим краткий и элегантный подход к созданию SVG с нуля с использованием 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    }

В примере используется шаблон Fluent Builder в SVGSVGElementBuilder для создания элементов SVG. Этот шаблон обеспечивает выразительный и удобный способ создания документов SVG по сравнению с подходом, описанным в статье Редактировать файл SVG, который больше полагается на низкоуровневые манипуляции с DOM и явную настройку атрибутов.

Текст «визуализация файла svg-from-scratch.svg»

Итак, SVG Builder API предлагает гибкий и эффективный способ создания векторной графики на C#. Используя Element Builders и Builder Pattern, вы можете упростить процесс создания SVG с нуля. Этот подход:

обеспечивает более плавный и читаемый способ создания сложных структур, что упрощает понимание и поддержку кода.
сокращает шаблонный код, как показано в примере, где установка атрибутов, таких как cx, cy, r, fill и т. д., достигается с помощью вызовов методов непосредственно в сборщике.

Редактирование SVG

Одним из мощных методов программного редактирования SVG является использование Element Builders.

Добавление новых элементов

Редактирование SVG с помощью конструкторов элементов Element Builders обеспечивает мощный и гибкий подход к программному управлению векторной графикой. В следующем примере мы берем существующий файл SVG, добавляем в него несколько элементов и сохраняем:

 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    }

В этом примере:

новый элемент <g> создается с использованием SVGGElementBuilder. Для этого элемента группы установлены такие атрибуты, как fill, stroke и stroke-width.
внутри элемента <g> элементы <circle> и <polyline> настраиваются с использованием Fluent Builder Pattern.
после настройки дочерних элементов вызывается Build(Document document) метод в SVGGElementBuilder для создания элемента <g> со всеми его дочерними элементами.
вновь созданный элемент <g> добавляется как дочерний к корневому элементу <svg> документа SVG.

На рисунке (a) показана визуализация исходного файла сircles.svg, а на рисунке (b) - изображение отредактированного файла сircles-edited.svg с добавленными элементами окружности и полилинии.

Текст «Визуализация исходного файла сircles.svg (a) и отредактированного файла сircles-edited.svg с добавленными элементами окружности и полилинии (b).»

Редактирование существующих элементов

В следующем C# примере мы обновляем существующий документ SVG, изменяя цвет заливки и обводки первого элемента SVG <circle> в документе:

 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    }

Element Builders предлагают метод Build(T element) для обновления существующих элементов SVG, позволяя изменять их атрибуты или стили. На рисунке (a) изображен исходный файл circles.svg, а на рисунке (b) показано изображение отредактированного файла circles-modified.svg с перекрашенным первым элементом круга.

Текст «Визуализация исходного файла circles.svg (a) и модифицированного файла circles-modified.svg с перекрашенным первым элементом круга (b).»

Пример использования Element builders

В следующем фрагменте кода показано, как использовать конструкторы элементов для создания документа SVG с различными элементами SVG shapes.

 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                .AddG(g => g.FontSize(20).TextAnchor(TextAnchor.End)
12                    .AddText("<rect>", y: 30)
13                    .AddText("<circle>", y: 70)
14                    .AddText("<ellipse>", y: 110)
15                    .AddText("<line>", y: 150)
16                    .AddText("<polyline>", x: 300, y: 30)
17                    .AddText("<polygon>", x: 300, y: 70)
18                    .AddText("<path>", x: 300, y: 110)
19                    )
20                .AddG(gg => gg.Fill(Color.Teal).StrokeWidth(3)
21                    .AddRect(r => r.X(35).Y(5).Width(30).Height(30))
22                    .AddCircle(c => c.Cx(50).Cy(60).R(17))
23                    .AddEllipse(e => e.Cx(50).Cy(100).Rx(25).Ry(12))
24                    .AddLine(l => l.X1(30).X2(70).Y1(140).Y2(140).Stroke(Color.Teal))
25                    )
26                .AddG(ggg => ggg.Fill(Paint.None).StrokeWidth(3).Stroke(Color.Teal).Transform(t => t.Translate(300, -160))
27                    .AddPolygon(points: new double[] { 30, 215, 90, 215, 120, 230, 70, 240, 30, 215 }, fill: Color.Teal)
28                    .AddPolyline(points: new double[] { 30, 200, 65, 170, 90, 190, 120, 180 })
29                    .AddPath(d: path => path.M(30, 275).Q(55, 250, 70, 250).T(80, 275).T(120,260))
30                    )
31            .Build(document.FirstChild as SVGSVGElement);
32        document.Save(Path.Combine(OutputDir, "svg-elements.svg"));
33    }

Text “Визуализация файла svg-elements.svg с именами и изображениями семи элементов SVG фигур.”

Конструкторы элементов предоставляют свободный и выразительный синтаксис для создания элементов SVG, улучшая читаемость кода и удобство обслуживания. В этом примере построитель элементов, такой как SVGSVGElementBuilder, используется для создания элемента SVG с атрибутами width, height и viewBox. Затем шаблон Fluent Builder используется для создания таких фигур, как прямоугольники, круги, эллипсы, линии, полилинии, многоугольники и пути.

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

В статье Редактировать файл SVG вы узнаете, как редактировать SVG с помощью библиотеки Aspose.SVG for .NET, а также рассмотрите подробные примеры C# о том, как добавлять элементы в документ SVG и редактировать их.
Обратитесь к статье Path Builder, чтобы узнать, как использовать Path Builder для программного создания путей SVG, группы команд для рисования различных контуров или фигур путем объединения линий SVG, дуг SVG и Кривые Безье.
Статья Rule Builder посвящена классу RuleBuilder, который представляет собой класс-конструктор для создания правил стиля CSS в документе SVG.
Статья Paint Builder посвящена PaintBuilder, классу-построителю для создания значений краски для элементов SVG. Этот класс используется для указания значения атрибутов stroke или fill для различных фигур и элементов SVG при заполнении их краской, узором или градиентом.

SVG Builder API Path Builder