Paint Builder – Настройка SVG Fill и Stroke в C#

Что такое PaintBuilder?

Aspose.SVG Builder API позволяет программно настраивать SVG-свойства fill и stroke с помощью fluent syntax. Класс PaintBuilder упрощает создание SVG paint values, включая сплошные цвета и ссылки на paint servers, такие как patterns и gradients, в C# приложениях.

SVG paint configuration часто используется для переиспользуемых фонов, декоративных текстур, стилей диаграмм, заливок иконок и эффектов векторной графики. Вложенные builders и цепочки методов делают генерацию SVG более читаемой и удобной для сопровождения.

В этой статье объясняется, как использовать PaintBuilder, builder-класс для создания paint values для SVG-элементов. Он используется для задания значений атрибутов stroke или fill при применении цветов, patterns или gradients.

PaintBuilder является частью Aspose.SVG Builder API и используется для настройки SVG-значений fill и stroke. Он поддерживает несколько SVG paint values:

• сплошные цвета
• ссылки на SVG patterns
• ссылки на SVG gradients
• другие ссылки на paint servers

Builder API использует модель fluent configuration, которая упрощает создание и стилизацию SVG-элементов.

Создание SVG Pattern Fills

SVG patterns позволяют заполнять фигуры повторяющимися графическими элементами вместо сплошных цветов. Pattern определяется один раз и может использоваться несколькими SVG-элементами. В следующем примере PaintServerId() класса PaintBuilder задает значение fill как ссылку на paint server по его Id.

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

// Create SVG pattern with polygons and apply as fill to rectangle using C# Builder API

using (SVGDocument document = new SVGDocument())
{
    SVGSVGElement svg = new SVGSVGElementBuilder()
        .Width(100, LengthType.Percentage).Height(100, LengthType.Percentage)
        .ViewBox(0, 0, 400, 400)
        .AddG(g => g
            .AddPattern(p => p.Id("stars")
                .ViewBox(0, 0, 20, 20)
                .Width(5, LengthType.Percentage)
                .Height(5, LengthType.Percentage)
                .PatternUnits(CoordinateUnits.UserSpaceOnUse)
                .AddPolygon(points: new double[] { 5, 0, 7, 3, 10, 5, 7, 7, 5, 10, 3, 7, 0, 5, 3, 3 }, fill: Color.Teal)
                .AddPolygon(points: new double[] { 15, 0, 17, 3, 20, 5, 17, 7, 15, 10, 13, 7, 10, 5, 13, 3 }, fill: Color.DarkRed)
                .AddPolygon(points: new double[] { 15, 10, 17, 13, 20, 15, 17, 17, 15, 20, 13, 17, 10, 15, 13, 13 }, fill: Color.DarkBlue)
            )
            .AddRect(r => r.Rect(20, 40, 440, 80).Fill(pt => pt.PaintServerId("stars")))
            )
        .Build(document.FirstChild as SVGSVGElement);
    document.Save(Path.Combine(OutputDir, "pattern-stars.svg"));
}

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

Применение Patterns к SVG-фигурам

Pattern fills можно применять к прямоугольникам, кругам, путям, полигонам и текстовым элементам. Любой SVG-элемент, поддерживающий fill, может использовать ссылку на paint server, созданную с PaintBuilder.

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

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

// Create SVG patterns with reusable elements and apply them to circles using C# Builder API

