win10 uwp 显示SVG win2d 使用 svg

本文说如何显示SVG

本来在我一个白天晚上按钮,使用图片,图片不清晰

这些图片在http://www.zcool.com.cn/下载,不知道是不是不能直接用

我们需要一个看起来不会模糊的图,一般都是选矢量图。因为矢量图格式很多,但是比较容易找到的图很少,所以我们就使用svg,其实png也是,但是他播放模糊。lindexi

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="64px" height="64px" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve">
<g>
	<circle fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" cx="32" cy="32" r="16"/>
	<line fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" x1="32" y1="10" x2="32" y2="0"/>
	<line fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" x1="32" y1="64" x2="32" y2="54"/>
	<line fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" x1="54" y1="32" x2="64" y2="32"/>
	<line fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" x1="0" y1="32" x2="10" y2="32"/>
	<line fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" x1="48" y1="16" x2="53" y2="11"/>
	<line fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" x1="11" y1="53" x2="16" y2="48"/>
	<line fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" x1="48" y1="48" x2="53" y2="53"/>
	<line fill="none" stroke="#000000" stroke-width="2" stroke-miterlimit="10" x1="11" y1="11" x2="16" y2="16"/>
</g>
</svg>

我们开始使用Image,但是没有显示

于是网上有一个库Mntone.SvgForXaml,https://github.com/mntone/SvgForXaml,我们用Nuget

安装Mntone.SvgForXaml,安装win2d 1.11.0

我们上面那个代码就是svg,我们使用ViewModel绑定,绑定内容是SvgDocument

自然我们需要写一个字符串去转换

        private void Svgimage()
        {
            string str = @"<?xml version=""1.0"" encoding=""utf-8""?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC ""-//W3C//DTD SVG 1.1//EN"" ""http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"">
<svg version=""1.1"" id=""Layer_1"" xmlns=""http://www.w3.org/2000/svg"" xmlns:xlink=""http://www.w3.org/1999/xlink"" x=""0px"" y=""0px""
	 width=""64px"" height=""64px"" viewBox=""0 0 64 64"" enable-background=""new 0 0 64 64"" xml:space=""preserve"">
<g>
	<circle fill=""none"" stroke=""#000000"" stroke-width=""2"" stroke-miterlimit=""10"" cx=""32"" cy=""32"" r=""16""/>
	<line fill=""none"" stroke=""#000000"" stroke-width=""2"" stroke-miterlimit=""10"" x1=""32"" y1=""10"" x2=""32"" y2=""0""/>
	<line fill=""none"" stroke=""#000000"" stroke-width=""2"" stroke-miterlimit=""10"" x1=""32"" y1=""64"" x2=""32"" y2=""54""/>
	<line fill=""none"" stroke=""#000000"" stroke-width=""2"" stroke-miterlimit=""10"" x1=""54"" y1=""32"" x2=""64"" y2=""32""/>
	<line fill=""none"" stroke=""#000000"" stroke-width=""2"" stroke-miterlimit=""10"" x1=""0"" y1=""32"" x2=""10"" y2=""32""/>
	<line fill=""none"" stroke=""#000000"" stroke-width=""2"" stroke-miterlimit=""10"" x1=""48"" y1=""16"" x2=""53"" y2=""11""/>
	<line fill=""none"" stroke=""#000000"" stroke-width=""2"" stroke-miterlimit=""10"" x1=""11"" y1=""53"" x2=""16"" y2=""48""/>
	<line fill=""none"" stroke=""#000000"" stroke-width=""2"" stroke-miterlimit=""10"" x1=""48"" y1=""48"" x2=""53"" y2=""53""/>
	<line fill=""none"" stroke=""#000000"" stroke-width=""2"" stroke-miterlimit=""10"" x1=""11"" y1=""11"" x2=""16"" y2=""16""/>
</g>
</svg>
";
            Svg=SvgDocument.Parse(str);
          
        }

然后我们在我们的界面

先使用命名Mntone.SvgForXaml.UI.Xaml

xmlns:svg="using:Mntone.SvgForXaml.UI.Xaml"

然后绑定

        <Grid>
            <svg:SvgImage x:Name="Svg" Content="{x:Bind View.Svg,Mode=OneWay}"></svg:SvgImage>
        </Grid>

当然我们也可以放在我们的解决方案,假如我们的图片 Assets/weather_sun.svg

那么我们可以给我们的svgImage一个x:Name="Svg"

file = await StorageFile.GetFileFromApplicationUriAsync(new Uri("ms-appx:///Assets/weather_sun.svg"));

await Svg.LoadFileAsync(file);

原文:因为他会占用内存,我们需要手动把它释放

我们写在我们页面关掉,其实这个并不是关掉,只是我们的页面不显示

protected override void OnNavigatingFrom(NavigatingCancelEventArgs e)  
{
    Svg.SafeUnload();
}

我们可以简单把svg转换为我们之前的图片,JPG,png

先让用户选择保存的文件,然后选择.jpg或.png

