如何在 Xamarin 表单上使用 SkiaSharp 加载文件 .svg? [英] How to load file .svg with SkiaSharp on Xamarin forms?

问题描述

如何在 Xamarin 表单上使用

B2> 下载所需的库，例如:SkiaSharp、SkiaSharp.Views.Forms、SkiaSharp.Extended.Svg

B3> 在 behind code 处，使用方法 LoadSvg(xCanvasView.AutomationId) 在 Page 的构造函数中(Example:页面是 ListNewConversationPage).并声明所需的函数:

 私有 SKSvg svg；//获取文件 .svg 到文件夹 Images私有静态流 GetImageStream(string svgName){var type = typeof(ListNewConversationPage).GetTypeInfo();var assembly = type.Assembly;var abc = assembly.GetManifestResourceStream($"{assembly.GetName().Name}.Images.{svgName}");返回 abc；}私有无效LoadSvg(字符串svgName){//创建一个新的 SVG 对象svg = 新 SKSvg();//从流中加载 SVG 文档使用 (var stream = GetImageStream(svgName))svg.Load(stream);}私有无效 OnPageAppearing(对象发送者，EventArgs e){svg = 空；var page = (ContentPage)sender;LoadSvg(page.AutomationId);var canvas = (SKCanvasView)page.Content;canvas.InvalidateSurface();}私有无效 OnPainting(对象发送者，SKPaintSurfaceEventArgs e){尝试{var 表面 = e.Surface;var canvas = surface.Canvas;var width = e.Info.Width;var height = e.Info.Height;//清除表面canvas.Clear(SKColors.White);//该页面尚不可见如果(svg == null)返回;//计算需要适应屏幕的缩放比例浮动 scaleX = 宽度/svg.Picture.CullRect.Width;浮动 scaleY = 高度/svg.Picture.CullRect.Height;var 矩阵 = SKMatrix.MakeScale(scaleX, scaleY);//绘制 svgcanvas.DrawPicture(svg.Picture, ref matrix);}捕获(异常前){Console.WriteLine(ex);}}

B4> 在 .xaml 文件中，与 .svg 一起使用，图像是 image_part_circle.svg

请在 SkiaSharp.Extended 上查看更多信息

How to load file .svg with SkiaSharp on Xamarin Forms (Android and iOS).

I tried Load SVG file in Xamarin with SkiaSharp, but i can't load it.

I tried to use SkiaSharp.Extended and refer to their Demos, but still cannot load it.

Am I doing anything wrong?

please help me!

解决方案

B1> Create a folder Images in your project Xamarin forms and save image .svg at this. Make sure you select Build Action as "EmbeddedResource"

B2> Download the required libraries like: SkiaSharp, SkiaSharp.Views.Forms, SkiaSharp.Extended.Svg

B3> At behind code, use method LoadSvg(xCanvasView.AutomationId) at contructor of Page (Example: Page is ListNewConversationPage). And declare the required functions:

 private SKSvg svg;

        // Get file .svg to folder Images
    private static Stream GetImageStream(string svgName)
    {
        var type = typeof(ListNewConversationPage).GetTypeInfo();
        var assembly = type.Assembly;

        var abc = assembly.GetManifestResourceStream($"{assembly.GetName().Name}.Images.{svgName}");
        return abc;
    }


        private void LoadSvg(string svgName)
    {
        // create a new SVG object
        svg = new SKSvg();

        // load the SVG document from a stream
        using (var stream = GetImageStream(svgName))
            svg.Load(stream);
    }


        private void OnPageAppearing(object sender, EventArgs e)
    {
        svg = null;

        var page = (ContentPage)sender;
        LoadSvg(page.AutomationId);

        var canvas = (SKCanvasView)page.Content;
        canvas.InvalidateSurface();
    }

        private void OnPainting(object sender, SKPaintSurfaceEventArgs e)
    {
        try
        {
            var surface = e.Surface;
            var canvas = surface.Canvas;

            var width = e.Info.Width;
            var height = e.Info.Height;

            // clear the surface
            canvas.Clear(SKColors.White);

            // the page is not visible yet
            if (svg == null)
                return;

            // calculate the scaling need to fit to screen
            float scaleX = width / svg.Picture.CullRect.Width;
            float scaleY = height / svg.Picture.CullRect.Height;
            var matrix = SKMatrix.MakeScale(scaleX, scaleY);

            // draw the svg
            canvas.DrawPicture(svg.Picture, ref matrix);
        }
        catch (Exception ex)
        {
            Console.WriteLine(ex);
        }
    }

B4> At .xaml file, use it with .svg image is image_part_circle.svg

                   <forms:SKCanvasView x:Name="xCanvasView"
                                   PaintSurface="OnPainting"
                                   HorizontalOptions="FillAndExpand"
                                   VerticalOptions="FillAndExpand"
                                   BackgroundColor="Blue"
                                   AutomationId="image_part_circle.svg" />

Please see more at SkiaSharp.Extended

这篇关于如何在 Xamarin 表单上使用 SkiaSharp 加载文件 .svg?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！