在Xamarin Droid上渲染SVG Path的NGraphics效果不佳

时间:2017-03-20 14:55:40

标签: android svg xamarin xamarin.android ngraphics



<svg width="96" height="96" viewBox="0 0 32 32">
  <path d="M17.137989,13.569001L17.161989,13.748992 17.161989,14.740941C17.161989,15.281914 17.15399,15.787888 17.137989,16.258863 17.123989,16.72884 17.10799,17.184816 17.09099,17.625793L17.09099,20.331654C17.09099,20.792629 17.11599,21.218609 17.161989,21.608587 17.20899,21.998568 17.283989,22.229555 17.386988,22.300552 17.487988,22.370548 17.643988,22.405546 17.855988,22.405546L18.219986,22.405546 18.336985,22.765528C18.290985,22.846523 18.197985,22.916521 18.055986,22.975517 17.914986,23.036514 17.804987,23.045513 17.726988,23.006516L14.270002,23.006516 13.918003,23.006516C13.776004,23.006516,13.651005,22.966518,13.541005,22.885523L13.541005,22.585537C13.635005,22.465544,13.784004,22.405546,13.988003,22.405546L14.411001,22.405546C14.616,22.284554 14.737,22.16256 14.775,22.041565 14.813999,21.920572 14.834,21.707582 14.834,21.404598 14.865999,21.121613 14.881,20.817629 14.881,20.494646 14.881,20.171661 14.888999,19.908676 14.904999,19.706686L14.904999,18.947725 14.904999,17.370806C14.904999,16.662842 14.884999,16.212866 14.846,16.021875 14.808,15.829885 14.755,15.592897 14.692,15.310912 14.553,15.371909 14.383001,15.441905 14.187002,15.521901 13.991003,15.601897 13.863004,15.641895 13.800004,15.641895L13.683004,15.461905C13.683004,15.281914,13.784004,15.120922,13.988003,14.979929L14.411001,14.679944C14.553,14.599949 14.692,14.524953 14.834,14.454956 14.975999,14.384959 15.147998,14.309963 15.351997,14.228968 15.602996,14.068975 15.871995,13.933983 16.162994,13.822989 16.451992,13.712995 16.77799,13.627998 17.137989,13.569001z M16.080093,7.1960044C16.331078,7.1960044 16.559063,7.2860045 16.761049,7.4660044 16.966036,7.6460047 17.142023,7.8670049 17.291014,8.1270046 17.441004,8.3880053 17.514,8.628005 17.514,8.8480053 17.514,9.3500061 17.370008,9.7400064 17.079027,10.020006 16.790047,10.302007 16.577061,10.461007 16.444071,10.502007 16.312078,10.542007 16.159088,10.562007 15.9871,10.562007 15.813111,10.562007 15.645123,10.517007 15.481133,10.427007 15.315145,10.336007 15.155154,10.171007 15.000165,9.930007 14.842175,9.6900063 14.741182,9.4400063 14.692185,9.1790056 14.662188,8.838006 14.741182,8.4780054 14.92917,8.0970049 15.117157,7.7170048 15.343143,7.4560046 15.610125,7.3150043 15.799112,7.2360044 15.954103,7.1960044 16.080093,7.1960044z M16,2.071991C8.3200073,2.071991 2.0710449,8.3200073 2.0710449,16 2.0710449,23.681 8.3200073,29.928986 16,29.928986 23.680054,29.928986 29.929016,23.681 29.929016,16 29.929016,8.3200073 23.680054,2.071991 16,2.071991z M16,0C24.822998,0 32,7.178009 32,16 32,24.822998 24.822998,32 16,32 7.177002,32 0,24.822998 0,16 0,7.178009 7.177002,0 16,0z" fill="#000000" />
</svg>
&#13;
&#13;
&#13;

我在Xamarin Droid应用程序中使用NGraphics,但渲染图像的分辨率非常低,我该如何改进?

我使用SvgReader创建了一个Graphic对象,然后我用它来绘制控件CanvasCanvas中的Draw方法。我在创建SvgReader时尝试使用dpi选项进行游戏,但无济于事。

using (StringReader stringReader = new StringReader(svgDefinition))
{
    SvgReader svgReader = new SvgReader(stringReader);
    Graphic = svgReader.Graphic;
}

public override void Draw(Canvas canvas)
{   
    var canvasCanvas = new CanvasCanvas(canvas);
    Graphic?.Draw(canvasCanvas);
}

使用示例SVG,您可以点击并查看我在左侧所包含的96x96图像后的质量,在右侧您可以看到正在生成的内容,摘自三星Galaxy A5上的截图:

enter image description here

1 个答案:

答案 0 :(得分:2)

更改DPI值无法解决您所看到的问题。当绘图命令使用实际单位(如cm,mm,pt,pc)时,PixelsPerInch属性用于。

使用当前版本NGraphics SvgReader class,它看起来像是在宽度和高度属性指定的维度上渲染SVG,并且可选地约束到SVG文件中的viewBox或viewPort属性。一旦SVG数据被渲染,它就缩放到图像视图。要获得清晰的图像,您需要使SVG的宽度和高度与目标的预期画布一样大或大。

我从100x125框中绘制的Noun Project中获取了一个SVG。我将SVG加载到Adobe Illustrator中并将其重新调整为600x800并将其保存到.ai。然后我将.ai文件加载到PaintCode中并复制它生成的web svg。这个SVG在我在Android上使用的测试应用程序中呈现出色。

我希望有一种更简单的方法可以做到这一点,但这有助于验证解决问题的方法。