Path Builder - создание SVG paths в C#

Создание SVG Path с Aspose.SVG

SVG paths - одна из самых мощных возможностей SVG для создания пользовательской векторной графики, кривых, контуров и сложных фигур. С помощью Aspose.SVG Builder API разработчики могут программно создавать SVG path elements в C# с читаемым fluent syntax вместо ручного написания строк SVG path data.

В этой статье объясняется, как создавать SVG paths в C#, программно строить сложную векторную графику и использовать SVG text paths с Aspose.SVG for .NET.

Path Builder

Класс PathBuilder упрощает создание SVG paths, предоставляя методы для распространенных команд SVG path, таких как M (move to - переместить в точку), L (line to - провести линию к точке), C (cubic Bezier curve - кубическая кривая Безье), Q (quadratic Bezier curve - квадратичная кривая Безье), A (arc - дуга) и Z (close path - закрыть контур).

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

SVG paths обычно используются для:

• векторных иллюстраций;
• пользовательских фигур;
• иконок;
• графиков и диаграмм;
• кривых и контуров;
• эффектов text path.

Builders within Builders

SVG Builder API вводит синтаксический сахар, который дополнительно упрощает процесс создания SVG и управления им. Сюда входят вложенные builders для различных SVG-элементов, которые обеспечивают более интуитивный и эффективный способ определения сложных SVG-структур.

Паттерн “builder within a builder” предполагает использование нескольких классов builder, когда один builder вложен в другой, чтобы упростить построение сложных объектов или структур. В этом паттерне внешний builder создает объект или контейнер более высокого уровня, а внутренний builder отвечает за создание компонента или вложенного объекта внутри этого контейнера.

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

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

// Create an SVG path element with line commands programmatically in C# using SVG Path Builder

// Initialize an SVG document
using (SVGDocument document = new SVGDocument())
{
    // Create an <svg> element with specified width, height and viewBox, and add a <path> element to it
    SVGSVGElement 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"));
}

Как работает Path

В этом примере метод AddPath() SVG builder используется для определения элемента <path>. Метод D() задает SVG path data с помощью команд SVG path. В этом примере:

• M(50, 50) перемещает курсор рисования в начальную точку;
• L(100, 50) создает отрезок линии;
• Z() закрывает path, соединяя последнюю точку с начальной.

Fluent syntax упрощает генерацию SVG paths и делает определения path более удобными для чтения и сопровождения.

SVG Path Commands, поддерживаемые PathBuilder

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

Command	Relative Command	Описание
M	m	Переместить текущую точку в новую позицию
L	l	Нарисовать прямую линию к точке
H	h	Нарисовать горизонтальную линию
V	v	Нарисовать вертикальную линию
C	c	Нарисовать кубическую кривую Безье
S	s	Нарисовать гладкую кубическую кривую Безье
Q	q	Нарисовать квадратичную кривую Безье
T	t	Нарисовать гладкую квадратичную кривую Безье
A	a	Нарисовать эллиптическую дугу
Z	z	Закрыть текущий path

Добавление пользовательских SVG Path Data

Path data также можно добавлять напрямую в виде строки с помощью метода AddPathSegment().

.D(d => d.AddPathSegment(
    "M199 89 C206 66 235 25 270 30 286 38 298 59 310 73"
))

Этот подход полезен при импорте существующих SVG path data или при работе с SVG-графикой, сгенерированной внешними средствами.

Создание SVG Curves и Bezier Paths

SVG paths поддерживают квадратичные и кубические кривые Безье для создания плавной векторной графики и сложных контуров.

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

using (SVGDocument document = new SVGDocument())
{
    // Создайте элемент <svg> с заданными width, height и viewBox и добавьте в него элемент <path>
    SVGSVGElement svg = new SVGSVGElementBuilder()
        .Width(500).Height(500)
        .ViewBox(0, 0, 400, 400)

        .AddPath(p => p
            .D(d => d
            .M(80, 210)
            .Q(95, 110, 200, 200)
            .T(350, 200)
        )
        // Задайте красный цвет заливки для path
        .Fill(Color.Red))
        .Build(document.FirstChild as SVGSVGElement);

    // Сохраните SVG-документ
    document.Save(Path.Combine(OutputDir, "curve-path.svg"));
}

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

• Q() создает квадратичную кривую Безье;
• T() автоматически продолжает гладкую кривую.

Команды кривых часто используются для иллюстраций, графиков, подписей и декоративной SVG-графики.

SVG TextPath

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

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

// Create SVG text path in C# using SVG Builder

