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. Например, при добавлении элемента круга лямбда-выражение предоставляет встроенную читаемую конфигурацию:

    var svgElement = new SVGSVGElementBuilder()
        .AddCircle(circle => circle
            .Cx(100).Cy(100).R(50)
            .Fill(Color.Red).Stroke(Paint.None)
            .StrokeWidth(2))
        .Build();

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

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

Здесь мы рассмотрим краткий и элегантный подход к созданию SVG с нуля с использованием C#:

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

    // Create SVG from scratch in C# using Builder API

    // Create an <svg> element with specified width, height and viewBox, and add into it other required elements
    SVGSVGElement svg = new SVGSVGElementBuilder()
        .Width(700).Height(300)
        .ViewBox(0, 0, 700, 300)

        .AddG(g => g
        .AddCircle(circle => circle.Cx(130).Cy(130).R(60).Fill(Paint.None).Stroke(Color.FromArgb(200, 0, 0)).StrokeWidth(70).StrokeDashArray(2, 14))
        .AddText("I can create SVG from scratch!", x: 270, y: 140, fontSize: 30, fill: Color.Teal)
        )
        .Build(document.FirstChild as SVGSVGElement);

    // Save the document
    document.Save(Path.Combine(OutputDir, "svg-from-scratch.svg"));
}

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

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

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

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

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

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

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

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

// Add multiple shapes (circle and polyline) to an existing SVG document using SVG Builder

string documentPath = Path.Combine(DataDir, "circles.svg");

// Initialize an SVG document
using (SVGDocument document = new SVGDocument(documentPath))
{
    // Create a <circle> element with attributes
    SVGCircleElement circle = new SVGCircleElementBuilder()
     .Cx(350).Cy(70).R(50).Fill(Paint.None).Stroke(Color.FromArgb(80, 132, 132)).StrokeWidth(10)
     .Build(document);

    // Append the newly created <circle> element to the root <svg> element
    document.RootElement.AppendChild(circle);

    // Create a <polyline> element with attributes
    SVGPolylineElement polyline = new SVGPolylineElementBuilder()
    .Points(new double[] { 125, 130, 275, 180, 425, 130 }).Stroke(Color.FromArgb(80, 132, 132)).Fill(Paint.None).StrokeWidth(10)
    .Build(document);

    // Append the newly created <polyline> element to the root <svg> element
    document.RootElement.AppendChild(polyline);

    // Save the document
    document.Save(Path.Combine(OutputDir, "circles-edited.svg"));
}

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

• новый элемент <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 с добавленными элементами окружности и полилинии.

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

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

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

// Modify an existing SVG element in C# using SVG Builder

string documentPath = Path.Combine(DataDir, "circles.svg");

// Initialize an SVG document
using (SVGDocument document = new SVGDocument(documentPath))
{
    // Assume an existing SVG element is part of the document
    SVGCircleElement circle = document.GetElementsByTagName("circle").First() as SVGCircleElement;

    // Modify the first <circle> element using SVGCircleElementBuilder
    new SVGCircleElementBuilder()
        .Stroke(Color.DarkRed).Fill(Color.LightGray)

        // The first <circle> element is now updated with new configurations
        .Build(circle);

    // Save the document
    document.Save(Path.Combine(OutputDir, "circles-modified.svg"));
}

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

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

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

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

// Create all basic SVG shapes programmatically in C# using SVG Builder

string svgContent = "<svg xmlns=\"http://www.w3.org/2000/svg\"></svg>";
using (SVGDocument document = new SVGDocument(svgContent, "."))
{
    SVGSVGElement svg = new SVGSVGElementBuilder()
        .Width(100, LengthType.Percentage).Height(100, LengthType.Percentage)
        .ViewBox(0, 0, 800, 800)

            .AddG(g => g.FontSize(20).TextAnchor(TextAnchor.End)
                .AddText("<rect>", y: 30)
                .AddText("<circle>", y: 70)
                .AddText("<ellipse>", y: 110)
                .AddText("<line>", y: 150)
                .AddText("<polyline>", x: 300, y: 30)
                .AddText("<polygon>", x: 300, y: 70)
                .AddText("<path>", x: 300, y: 110)
                )

            .AddG(gg => gg.Fill(Color.Teal).StrokeWidth(3)
                .AddRect(r => r.X(35).Y(5).Width(30).Height(30))
                .AddCircle(c => c.Cx(50).Cy(60).R(17))
                .AddEllipse(e => e.Cx(50).Cy(100).Rx(25).Ry(12))
                .AddLine(l => l.X1(30).X2(70).Y1(140).Y2(140).Stroke(Color.Teal))
                )
            .AddG(ggg => ggg.Fill(Paint.None).StrokeWidth(3).Stroke(Color.Teal).Transform(t => t.Translate(300, -160))
                .AddPolygon(points: new double[] { 30, 215, 90, 215, 120, 230, 70, 240, 30, 215 }, fill: Color.Teal)
                .AddPolyline(points: new double[] { 30, 200, 65, 170, 90, 190, 120, 180 })
                .AddPath(d: path => path.M(30, 275).Q(55, 250, 70, 250).T(80, 275).T(120, 260))
                )

        .Build(document.FirstChild as SVGSVGElement);
    document.Save(Path.Combine(OutputDir, "svg-elements.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 при заполнении их краской, узором или градиентом.