UWP项目中加载svg矢量图
2016-07-20 14:44
232 查看
最近在项目中显示按钮图片时,总是感觉图片显示不清晰,所以打算加载矢量图显示按钮图片。UWP本身是不支持矢量图的加载的,需要转换为path图自绘。目前主要有两种实现该效果。第一种方法是获取矢量图中的点的位置,然后在程序中直接使用path绘图。第二种方法是调用库的方法去实现矢量图加载。显而易见,第二种方法更容易一些。
在网上找到一个开源的矢量图加载库Mntone.SvgForXaml,使用方法也很简单。在NuGet中添加Mntone.SvgForXaml和Win2d.uwp两个库。
在xmal文件中添加命名空间
在对应的cs中写入要加载的图片名称。
在此有一点需要注意,由于矢量图都是加载到内存中,所以使用完后需要卸载,否则会一直消耗内存资源
程序运行后效果如下
在网上找到一个开源的矢量图加载库Mntone.SvgForXaml,使用方法也很简单。在NuGet中添加Mntone.SvgForXaml和Win2d.uwp两个库。
在xmal文件中添加命名空间
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"> <svg:SvgImage x:Name="SvgControl"/> </Grid>
在对应的cs中写入要加载的图片名称。
public MainPage() { this.InitializeComponent(); this.Loaded += MainPage_Loaded; } private async void MainPage_Loaded(object sender, RoutedEventArgs e) { var file = await StorageFile.GetFileFromApplicationUriAsync(new Uri("ms-appx:///Assets/magnifier28.svg")); await this.SvgControl.LoadFileAsync(file); }
在此有一点需要注意,由于矢量图都是加载到内存中,所以使用完后需要卸载,否则会一直消耗内存资源
protected override void OnNavigatingFrom(NavigatingCancelEventArgs e) { this.SvgControl.SafeUnload(); }
程序运行后效果如下
相关文章推荐
- JavaScript 判断浏览器是否支持SVG的代码
- 基于jquery和svg实现超炫酷的动画特效
- 推荐10 款 SVG 动画的 JavaScript 库
- 用svg制作富有动态的tooltip
- java生成饼图svg及JFreeChart生成svg图表
- 如何玩转Android矢量图VectorDrawable
- Python实现批量把SVG格式转成png、pdf格式的代码分享
- Android矢量图之VectorDrawable类自由填充色彩
- iOS应用开发中矢量图的使用及修改矢量图颜色的方法
- Canvas和SVG的区别
- Web开发中的矢量绘图(vml,svg)处理和应用
- SVG 图像入门教程
- 实例讲解使用SVG制作loading加载动画的方法
- ExtJS之Chart导出为png/jpeg,解决中文乱码
- Convert SVG to PDF
- Convert SVG to PDF by using iText in Java(ZT)
- Vector graphics in iText PDF
- Flash导入矢量图
- GML、SVG、VML的比较