元素生成器 – 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 元素。

本文深入研究 Aspose.SVG Builder API 中使用的元素生成器。您将看到它们在 SVG 操作方面的效率。您将了解 SVGSVGElementBuilder 类、其专用构建器以及它们如何简化 SVG 编程。

创建新元素

Aspose.SVG SVG Builder API 采用 Fluent Builder 模式，这是一种设计方法，完全符合 SVG 操作中简单、清晰和多功能性的需求。

流畅的构建器模式 – Fluent Builder Pattern

在 SVG Builder API 中，Fluent Builder 模式用于简化 SVG 元素的创建和更新，使过程直观且不易出错。此模式的本质是配置 SVG 元素然后返回builder object的方法。这种设计提供了一种一致且连贯的方法来链接方法，这对于降低与创建和管理 SVG 元素相关的复杂性特别有效。

在这种情况下，lambda 表达式用于提高构建器配置方法的清晰度和简洁性。 Lambda 表达式允许您以详细而紧凑的方式定义 SVG 元素的属性和样式。例如，当添加一个circle元素时，lambda表达式提供了一个内联可读的配置：

    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

在这里，我们将探索一种使用 C# 从头开始​​制作 SVG 的简洁而优雅的方法。

using Aspose.Svg.Builder;
using System.Drawing;
using System.IO;
...
    using (var document = new SVGDocument())
    {
        // Create an <svg> element with specified width, height and viewBox, and add into it other required elements
        var 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"));
    }

该示例利用 SVGSVGElementBuilder 中的 Fluent Builder 模式来构造 SVG 元素。与 编辑 SVG 文件 文章中描述的方法相比，此模式提供了一种富有表现力且可维护的方式来生成 SVG 文档，后者更多地依赖于低级 DOM 操作和显式属性设置。

因此，SVG Builder API 提供了一种灵活有效的方法来在 C# 中生成矢量图形。通过利用元素生成器和生成器模式，您可以简化从头开始创建 SVG 的过程。这种方法：

• 提供更流畅和可读的方式来创建复杂的结构，使代码更易于理解和维护。
• 减少样板代码，如示例所示，通过直接在构建器上调用方法来实现设置cx、cy、r、fill等属性。

编辑 SVG

以编程方式编辑 SVG 的一项强大技术是使用 Element Builder。

添加新元素

使用元素生成器编辑 SVG 提供了一种强大且灵活的方法来以编程方式操作矢量图形。在以下示例中，我们采用现有的 SVG 文件，向其中添加一些元素，然后保存：

using Aspose.Svg.Builder;
using System.Drawing;
using System.IO;
...
    string documentPath = Path.Combine(DataDir, "circles.svg");

    using (var document = new SVGDocument(documentPath))
    {
        // Create a new <g> (group) element using SVGGElementBuilder and set attributes
        var gElement = new SVGGElementBuilder()
            .Fill(Paint.None).Stroke(Color.FromArgb(80, 132, 132)).StrokeWidth(10)

            // Add <circle> and <polyline> element configurations
            .AddCircle(c => c.Cx(350).Cy(70).R(50))
            .AddPolyline(points: new double[] { 125, 130, 275, 180, 425, 130 })
            .Build(document);

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

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

在这个例子中：

• 使用 SVGGElementBuilder 创建新的<g>(组)元素。为该组元素设置诸如fill、stroke和stroke-width等属性。
• 在<g>元素中，<circle>和<polyline>元素使用Fluent Builder Pattern进行配置。
• 配置子元素后，将在SVGGElementBuilder上调用 Build(Document document) 方法，以构造<g>元素及其子元素。
• 新创建的<g>元素作为子元素添加到 SVG 文档的根<svg>元素中。

图(a) 显示了原始circles.svg 文件的可视化效果，图(b) 显示了编辑后的circles-edited.svg 文件的图像，其中添加了圆形和折线元素。

修改现有元素

在以下 C# 示例中，我们通过更改文档中第一个 SVG <circle> 元素的填充和描边颜色来更新现有 SVG 文档：

using Aspose.Svg.Builder;
using System.Drawing;
using System.Linq;
using System.IO;
...
    string documentPath = Path.Combine(DataDir, "circles.svg");

    using (var document = new SVGDocument(documentPath))
    {
        // Find the first <circle> element in the document
        var 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"));
    }

元素构建器提供 Build(T element) 方法来更新现有 SVG 元素，允许修改其属性或样式。图(a) 显示了原始的circles.svg 文件，图(b) 显示了修改后的circles-modified.svg 文件的图像，其中第一个circle 元素已重新着色。

使用元素生成器的示例

以下代码片段展示了如何使用元素构建器创建具有各种 SVG 形状元素的 SVG 文档。

using Aspose.Svg.Builder;
using System.Drawing;
using System.IO;
...
    var svgContent = "<svg xmlns=\"http://www.w3.org/2000/svg\"></svg>";
    using (var document = new SVGDocument(svgContent, "."))
    {
        var 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)用于构造具有width、height和viewBox属性的 SVG 元素。然后使用 Fluent Builder Pattern 创建矩形、圆形、椭圆形、直线、折线、多边形和路径等形状，每个形状都在<g>元素中进行相应的定位和样式设置。

也可以看看

• 在 编辑 SVG 文件 文章中，您将学习如何使用 Aspose.SVG for .NET 库编辑 SVG，并考虑如何向 SVG 添加元素的详细 C# 示例记录并编辑它们。
• 请访问 Path Builder 文章，了解如何使用 Path Builder 以编程方式创建 SVG 路径，这是一组通过组合 SVG 直线、SVG 弧线和贝塞尔曲线来绘制各种轮廓或形状的命令。
• Rule Builder 文章介绍的是 RuleBuilder 类，它是一个用于在 SVG 文档中构建 CSS 样式规则的构建器类。
• Paint Builder 文章介绍的是 PaintBuilder，它是一个用于为 SVG 元素创建绘制值的构建器类。此类用于在使用绘画、图案或渐变填充各种 SVG 形状和元素时指定其stroke或fill属性的值。