title author date CreateTime categories
本文说如何显示SVG
lindexi
2019-09-02 12:57:38 +0800
2018-2-13 17:23:3 +0800

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

这些图片在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
});

参见: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

因为已经有人写了,和我一样,驸马说他用过Svg to Xaml 做,我求请教了驸马大神,在github找到库,好像简单。

2019-9-2-本文说如何显示SVG的更多相关文章

  1. angular7 + d3 显示svg

    汇总一些之前没有注意到的问题 总体思路: app只是显示svg为主,接收后端推送的数据改变,显示变化后的svg. 因此,只用d3的数据绑定更新组件里<svg></svg>节点. ...

  2. 解决batik使用JScrollPane显示svg图滚动条不显示的问题

    // 必须使用batik提供的JSVGScrollPane,使用swing自己的组件JScrollPane初始化时滚动条不会显示. JSVGScrollPane svgJScrollPane = ne ...

  3. 本地显示svg正常显示,在工程项目中无法正常显示

    提前说明:此文仅记录个人项目问题,不具有众参考意义. 原因: 工程中对引用的资源进行解析设置,即resource设置. 解决方法: 找到静态资源加载路径,添加 if(urlpostfix.equals ...

  4. window 系统显示svg、psd格式文件

    可以安装SVG Explorer Extension来预览略缩图原地址:https://svgextension.codeplex.com 参考地址 github上 exe 文件下载地址 https: ...

  5. 2019国际VR/AR暨3D显示大会内容总结

    一.VR/AR标准化进程           牟同生(浙大) 1.单眼FOV,双眼FOV FOV:又称视场,视角FOV是指镜头所能覆盖的范围(物体超过这个范围就不会被收在镜头内),一般用角度值表示. ...

  6. django部署到linux上不显示.svg图标处理方法

    在setting文件的最开始添加如下内容: import mimetypes mimetypes.add_type("image/svg+xml", ".svg" ...

  7. 2018-12-25-win10-uwp-显示SVG

    title author date CreateTime categories win10 uwp 显示SVG lindexi 2018-12-25 10:37:5 +0800 2018-2-13 1 ...

  8. svg文件使用highmap显示

    svg文件使用highmap显示 highmap,ammap都是比较好的第三方插件用来显示svg图片:     ammap导航可能更美观点(这个highmap后面可能也会赶上),     highma ...

  9. 显示解析svg

    g公司代码显示svg: SVGParserRenderer drawable = new SVGParserRenderer(context, String svgContent); String s ...

随机推荐

  1. arcgis信息窗口

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  2. web App libraries跟referenced libraries的一些问题

    该博文内容经参看网上其他资料归纳所成,并注明出处: 问题一:myeclipse中Web App Libraries无法自动识别lib下的jar包(http://blog.csdn.net/tianca ...

  3. 【JZOJ5064】【GDOI2017第二轮模拟day2】友好城市 Kosarajo算法+bitset+ST表+分块

    题面 在Byteland 一共有n 座城市,编号依次为1 到n,这些城市之间通过m 条单向公路连接. 对于两座不同的城市a 和b,如果a 能通过这些单向道路直接或间接到达b,且b 也能如此到达a,那么 ...

  4. go语言第一问:在其他地方执行编译go语言程序,结果会在哪个地方产生?

    1.我们看执行编译go语言程序中命令,没有找到exe文件.

  5. console 中的格式化打印(占位符),和样式定义

    格式化打印 Gecko 9.0 (Firefox 9.0 / Thunderbird 9.0 / SeaMonkey 2.6) 首次发布对string substitutions的支持.你可以在传递给 ...

  6. jsp里更新Clob类型字段数据

    ResultSet rs = null; Connection conn = new dbconn().getconnect(); Statement stmt = null; int news=0; ...

  7. Python 使用正则表达式抽取数据

  8. Leetcode788.Rotated Digits旋转数字

    我们称一个数 X 为好数, 如果它的每位数字逐个地被旋转 180 度后,我们仍可以得到一个有效的,且和 X 不同的数.要求每位数字都要被旋转. 如果一个数的每位数字被旋转以后仍然还是一个数字, 则这个 ...

  9. WPF自定义控件 依赖属性绑定

    控件cs文件 using System.ComponentModel; using System.Windows; using System.Windows.Controls; using Syste ...

  10. Vim学习与总结

    1. :w 后面可以加文件名 2. 使用hjkl 来移动光标,当然你也可以使用箭头.j就是向下的箭头,k是向上,h向左, l向右 3.  :help <command> → 显示相关命令的 ...