using (SVGDocument document = new SVGDocument())
{
    SVGSVGElement svg = new SVGSVGElementBuilder()
        .Width(100, LengthType.Percentage).Height(100, LengthType.Percentage)
        .ViewBox(0, 0, 600, 600)
        .AddG(g => g
            .FontFamily("Arial")
            .FontSize(10)
            .AddPattern(p => p.Id("Pat3a")
                .Rect(0, 0, 20, 20)
                .PatternUnits(CoordinateUnits.UserSpaceOnUse)
                .AddRect(r => r.Rect(0, 0, 10, 10).Fill(Color.LightSlateGray))
                .AddRect(r => r.Rect(10, 0, 10, 10).Fill(Color.Teal))
                .AddRect(r => r.Rect(0, 10, 10, 10).Fill(Color.DarkRed))
                .AddRect(r => r.Rect(10, 10, 10, 10).Fill(Color.Gold))
            )
            .AddPattern(p => p.Id("Pat3b")
                .Href("#Pat3a")
                .Width(23).Height(23)
            )
            .AddPattern(p => p.Id("Pat3c")
                .Href("#Pat3a")
                .Width(15).Height(15)
            )
            .AddCircle(circle => circle.Cx(90).Cy(130).R(70).Fill(pt => pt.PaintServerId("Pat3a")))
            .AddText(t => t.X(55).Y(50)
                .AddContent("Pattern #Pat3a")
            )
            .AddCircle(circle => circle.Cx(240).Cy(130).R(70).Fill(pt => pt.PaintServerId("Pat3b")))
            .AddText(t => t.X(205).Y(50)
                .AddContent("Pattern #Pat3b")
            )
            .AddCircle(circle => circle.Cx(390).Cy(130).R(70).Fill(pt => pt.PaintServerId("Pat3c")))
            .AddText(t => t.X(355).Y(50)
                .AddContent("Pattern #Pat3c")
            )
        )
        .Build(document.FirstChild as SVGSVGElement);
    document.Save(Path.Combine(OutputDir, "patterns.svg"));
}

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

Элемент <pattern> определяет переиспользуемую плитку, которая повторяется по заполненной фигуре. В этом примере:

• Width() и Height() задают размер повторяемой плитки;
• PatternUnits(UserSpaceOnUse) использует фиксированные координаты для повторения;
• элемент circle определяет повторяемое графическое содержимое внутри pattern.

Pattern можно повторно использовать для нескольких SVG-элементов, ссылаясь на тот же ID. Меньшие размеры создают более плотное повторение, а большие увеличивают расстояние между элементами.

В примере в SVG-документ добавляются три различных pattern под названиями Pat3a, Pat3b и Pat3c.

• Для Pat3a pattern определяется с помощью метода AddPattern() внутри метода AddG(). Внутри этого pattern добавляются четыре прямоугольника, определяющие различные цветовые секции плитки размером 20x20 единиц.
• Pat3b и Pat3c определяются как ссылки на Pat3a, но с другими размерами плиток, заданными методами Width() и Height().

Высота и ширина плитки в элементе pattern определяют размер повторяемой единицы в SVG-документе. Этот размер определяет, как pattern будет выглядеть при применении к фигурам. В Pat3b увеличение высоты и ширины плитки увеличивает единицу узора, что приводит к появлению пустых (прозрачных) областей. В Pat3c уменьшение размеров плитки делает узор более плотным, создавая другой визуальный эффект.

Таким образом, настройка высоты и ширины плитки в элементе SVG <pattern> позволяет управлять плотностью и повторением узора в SVG-документе и создавать разнообразные визуальные эффекты.

Создание Linear Gradient Fills

Aspose.SVG Builder API позволяет создавать переиспользуемые SVG linear gradients и применять их к SVG-фигурам. Gradients часто используются для фонов, диаграмм, кнопок и декоративной графики.

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

using (SVGDocument document = new SVGDocument())
{
    SVGSVGElement svg = new SVGSVGElementBuilder()
        .Width(400).Height(200)
        .ViewBox(0, 0, 400, 200)
        .AddDefs(defs => defs
            .AddLinearGradient(gradient => gradient
                .Id("gradientFill")
                .X1(0, LengthType.Percentage).Y1(0, LengthType.Percentage)
                .X2(100, LengthType.Percentage).Y2(0, LengthType.Percentage)
                .AddStop(stop => stop
                    .Offset(0, StopUnitType.Percentage)
                    .Attribute("stop-color", "gold"))
                .AddStop(stop => stop
                    .Offset(100, StopUnitType.Percentage)
                    .Attribute("stop-color", "teal"))))
        .AddRect(rect => rect
            .Rect(20, 20, 360, 160)
            .Fill(paint => paint.PaintServerId("gradientFill")))
        .Build(document.FirstChild as SVGSVGElement);

    document.Save(Path.Combine(OutputDir, "linear-gradient-fill.svg"));
}

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

