Xamarin.Forms 中的 SkiaSharp

在.Net Core下，没有可以支持跨平台的Drawing类库，官网提供的Common.Drawing只能在Windows下使用，那么在.Net Core下该如何处理图片呢？其实有很多第三方提供了解决方案，而我比较喜欢用的是Mono团队提供的SkiaSharp，原因是稳定而且支持的也很好，性能上也还好。

一、SkiaSharp是什么？

1.Skia介绍

Skia是Google旗下的2D图形处理库，下面是援引百科中的词条：

skia是个2D向量图形处理函数库，包含字型、坐标转换，以及点阵图都有高效能且简洁的表现。不仅用于Google Chrome浏览器，新兴的Android开放手机平台也采用skia作为绘图处理，搭配OpenGL/ES与特定的硬件特征，强化显示的效果。

Skia官网中是这样介绍的：

Skia is an open source 2D graphics library which provides common APIs that work across a variety of hardware and software platforms. It serves as the graphics engine for Google Chrome and Chrome OS, Android, Mozilla Firefox and Firefox OS, and many other products.

2.SkiaSharp介绍

SkiaSharp故名思义，就是在.net下使用Skia API的库，是SkiaSharp是由mono团队开发并进行持续维护，至今已经多年了。目前的最新版本是1.68.1.1，当前支持.net下的：

.NET Standard 1.3
.NET Core
Tizen
Xamarin.Android
Xamarin.iOS
Xamarin.tvOS
Xamarin.watchOS
Xamarin.Mac
Windows Classic Desktop (Windows.Forms / WPF)
Windows UWP (Desktop / Mobile / Xbox / HoloLens)

SkiaSharp项目：https://github.com/mono/SkiaSharp

以下参考：Xamarin.Forms 中的 SkiaSharp Graphics

3.预备知识

SkiaSharp for Xamarin.Forms打包为NuGet软件包。在Visual Studio或Visual Studio for Mac中创建Xamarin.Forms解决方案之后，可以使用NuGet包管理器搜索SkiaSharp.Views.Forms包并将其添加到解决方案中。

如果您的Xamarin.Forms应用程序以iOS为目标，请使用项目属性页将最低部署目标更改为iOS 8.0。

在任何使用SkiaSharp的C＃页面中，您都希望为SkiaSharp名称空间包含using指令，该指令包含您将在图形编程中使用的所有SkiaSharp类，结构和枚举。您还需要针对Xamarin.Forms特定类的SkiaSharp.Views.Forms命名空间使用using指令。这是一个较小的名称空间，最重要的类是SKCanvasView，该类派生自Xamarin.Forms View类，并承载您的SkiaSharp图形输出

注：SkiaSharp.Views.Forms命名空间还包含一个SKGLView类，该类派生自View，但使用OpenGL渲染图形。为简单起见，本指南将自身限制为SKCanvasView，但使用SKGLView却非常相似。

SkiaSharp绘图基础
您可以使用SkiaSharp绘制的一些最简单的图形是圆形，椭圆形和矩形。在显示这些图形时，您将了解SkiaSharp的坐标，大小和颜色。文本和位图的显示更为复杂，但是这些文章还介绍了这些技术。

SkiaSharp线和路径
图形路径是一系列连接的直线和曲线。路径可以是描边，填充或两者兼有。本文涵盖了线条绘制的许多方面，包括笔划结束和连接以及虚线和虚线，但在曲线几何形状方面停滞不前。

SkiaSharp转换
变换允许图形对象均匀地平移，缩放，旋转或倾斜。本文还说明了如何使用标准的3×3变换矩阵创建非仿射变换并将变换应用于路径。

SkiaSharp曲线和路径
通过向路径对象添加曲线以及利用其他强大的路径功能，继续探索路径。您将看到如何在简洁的文本字符串中指定整个路径，如何使用路径效果以及如何深入研究路径内部。

SkiaSharp位图Bitmaps
位图是与显示设备的像素相对应的位的矩形阵列。本系列文章展示了如何加载，保存，显示，创建，绘制，动画化和访问SkiaSharp位图的位。

SkiaSharp特效
效果是会改变图形正常显示的属性，包括线性和圆形渐变，位图平铺，混合模式，模糊等。

二、SkiaSharp Drawing Basics

1、绘制圆圈

including canvases（画布） and paint objects（绘制对象）

一些对象：

