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。
SkiaSharp是一款跨平台,高性能的适合 .NET开发人员的2D API,非常适合移动开发。 API非常简单,可以用来做简单的事情,如绘图形状或文本,一直到复杂的实时绘图应用程序。 Xamarin团队甚至创建了一个WYSIWYG图形设计器,它提供了SkiaSharp图形代码。
作为Xamarin文档团队的成员,我一直在撰写我希望在Xamarin.Forms中使用SkiaSharp的广泛系列的大小小的教程。 这些文章代表了对SkiaSharp的深入了解,但我希望也可以作为新来的2D图形的介绍。 SkiaSharp与其他2D图形绘图系统共享许多概念,所以学习SkiaSharp是获得二维矢量图形通用教育的好办法。
最近,我已经完成了几篇关于SkiaSharp Transforms的文章。 SkiaSharp支持在其他图形系统中发现的所有基本图形变换,包括平移,缩放,旋转和倾斜,可以倾斜图形对象(如阴影):
该图像使用SKPaint对象来定义文本输出的特征。 对于阴影(首先绘制),代码设置不同的颜色和翻译,缩放和偏移的组合,以放大文本并将其倾斜到一边:
点击(此处)折叠或打开
-
using (SKPaint textPaint = new SKPaint())
-
{
-
textPaint.Style = SKPaintStyle.Fill;
-
textPaint.TextSize = screenWidth / 6;
-
textPaint.IsAntialias = true;
-
-
// Common to shadow and text
-
string text = "shadow";
-
float xText = 20;
-
float yText = screenHeight / 2;
-
-
// Shadow
-
textPaint.Color = SKColors.Gray;
-
canvas.Save();
-
canvas.Translate(xText, yText);
-
canvas.Skew((float)Math.Tan(-Math.PI / 4), 0);
-
canvas.Scale(1, 3);
-
canvas.Translate(-xText, -yText);
-
canvas.DrawText(text, xText, yText, textPaint);
-
canvas.Restore();
-
-
// Text
-
textPaint.Color = SKColors.Blue;
-
canvas.DrawText(text, xText, yText, textPaint);
- }
SkiaSharp还支持标准矩阵变换,包括非仿射变换,可以实现透视和3D旋转效果,如本博客顶部的图像。
在移动平台和其他现代设备上,图形通常与触摸密切相关。 Xamarin.Forms支持一些初步的触摸事件,但不是跟踪单个手指的基本工具。 Xamarin.Forms的更复杂的触摸跟踪现在可用于从“效果调用事件”中描述的Xamarin.Forms效果。
结合SkiaSharp和触摸跟踪可以产生一些有趣的应用程序。 我最近创建了一个Xamarin.Forms版本的SpinPaint,基于我在七年前首次为Microsoft桌面计算机(最初称为Surface,之后更名为PixelSense)编写的一个程序。
SpinPaint模拟旋转盘。 触摸它或在其上移动手指,它不仅绘制与您的手指相对应的线条,而且还可以绘制三条其他线路,即镜像,创建漂亮的图案。 这里的SpinPaint在iOS,Android和通用Windows平台上运行:
我认为SkiaSharp最令我印象深刻的是它的多功能性。 例如,其他2D图形系统对于绘制圆弧的最佳方式并不完全一致,圆弧是椭圆的圆周上的曲线。 不同的图形系统以非常不同的方式定义弧。
SkiaSharp不会强迫你以特定的方式思考弧线; 相反,它支持三种不同的方式来在图形路径中定义弧,因此您可以使用最适合您特定应用程序的弧线:
角度弧要求您为椭圆指定边界矩形,以及起始角度和扫掠角度:
点击(此处)折叠或打开
- path.AddArc(rect, startAngle, sweepAngle);
结果弧显示为红色:
这与Android Path对象的AddArc和ArcTo方法相同,类似于iOS CGPath的AddArc方法(尽管iOS版本限制在圆周上的圆弧)。 这种弧形对于饼图是非常好的。
切线弧与PostScript arct功能和iOS AddArcToPoint方法类似。 指定圆的半径,然后紧贴在两条连接线之间:
点击(此处)折叠或打开
- path.ArcTo(pointCorner, pointDestination, radius);
SkiaSharp画一条线和圆弧,再次显示为红色:
切线弧是圆角的理想选择。
最后,椭圆弧允许您指定椭圆的两个半径以及旋转角度。 所得到的倾斜椭圆可以以两种不同的方式装配在两个点之间,导致两个点之间的四个不同的弧,这里显示四种不同的颜色:
您可以使用两个其他参数指定这四个可能的弧中的哪一个:
点击(此处)折叠或打开
- ArcTo (radii, rotation, largeArcFlag, sweepDirectionFlag, point)
这种类型的弧规格与可伸缩矢量图形(SVG)支持的椭圆弧以及基于XAML的Windows图形系统(包括通用Windows平台)支持的ArcSegment一致。
如果您认为弧形绘图是多才多艺的,请等到您看到SkiaSharp的着色器和路径效果! 着色器允许您指定填充区域的各种梯度,包括线性渐变,径向梯度,锥形梯度,扫描梯度和称为Perlin噪声的随机模式。 路径效果可以使您想要的点或虚线的任何图案呈现点划线或虚线,也可以渲染由小图案组成的线条:
结束语
还有更多的SkiaSharp文章来,请检查在Xamarin.Forms页面中使用SkiaSharp来查看新功能。
同时,您还将要注册,这是七月份的五个必看网络研讨会,其中包括一个我将在SkiaSharp Graphics上为Xamarin.Forms做的工作。