65.9K
CodeProject 正在变化。 阅读更多。
Home

[教程1] GDI+ SVG 艺术作品

The Zakies
starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.44/5 (6投票s)

2016 年 3 月 2 日

CPOL

4分钟阅读

viewsIcon

42954

downloadIcon

1896

教程1（如何创建矢量图形程序）

引言

这是关于如何使用C#在Windows窗体中构建一个图形程序并将其导出为矢量格式的系列教程的第一个教程……此外，您还将了解如何移动、删除、撤销(Ctrl+Z)您的矢量图形，并将其保存为一种特殊格式，以便您的程序可以再次读取。

我们还将学习如何保存XML文件……如何导出为Verilog格式……如何使用星形算法……如何使用手形工具……如何手动实现**Ctrl+Z**技巧。

您将能够构建什么

在本教程中，我们将首先介绍如何让您的C#程序绘制特定的SVG路径。

背景

面向对象编程的基本概念（特别是继承）……以及C#的基础知识。

什么是SVG？为什么我们要在程序中使用它？？

  • SVG是可缩放矢量图形（Scalable Vector Graphics）的缩写……它只是一种保存图形的方式，使其永远不会失真（像素化）。
  • 普通图像是逐像素保存的……因此，通过缩放它们，您原始作品的分辨率会降低。
  • 而在SVG等矢量格式中，对象是通过描述它们的点（在SVG路径数据中称为路径）来数学化保存的。因此，实际保存的是图形的点，而不是它们的像素……所以当您缩放图形时，这些点会乘以因子……因此您的图形永远不会失真。

但为什么我们要在项目中使用SVG的概念？

  • 首先，这将使您能够以SVG格式绘制任何内容并将其导入到您的应用程序中，就像在本教程中，我们正在学习如何使用一个库将路径数据（描述图形的点）转换为GDI，这样就可以轻松地绘制到您的程序中。
  • 学习如何将我们的GDI绘图导出为这种格式（SVG是用XAML格式编写的，所以在接下来的教程中，我们将讨论如何遍历所有对象并将它们保存到XAML SVG文件中）。这将使您的图形可以在任何支持SVG的程序（如Adobe Illustrator）中进行编辑。
  • 这将保留您的图形的可编辑性，因此如果您需要在更大的纸张尺寸上打印它们，它们永远不会失真。

Using the Code

  1. 首先创建一个C# Windows窗体应用程序。
  2. 我们将使用GDI+库来绘制我们的图形。 ...

    因此，在您的第一个窗体的后台代码中开始创建这个函数。在form.cs中

    protected override void OnPaint(PaintEventArgs e)
{
Graphics g = e.Graphics;
}
  3. **我们将首先创建一个通用的基类**，它将包含我们所有继承的子类……这个基类将被命名为`shapes`，以表明它将包含许多形状。
     public class shapes
    {
       public shapes() { }

        public int translateX;
        public int translateY;

        public string id_layer_name;
    }

    translateX和translateY只是用于移动形状的通用int。

  4. **我们的目标是在编码阶段将任何我们想要的形状插入到程序中**，这样我们的程序就能将其绘制给用户……我找到的库只处理SVG的路径数据……所以有一个解决办法：首先在这个网站上绘制任何您想要的东西 http://editor.method.ac/ 并将您的绘图保存为SVG格式……然后用记事本打开下载的SVG文件，您会在`path`标签内找到一个名为`d="复制里面的内容"`的属性。

  5. 现在让我们回到Visual Studio……现在让我们创建一个简单的类，它将继承自我们的基类。我们称它为`star`并复制路径数据。 
    class star : shapes
    {
        private string<code> </code>sData = "F1M160.209,181.975L160.209,
        83.016 0.338,0.555 0.338,99.518 48.289,132.496 0.338,165.476 0.338,264.436z";
    }
  6. 现在，要从这些路径数据在Windows窗体中绘制这个形状，**我们将使用一个名为SVG Rendering Library的库。从NuGet中，只需输入svg**……它将是第一个库。

  7. 然后我们的目标将是使用这个库将SVG路径数据转换为图形路径，以便GDI+可以理解。

    所以修改`star`类为

    private Region region;  //used in converting 
        {
            Svg.SvgPath pa = new Svg.SvgPath();

     //converting path data string to svg
            Svg.Pathing.SvgPathSegmentList svgSvgPathSegmentList = 
                                           new Svg.Pathing.SvgPathSegmentList();
            var converter = TypeDescriptor.GetConverter
                            (typeof(Svg.Pathing.SvgPathSegmentList));
            pa.PathData = (Svg.Pathing.SvgPathSegmentList)converter.ConvertFrom(sData);

            //initializing the renderer
            Svg.ISvgRenderer render = null;

            //svg library needs a Renderer to convert vectors
            region = new Region(pa.Path(render));

     //just return the<span style="display: none;"> SvgPath
            return pa;
        }</span>

    这里，您只需使用我们旧的路径数据string来创建一个SVG路径，并通过一些操作，您就可以将其转换为SVG路径……这个函数重写了基类中的一个函数，所以让我们在基类中创建虚拟函数。

  8. 向基类shapes.cs添加一个虚拟函数： 
     public class shapes
    {
       public shapes() { }

        public int translateX;
        public int translateY;

        public string id_layer_name;

	public virtual Svg.SvgPath draw_svg()
        {
            Svg.SvgPath pa = new Svg.SvgPath();
            return pa;
        }
    }
  9. **现在让我们在应用程序启动时绘制这个star**……所以回到您的form.cs。
      Svg.ISvgRenderer render = null;//used in converting

        protected override void OnPaint(PaintEventArgs e)
        {
            Graphics g = e.Graphics;

            shapes shape = new shapes();// define base class
            star st = new star();// define inherited class
            shape = st;

            e.Graphics.DrawPath(new Pen(Brushes.Black, 2), 
            	shape.draw_svg().Path(render));//draw outline
            e.Graphics.FillPath(Brushes.Khaki, 
            	shape.draw_svg().Path(render));// draw color inside
        }
  10. **现在，我们只需在form.cs的构造函数中调用此函数**，并且不要忘记定义特定的尺寸。
     public Form1()
        {
            InitializeComponent();

            Size = new Size(1000, 700); // define specific size so that your art 
                                        // can be within your boundaries

            Invalidate(); // to call OnPaint function we call Invalidate()
        }

现在，您就可以在Windows窗体中放入您想要的任何绘图了。

在下一个教程中，我们将介绍如何以一种好的方式定义和添加同一对象的多个实例……我们将讨论如何移动、改变颜色……还有很多内容即将推出。

我邀请您阅读
[教程2] 如何使用用户输入交互式添加多个不同的形状
[教程3] 使用C#的拖放和删除对象的图形程序

历史

  • 2016年3月2日：初版
© . All rights reserved.