天天看点

用Xamarin.Forms深入SkiaSharp

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

用Xamarin.Forms深入SkiaSharp

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

用Xamarin.Forms深入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;

}

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

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

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

用Xamarin.Forms深入SkiaSharp

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

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

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

path.AddArc(rect, startAngle, sweepAngle);

结果弧显示为红色:

用Xamarin.Forms深入SkiaSharp

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

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

path.ArcTo(pointCorner, pointDestination, radius);

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

用Xamarin.Forms深入SkiaSharp

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

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

用Xamarin.Forms深入SkiaSharp

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

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

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

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

用Xamarin.Forms深入SkiaSharp

继续阅读