var picker = new FileSavePicker();
			picker.SuggestedStartLocation = PickerLocationId.PicturesLibrary;
			picker.DefaultFileExtension = ".png";
			picker.FileTypeChoices.Add(new KeyValuePair<string, IList<string>>("Bitmap image", new[] { ".bmp" }.ToList()));
			picker.FileTypeChoices.Add(new KeyValuePair<string, IList<string>>("Png image", new[] { ".png" }.ToList()));
			picker.FileTypeChoices.Add(new KeyValuePair<string, IList<string>>("Jpeg image", new[] { ".jpg", ".jpe", ".jpeg" }.ToList()));
			picker.FileTypeChoices.Add(new KeyValuePair<string, IList<string>>("Gif image", new[] { ".gif" }.ToList()));

SvgImageRendererFileFormat format;可以SvgImageRendererFileFormat.Bitmap或者什么自己选

await SvgImageRenderer.RendererImageAsync(file, new SvgImageRendererSettings()  
{
    Document = content,
    Format = format,
    Scaling = 0.1f,
    Quality = 0.95f
});

在最新版本,ms支持svg,参见:https://docs.microsoft.com/en-us/uwp/api/windows.ui.xaml.media.imaging.svgimagesource

所以在一个 Image控件加入源就好,不需要去做其他的代码。

参见:http://igrali.com/2015/12/24/how-to-render-svg-in-xaml-windows-10-uwp/

代码:https://github.com/lindexi/UWP/tree/master/uwp/src/ScalableVectorGraphic

win2d 使用 svg

现在 win2d 支持 svg 1.1 ,直接在 win2d 使用svg请看下面代码

首先是加载图片,例如 xx.svg

var file = await StorageFile.GetFileFromApplicationUriAsync(new Uri("ms-appx:///Assets/xx.svg"));

然后开始创建 CanvasSvgDocument ,这个类可以用来显示 svg ,但是他有静态方法创建

using (var stream = await file.OpenReadAsync())
{
    svgDocument = await CanvasSvgDocument.LoadAsync(sender, stream);
}

然后可以显示处理或者修改svg图片,下面的代码写在 Draw 函数。如果不知道这个函数是哪个,请看我的博客

args.DrawingSession.DrawSvg(svgDocument, sender.Size);

修改他可以使用 SetColorAttribute 等进行修改,请看 Win2D 1.21.0 – SVG, improved HDR support, and bugfixes – Win2D Team Blog

var t = svgDocument.FindElementById("right_eye");
t.SetColorAttribute("fill", Colors.Red);

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏calvin

Quill编辑器介绍及扩展

从这里进入官网. 能找到这个NB的编辑器是因为公司项目需要一个可视化的cms编辑器,类似微信公众号编辑文章。可以插入各种卡片,模块,问题,图片等等。然后插入的内...

68820
来自专栏Kiba518

【我们一起写框架】MVVM的WPF框架之绑定(二)

上一篇我们已经一起编写了框架的基础结构,并且实现了ViewModel反向控制Xaml窗体。

17220
来自专栏Golang语言社区

神奇的go语言(网页下载)

目前,网上关于网页爬行的代码很多。但是,自从看了go语言的web下载代码之后,我才发现原来它的网页下载代码才是最简单的。不信的话,大家可以看一下, packa...

411100
来自专栏更流畅、简洁的软件开发方式

【开源】QuickPager ASP.NET2.0分页控件V2.0.0.3 【增加了使用说明】

最新版本:V2.0.0.7 。http://www.cnblogs.com/jyk/archive/2008/07/28/1255101.html 下载:ht...

246100
来自专栏ShaoYL

UINavigationController

38160
来自专栏Golang语言社区

厚土Go学习笔记 | 34. 一个简单的 web 服务器实现

go 语言实现 web 服务器很容易。这样就可以很任意的建立 web 应用而互不干扰。当然,端口和IP要规划好。不过这里不讨论这个范畴的内容。我们只实现最基本的...

37190
来自专栏从零开始学自动化测试

Selenium2+python自动化24-js处理富文本

前言 上一篇Selenium2+python自动化23-富文本(自动发帖)解决了富文本上iframe问题,其实没什么特别之处,主要是iframe的切换,...

30550
来自专栏张善友的专栏

Webix JavaScript UI 库可以帮你构建跨平台的HTML5 和 CSS3 程序

XB 软件公司最近发布了JavaScript UI 库Webix ,其中包含的组件超过45个,用这些组件可以构建跟HTML5 和 CSS3 兼容的程序,这些程序...

21760
来自专栏java架构师

Web开发中的文件上传组件uploadify的使用

在Web开发中,有很多可以上传的组件模块,利用HTML的File控件的上传也是一种办法,不过这种方式,需要处理的细节比较多,而且只能支持单文件的操作。在目前We...

30250
来自专栏wym

Windows创建窗口详解+代码---十天教会你俄罗斯方块

代码地址:https://blog.csdn.net/qq_41603898/article/details/80968266

10510

扫码关注云+社区

领取腾讯云代金券