// Initialize an SVG document
using (SVGDocument document = new SVGDocument())
{
    // Create an <svg> element with specified width, height, and viewBox, and add into it <path> elements
    SVGSVGElement 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(80, 210).Q(95, 110, 200, 200).T(400, 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"));
}

В примере мы создаем два paths с разными атрибутами id. Paths создаются разными способами: первый path использует метод AddPathSegment(), а второй path использует методы M(), Q() и T(). Кроме того, первый path окрашен, а второй прозрачен. SVG-элемент <textPath> ссылается на атрибут id элемента <path> в SVG-документе, что позволяет отображать текст вдоль этого заранее определенного path:

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

Частые ошибки и исправления

Проблема	Возможная причина	Рекомендуемое исправление
SVG path не виден	Отсутствуют стили fill или stroke	Примените Fill() или Stroke() к элементу path
Форма path выглядит незавершенной	Path не закрыт	Используйте команду Z(), чтобы закрыть path
Текст не следует вдоль кривой	Неверная ссылка на path	Убедитесь, что Href() соответствует значению Id()
Кривые выглядят искаженными	Неверные координаты контрольных точек	Настройте контрольные точки кривой Безье
Импортированные SVG path data отображаются неверно	Недопустимый синтаксис SVG path	Проверьте строку SVG path перед импортом

Краткие рецепты

1. Создать простой треугольник

using (SVGDocument document = new SVGDocument())
{
    SVGSVGElement svg = new SVGSVGElementBuilder()
        .Width(200).Height(200)
        .ViewBox(0, 0, 150, 150)
        .AddPath(p => p
            .D(d => d
            .M(50, 150)
            .L(150, 150)
            .L(100, 50)
            .Z())
        .Fill(Color.Teal))
        .Build(document.FirstChild as SVGSVGElement);
    document.Save("triangle.svg");
}

2. Добавить сегмент path

    .AddPath(p => p
        .Fill(Color.IndianRed)
        .D(d => d.AddPathSegment("M10 75 Q150 0 290 75"))
        )

3. Объединить несколько сегментов path

    .AddPath(p => p
    .Fill(Color.CadetBlue)
    .Stroke(Color.Red)
    .StrokeWidth(2)
    .D(d => d
        .AddPathSegment("M40 120")
        .AddPathSegment("C70 20 140 20 170 120")
        .AddPathSegment("S270 220 300 120")
        .AddPathSegment("Q250 180 170 170")
        .AddPathSegment("Q90 160 40 120")
        )
    )

Примечание: Первый рецепт является полным примером. Остальные рецепты - это фрагменты, которые следует включать в полный процесс создания SVG-документа.

FAQ

1. PathBuilder лучше, чем ручное написание строк SVG path?
Для сложной SVG-графики PathBuilder обычно проще сопровождать и отлаживать, чем вручную объединять строки SVG path. Fluent-команды path повышают читаемость и снижают риск некорректного синтаксиса SVG path.

2. Почему SVG paths часто используются вместо базовых фигур?
SVG paths обеспечивают гораздо большую гибкость, чем простые элементы, такие как <rect> или <circle>. Один path может представлять очень сложную векторную графику, кривые и составные фигуры.

3. Можно ли преобразовать существующие SVG path data в команды PathBuilder?
Да. Существующие значения атрибута SVG d можно преобразовать во fluent-команды PathBuilder или вставить напрямую с помощью методов path segment.

4. SVG paths не зависят от разрешения?
Да. SVG paths являются векторными и масштабируются без потери качества, поэтому они подходят для адаптивной графики, дисплеев высокого разрешения и печатных процессов.

5. Может ли SVG path содержать несколько несвязанных фигур?
Да. Один SVG path может содержать несколько subpaths, если использовать несколько команд M (move to) в одном определении path.

6. В чем разница между относительными и абсолютными командами SVG path?
Абсолютные команды используют фиксированные SVG-координаты, а относительные команды вычисляют позиции относительно текущей точки рисования. Относительные команды часто используются для создания более компактной SVG-разметки.

Связанные ресурсы

• Посетите статью SVG Path Data, чтобы узнать, как использовать SVG paths - группу команд для рисования различных контуров или фигур путем объединения SVG-линий, SVG-дуг и кривых Безье.
• В статье Редактировать SVG-файл вы узнаете, как редактировать SVG path с помощью библиотеки Aspose.SVG for .NET, и рассмотрите подробные примеры C# по добавлению элементов в SVG-документ и их редактированию.
• Статья Element Builders подробно рассматривает Element Builders, используемые в Aspose.SVG Builder API. Вы узнаете о классе SVGElementBuilder, его специализированных builders и о том, как они упрощают программирование SVG.
• Статья Rule Builder посвящена RuleBuilder - классу builder для создания CSS style rules в SVG-документе.
• Статья Paint Builder посвящена PaintBuilder, классу builder для создания paint values для SVG-элементов. Этот класс используется, чтобы задавать значение атрибутов stroke или fill для различных SVG-фигур и элементов при их заполнении paint, pattern или gradient.