本文說如何顯示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);