Path Builder – Создать SVG путь – C#

Создайте путь SVG с помощью Aspose.SVG

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

Эта статья посвящена классу PathBuilder, который предназначен для упрощения создания путей SVG и управления ими. В статье показано, как PathBuilder предлагает интуитивно понятный синтаксис для программного определения путей SVG, что позволяет разработчикам упростить процесс создания сложных фигур и кривых.

Конструктор путей – Path Builder

SVG пути (paths) имеют основополагающее значение для создания широкого спектра фигур: от простых прямоугольников до сложных многоугольников, кривых и контуров. Пути SVG состоят из серии команд, определяющих форму фигуры. К таким командам относятся команды – moveto (M), lineto (L), closepath (Z), кривые Безье, эллиптическая дуга и другие. Path Builder обеспечивает упрощенный подход к определению путей SVG, уменьшая сложность их создания и манипулирования.

Строители внутри строителей – Builders within Builders

Шаблон «строитель внутри строителя» предполагает использование нескольких классов строителя, где один конструктор вложен в другой, чтобы облегчить создание сложных объектов или структур. В этом шаблоне внешний конструктор создает объект или контейнер более высокого уровня, а внутренний конструктор отвечает за создание компонента или подобъекта внутри этого контейнера.

В следующем фрагменте кода PathBuilder представляет собой пример построителя внутри построителя, иллюстрирующий вложенный шаблон построителя. Здесь SVGSVGElementBuilder служит внешним строителем, ответственным за создание элемента <svg>. В SVGSVGElementBuilder экземпляр PathBuilder используется для создания элемента <path>, который является элементом внутри корневого элемента <svg>.

Класс PathBuilder предлагает расширенный способ создания элементов пути. Он позволяет определять сложные пути, используя свободный синтаксис:

using Aspose.Svg.Builder;
using System.Drawing;
using System.IO;
...
    // Initialize an SVG document
    using (var document = new SVGDocument())
    {
        // Create an <svg> element with specified width, height and viewBox, and add a <path> element to it
        var svg = new SVGSVGElementBuilder()
            .Width(200).Height(200)
            .ViewBox(0, 0, 150, 150)

            .AddPath(p => p
            // 'D' method defines the 'd' attribute, which contains the path data
            .D(d => d
            // 'M' sets the starting point of the path (Move to x=50, y=50)
            .M(50, 50)
            // 'L' draws a line from the current point to the new point (Line to x=100, y=50)
            .L(100, 50)
            // Another 'L' to draw a line to a new point (Line to x=100, y=100)
            .L(100, 100)
            // 'Z' closes the path by drawing a line to the starting point
            .Z())
            // Sets the fill color of the path to teal 
            .Fill(Color.Teal))
            .Build(document.FirstChild as SVGSVGElement);

        // Save the SVG document
        document.Save(Path.Combine(OutputDir, "path.svg"));
    }

В этом примере метод AddPath() конструктора SVG используется для определения элемента <path>. Лямбда-выражение, передаваемое в метод D() класса SVGPathElementBuilder, определяет форму пути с помощью команд пути SVG, таких как M() (перейти к), L() (линия до) и Z() (закрыть путь).

Пути также могут быть определены непосредственно как строки, что позволяет интегрировать данные пути SVG в процесс построения. Метод AddPathSegment() класса PathBuilder облегчает добавление пользовательских сегментов пути к данным пути, обеспечивая гибкость в определении пути.

.D(d => d.AddPathSegment("M199 89.3 C206.6 66.6 235.8 13.2 270 30.3 286.6 38.6 298.9 59.4 310 73.3 ..."))

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

SVG TextPath

SVG может размещать текст вдоль линии, определенной элементом <path>. Это делается с помощью элемента <textPath> с атрибутом href. Текст, отображаемый вдоль кривой, в основном принимает атрибут href со ссылкой на элемент <path>. Ниже приведен пример того, как SVG textPath может быть реализован с использованием Aspose.SVG Builder API:

using Aspose.Svg.Builder;
using System.Drawing;
using System.IO;
...
    // Initialize an SVG document
    using (var document = new SVGDocument())
    {
        // Create an <svg> element with specified width, height, and viewBox, and add into it <path> elements
        var svg = new SVGSVGElementBuilder()
            .Width(1200).Height(300)
            .ViewBox(0, 0, 1200, 300)

            .AddPath(p => p.Id("Path1")
                .Fill(f => f.None()).Stroke(Color.IndianRed).Transform(t => t.Translate(-100, 40))
                .D(d => d.AddPathSegment("M 199 89 C 206 66 235 25 270 30 286 38 298 59 310 73 321 87 338 99 356 103 387 111 396 90 410 85"))
            )

            .AddPath(p => p.Id("Path2")
                .Fill(f => f.None()).Stroke(Paint.None).Transform(t => t.Translate(400, -100))
                .D(d => d.M(90, 210).Q(95, 110, 200, 200).T(350, 200))
            )

            .AddText(t => t.FontSize(30).Fill(Color.Teal)
                .AddTextPath(tp => tp
                    .Href("#Path1")
                    .AddContent("SVG textPath element")
                )
                .AddTextPath(tp => tp
                    .Href("#Path2")
                    .AddContent("SVG can place text along a path")
                )
            )
            .Build(document.FirstChild as SVGSVGElement);

        // Save the SVG document
        document.Save(Path.Combine(OutputDir, "text-path.svg"));
    }

В этом примере мы создаем два пути с разными атрибутами id. Пути создаются с использованием разных подходов: первый путь использует метод AddPathSegment(), а второй путь использует методы M(), Q() и T(). Также первый путь цветной, а второй прозрачный. Элемент SVG <textPath> ссылается на атрибут id элемента <path> в документе SVG, который позволяет отображать текст по этому предопределенному пути:

В этом примере мы также используем подход builders within builders. Внешний построитель SVGSVGElementBuilder отвечает за создание элемента <svg>, а вложенные построители используются для добавления элементов <path> и элементов <text> с элементами <textPath> внутри них. Шаблон «строители внутри строителей» упрощает создание сложных документов SVG, разбивая процесс на иерархические уровни построителей. Этот шаблон способствует инкапсуляции, читабельности и гибкости, упрощая разработчикам эффективное создание документов SVG и манипулирование ими.

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

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