Xamarin.Forms是一个通用的跨平台用户界面工具包,允许单个程序在iOS,Android,通用Windows平台和(最近)的MacOS上运行。

但是,Xamarin.Forms中缺少一个功能是图形系统。 Xamarin.Forms可以渲染位图,您可以对一些简单的块状图像进行尺寸和旋转BoxView,但是对于那些喜欢图形编程的人来说,Xamarin.Forms有一个大的多边形孔。

但不要担心! Xamarin.Forms图形的一个非常引人注目的解决方案是Shttps://developer.xamarin.com/guides/xamarin-forms/advanced/skiasharp/transforms/kiaSharp,Xamarin的C#库,它集成了Google强大的Skia Graphics Engine。Old-school graphics with SkiaSharp.

SkiaSharp是一款跨平台,高性能的适合 .NET开发人员的2D API,非常适合移动开发。 API非常简单,可以用来做简单的事情,如绘图形状或文本,一直到复杂的实时绘图应用程序 Xamarin团队甚至创建了一个WYSIWYG图形设计器,它提供了SkiaSharp图形代码。

作为Xamarin文档团队的成员,我一直在撰写我希望在Xamarin.Forms中使用SkiaSharp的广泛系列的大小小的教程。 这些文章代表了对SkiaSharp的深入了解,但我希望也可以作为新来的2D图形的介绍。 SkiaSharp与其他2D图形绘图系统共享许多概念,所以学习SkiaSharp是获得二维矢量图形通用教育的好办法。

最近,我已经完成了几篇关于SkiaSharp Transforms的文章。 SkiaSharp支持在其他图形系统中发现的所有基本图形变换,包括平移,缩放,旋转和倾斜,可以倾斜图形对象(如阴影):

Example of drawing shadows in SkiaSharp.

该图像使用SKPaint对象来定义文本输出的特征。 对于阴影(首先绘制),代码设置不同的颜色和翻译,缩放和偏移的组合,以放大文本并将其倾斜到一边:

点击(此处)折叠或打开

  1. using (SKPaint textPaint = new SKPaint())
  2. {
  3.     textPaint.Style = SKPaintStyle.Fill;
  4.     textPaint.TextSize = screenWidth / 6;
  5.     textPaint.IsAntialias = true;
  6.  
  7.     // Common to shadow and text
  8.     string text = "shadow";
  9.     float xText = 20;
  10.     float yText = screenHeight / 2;
  11.  
  12.     // Shadow
  13.     textPaint.Color = SKColors.Gray;
  14.     canvas.Save();
  15.     canvas.Translate(xText, yText);
  16.     canvas.Skew((float)Math.Tan(-Math.PI / 4), 0);
  17.     canvas.Scale(1, 3);
  18.     canvas.Translate(-xText, -yText);
  19.     canvas.DrawText(text, xText, yText, textPaint);
  20.     canvas.Restore();
  21.  
  22.     // Text
  23.     textPaint.Color = SKColors.Blue;
  24.     canvas.DrawText(text, xText, yText, textPaint);
  25. }

SkiaSharp还支持标准矩阵变换,包括非仿射变换,可以实现透视和3D旋转效果,如本博客顶部的图像。

在移动平台和其他现代设备上,图形通常与触摸密切相关。 Xamarin.Forms支持一些初步的触摸事件,但不是跟踪单个手指的基本工具。 Xamarin.Forms的更复杂的触摸跟踪现在可用于从“效果调用事件”中描述的Xamarin.Forms效果。

结合SkiaSharp和触摸跟踪可以产生一些有趣的应用程序。 我最近创建了一个Xamarin.Forms版本的SpinPaint,基于我在七年前首次为Microsoft桌面计算机(最初称为Surface,之后更名为PixelSense)编写的一个程序。

SpinPaint模拟旋转盘。 触摸它或在其上移动手指,它不仅绘制与您的手指相对应的线条,而且还可以绘制三条其他线路,即镜像,创建漂亮的图案。 这里的SpinPaint在iOS,Android和通用Windows平台上运行:

Painting graphics with SkiaSharp

我认为SkiaSharp最令我印象深刻的是它的多功能性。 例如,其他2D图形系统对于绘制圆弧的最佳方式并不完全一致,圆弧是椭圆的圆周上的曲线。 不同的图形系统以非常不同的方式定义弧。

SkiaSharp不会强迫你以特定的方式思考弧线; 相反,它支持三种不同的方式来在图形路径中定义弧,因此您可以使用最适合您特定应用程序的弧线:

角度弧要求您为椭圆指定边界矩形,以及起始角度和扫掠角度:

点击(此处)折叠或打开

  1. path.AddArc(rect, startAngle, sweepAngle);


结果弧显示为红色:

Angle arc drawn with SkiaSharp

这与Android Path对象的AddArc和ArcTo方法相同,类似于iOS CGPath的AddArc方法(尽管iOS版本限制在圆周上的圆弧)。 这种弧形对于饼图是非常好的。

切线弧与PostScript arct功能和iOS AddArcToPoint方法类似。 指定圆的半径,然后紧贴在两条连接线之间:

点击(此处)折叠或打开

  1. path.ArcTo(pointCorner, pointDestination, radius);


SkiaSharp画一条线和圆弧,再次显示为红色:

Drawing a tangent arc with SkiaSharp.

切线弧是圆角的理想选择。

最后,椭圆弧允许您指定椭圆的两个半径以及旋转角度。 所得到的倾斜椭圆可以以两种不同的方式装配在两个点之间,导致两个点之间的四个不同的弧,这里显示四种不同的颜色:

Drawing an elliptical arc with SkiaSharp.

您可以使用两个其他参数指定这四个可能的弧中的哪一个:

点击(此处)折叠或打开

  1. ArcTo (radii, rotation, largeArcFlag, sweepDirectionFlag, point)


这种类型的弧规格与可伸缩矢量图形(SVG)支持的椭圆弧以及基于XAML的Windows图形系统(包括通用Windows平台)支持的ArcSegment一致。

如果您认为弧形绘图是多才多艺的,请等到您看到SkiaSharp的着色器和路径效果! 着色器允许您指定填充区域的各种梯度,包括线性渐变,径向梯度,锥形梯度,扫描梯度和称为Perlin噪声的随机模式。 路径效果可以使您想要的点或虚线的任何图案呈现点划线或虚线,也可以渲染由小图案组成的线条:

SkiaSharp drawing a patterned texture.

结束语

还有更多的SkiaSharp文章来,请检查在Xamarin.Forms页面中使用SkiaSharp来查看新功能。

同时,您还将要注册,这是七月份的五个必看网络研讨会,其中包括一个我将在SkiaSharp Graphics上为Xamarin.Forms做的工作。