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

怼烎@ 2023-02-16 10:52 4阅读 0赞

### 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程序包”，弹出如下对话框：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3psYmRtbQ_size_16_color_FFFFFF_t_70]  
左侧选择联机，右侧关键词位置输入SVG ARES回车。就可以在搜索结果中看到SVG Rendering Library(ARES)。  
3、点击安装按钮进行依赖库安装。  
4、在winform工程中新建窗体FrmSvgDemo，修改Program.cs中的Form1位FrmSvgDemo。  
5、在新建的窗体中放一个按钮和一个PictureBox控件，如下图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3psYmRtbQ_size_16_color_FFFFFF_t_70 1]  
6、在winform工程下新建一个文件夹images，找一个svg图片文件放入此文件夹，如果不知道哪有可以到https://www.iconfont.cn/这个网站去下载。  
7、关键代码如下：

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、运行效果如下图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3psYmRtbQ_size_16_color_FFFFFF_t_70 2]

# 结束语 #

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3psYmRtbQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200609160348158.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3psYmRtbQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3psYmRtbQ_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200609160815882.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3psYmRtbQ==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3psYmRtbQ_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200609161207393.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3psYmRtbQ==,size_16,color_FFFFFF,t_70