Пример создает переиспользуемое SVG-определение <linearGradient> внутри <defs> и применяет его к заливке прямоугольника.

• AddLinearGradient() задает направление и идентификатор gradient;
• AddStop() задает точки цветового перехода;
• PaintServerId("gradientFill") применяет gradient paint server к заливке прямоугольника и создает ссылку url(#gradientFill) в SVG-выводе;
• gradient можно повторно использовать для нескольких SVG-элементов.

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

Проблема	Причина	Исправление
Pattern не виден	Неверный ID pattern	Убедитесь, что PaintServerId() совпадает с Id()
Pattern выглядит растянутым	Слишком большой размер плитки	Настройте Width() и Height() pattern
Pattern повторяется неправильно	Неверное значение PatternUnits	Используйте UserSpaceOnUse, если нужны фиксированные плитки
Fill не применяется	Pattern определен вне доступной области	Определяйте patterns до их применения

FAQ

1. Что такое paint server в SVG?
Paint server – это SVG-ресурс, предоставляющий значения fill или stroke. Частые paint servers: patterns и gradients, на которые ссылаются через url(#id).

2. Можно ли повторно использовать один SVG pattern для нескольких фигур?
Да. Один SVG pattern можно использовать для нескольких элементов, ссылаясь на тот же ID через PaintServerId().

3. Чем отличаются UserSpaceOnUse и ObjectBoundingBox?
UserSpaceOnUse использует фиксированные координаты, а ObjectBoundingBox масштабирует pattern относительно размера целевого элемента.

4. Почему SVG pattern выглядит растянутым?
Обычно это происходит, если плитка pattern слишком большая или система координат не совпадает с целевым элементом.

5. Можно ли применять SVG patterns к тексту?
Да. SVG-текст поддерживает fill и может использовать patterns так же, как фигуры.

6. Поддерживает ли PaintBuilder SVG gradients?
Да. PaintBuilder поддерживает ссылки на paint servers для программной настройки SVG gradients.

Дополнительные ресурсы

• Статья SVG Builder API объясняет, как программно создавать и изменять SVG-элементы в C# с помощью Aspose.SVG Builder API. Узнайте, как fluent builders упрощают генерацию SVG и улучшают читаемость кода в .NET-приложениях.
• Статья Element Builders рассматривает SVG element builders в Aspose.SVG for .NET. Узнайте, как специализированные классы-конструкторы упрощают создание SVG-фигур, графики и структур документов в C#.
• Статья Path Builder объясняет, как программно создавать SVG-пути в C#. Узнайте, как класс PathBuilder упрощает создание сложных SVG-фигур, кривых и векторной графики с использованием fluent-синтаксиса.
• Статья Rule Builder объясняет, как создавать правила стилей CSS для SVG-документов в C# с помощью класса RuleBuilder. Узнайте, как программно настраивать стили SVG в .NET-приложениях.
• Статья SVG Filters объясняет, как создавать эффекты SVG-фильтров, такие как размытие по Гауссу, падающие тени, освещение и насыщенность в C#. Узнайте, как программно применять SVG-фильтры с помощью Aspose.SVG for .NET.
• Статья SVG Gradients объясняет, как создавать линейные и радиальные SVG-градиенты в C#. Узнайте, как определять переиспользуемые заливки градиентом в XML и генерировать их программно.
• Раздел Основы рисования SVG охватывает основы создания графики SVG, включая фигуры, пути, заливки, градиенты, фильтры и преобразования с использованием C# и Aspose.SVG for .NET.