SKCanvasView类似StackLayout等view。可以将SKCanvasView与其他Xamarin.Forms View派生词组合

PaintSurface事件处理程序是您绘制所有图形的地方

SKImageInfo结构包含有关绘图表面的信息，最重要的是其宽度和高度（以像素为单位）。

SKSurface对象代表绘图表面本身，最重要属性是SKCanvas类型的Canvas。此类是用于执行实际绘图的图形绘图上下文，SKCanvas对象封装了图形状态，其中包括图形转换和裁剪。

SKPaint对象只不过是图形绘制属性的集合，这些对象是轻量级的。您可以像该程序一样重复使用SKPaint对象，也可以为图形属性的各种组合创建多个SKPaint对象。您可以在PaintSurface事件处理程序之外创建和初始化这些对象，也可以将它们另存为页面类中的字段。

SKPaintStyle

The default is Fill 填充.，Stroke为划线（轮廓），StrokeAndFill为描边线条，并用相同的颜色填充内部。

 public partial class SimpleCirclePage : ContentPage
    {
        /// <summary>
        /// 绘制一个圆圈，
        /// 创建一个SKCanvasView对象来承载图形，处理PaintSurface事件以及使用SKPaint对象来指定颜色和其他图形属性。
        /// </summary>
        public SimpleCirclePage()
        {
            InitializeComponent();

            Title = "Simple Circle";

            //SKCanvasView类似StackLayout等view。 可以将SKCanvasView与其他Xamarin.Forms View派生词组合
            SKCanvasView canvasView = new SKCanvasView();
            canvasView.WidthRequest = 100;
            canvasView.HeightRequest = 100;
            canvasView.PaintSurface += OnCanvasViewPaintSurface;
            Content = canvasView;
        }

        /// <summary>
        /// PaintSurface事件处理程序是您绘制所有图形的地方。 程序运行时，可以多次调用此方法【例如旋转屏幕】，因此它应保留重新创建图形显示所需的所有信息：
        /// </summary>
        /// <param name="sender"></param>
        /// <param name="args"></param>
        void OnCanvasViewPaintSurface(object sender, SKPaintSurfaceEventArgs args)
        {
            //SKPaintSurfaceEventArgs 有两个重要的属性：Info和Surface
           
            //SKImageInfo结构包含有关绘图表面的信息，最重要的是其宽度和高度（以像素为单位）。 
            
            //SKSurface对象代表绘图表面本身。 在此程序中，绘图表面是视频显示，但在其他程序中，SKSurface对象也可以表示您使用SkiaSharp进行绘图的 Bitmaps位图。
            //SKSurface的最重要属性是SKCanvas类型的Canvas。此类是用于执行实际绘图的图形绘图上下文，SKCanvas对象封装了图形状态，其中包括图形转换和裁剪。

            SKImageInfo info = args.Info;
            SKSurface surface = args.Surface;
            SKCanvas canvas = surface.Canvas;

            //Clear方法使用透明颜色清除画布。 重载使您可以为画布指定背景色。
            canvas.Clear();

            //绘制一个半径为100像素的圆。 圆的轮廓为红色，圆的内部为蓝色。
            //因为此特定的图形图像包含两种不同的颜色，所以该工作需要分两个步骤完成。 第一步是绘制圆的轮廓，要指定线条的颜色和其他特征，请创建并初始化SKPaint对象：
            SKPaint paint = new SKPaint
            {
                Style = SKPaintStyle.Stroke, //划 线
                Color = Color.Red.ToSKColor(),
                StrokeWidth = 50   //线的粗细，50像素
            };
            //相对于显示表面的左上角指定坐标。 X坐标向右增加，Y坐标向下增加。 在讨论图形时，通常使用数学符号（x，y）表示一个点。 点（0，0）是显示表面的左上角，通常称为原点。
            //DrawCircle的前两个参数指示圆心的X和Y坐标。 将它们分配给显示表面宽度和高度的一半，以将圆心置于显示表面的中心。 第三个参数指定圆的半径，最后一个参数是SKPaint对象。
            canvas.DrawCircle(info.Width / 2, info.Height / 2, 200, paint);

            //要填充圆的内部，可以更改SKPaint对象的两个属性，然后再次调用DrawCircle。
            paint.Style = SKPaintStyle.Fill; //填充
            paint.Color = SKColors.Blue;
            canvas.DrawCircle(info.Width / 2, info.Height / 2, 170, paint);
        }

    }

View Code