C#在Winform的PictureBox控件中显示Svg图片


C#在Winform的PictureBox控件中显示Svg图片

  • 背景
  • 实现思路
  • 环境说明
  • 实现步骤
  • 结束语

背景

我们知道Svg是一种矢量图形格式，广泛应用与Web App、手机App，本文就介绍一下在Winform的窗口程序中怎么实现显示Svg图片。

实现思路

实现思路很简单，就是需要从NuGet中引入SVG Rennering Library(ARES)，然后通过其提供的SvgDocument实现把svg文件内容转换为Image对象。

环境说明

VS2013
.netframework4.5.1

实现步骤

1、新建一个空白解决方案，然后在此解决方案下新建一个Winform应用，目标框架选择.NET Framework 4.5.1。
2、鼠标右键新建的winform工程，在弹出菜单中选择“管理NuGet程序包”，弹出如下对话框：
在这里插入图片描述
左侧选择联机，右侧关键词位置输入SVG ARES回车。就可以在搜索结果中看到SVG Rendering Library(ARES)。
3、点击安装按钮进行依赖库安装。
4、在winform工程中新建窗体FrmSvgDemo，修改Program.cs中的Form1位FrmSvgDemo。
5、在新建的窗体中放一个按钮和一个PictureBox控件，如下图：
在这里插入图片描述
6、在winform工程下新建一个文件夹images，找一个svg图片文件放入此文件夹，如果不知道哪有可以到https://www.iconfont.cn/这个网站去下载。
7、关键代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
private void button1_Click(object sender, EventArgs e)
{
     string svgFile = System.IO.Path.Combine(AppDomain.CurrentDomain.BaseDirectory, "images\\销售单据.svg");
     Image img = this.ConvertSvgToImage(svgFile, this.pictureBox1.Width, this.pictureBox1.Height);
     this.pictureBox1.Image = img;
 }

 /// <summary>
 /// 把Svg文件按指定宽度和高度转为Image对象
 /// </summary>
 /// <param name="svgFile">Svg文件完整路径</param>
 /// <param name="width">转换后的图像宽度</param>
 /// <param name="height">转换后的图像高度</param>
 /// <returns>返回转换后的Image对象</returns>
 public Image ConvertSvgToImage(string svgFile, int width, int height)
 {
     Image imgResult = null;
     if (System.IO.File.Exists(svgFile))
     {
         SvgDocument sdoc = SvgDocument.Open(svgFile);

         #region 解析Svg文件中的viewBox值

         string xml = sdoc.ToString();
         string beginStr = "viewBox=";
         string endStr = "" ";
         int begin = xml.IndexOf(beginStr);
         if (begin > 0)
         {
             begin = begin + beginStr.Length;
             int end = xml.IndexOf(endStr, begin);
             string viewBox = xml.Substring(begin, end - begin);
             viewBox = viewBox.Replace(""", String.Empty).Replace("'", String.Empty);
             if (!String.IsNullOrEmpty(viewBox))
             {
                 string[] vbs = viewBox.Split(new char[] { ' ' });
                 if (vbs.Length == 4)
                 {
                     float vbx = 0.0f;
                     float vby = 0.0f;
                     float vbw = 0.0f;
                     float vbh = 0.0f;
                     float.TryParse(vbs[0], out vbx);
                     float.TryParse(vbs[1], out vby);
                     float.TryParse(vbs[2], out vbw);
                     float.TryParse(vbs[3], out vbh);
                     sdoc.ViewBox = new SvgViewBox(vbx, vby, vbw, vbh);
                 }
             }
         }

         #endregion

         sdoc.Width = width;
         sdoc.Height = height;
         Bitmap bitmap = sdoc.Draw();
         using (System.IO.MemoryStream ms = new System.IO.MemoryStream())
         {
             bitmap.Save(ms, System.Drawing.Imaging.ImageFormat.Png);                    //把svg按照指定宽度和高度转为png后放入内存流中
             imgResult = Image.FromStream(ms);
             //bitmap.Save("e:\\test.png", System.Drawing.Imaging.ImageFormat.Png);      //保存png图片至磁盘
         }
     }
     return imgResult;
 }

8、运行效果如下图：
在这里插入图片描述

结束语

使用svg矢量图的目的是不失真，因此我的程序是根据PictureBox控件的大小生成对应的Image对象的。当然也可以生成png格式的图片。（代码中有一行注释的就是生成png图片）