与 Xamarin.Forms 集成

项目
02/09/2017

创建响应触摸和 Xamarin.Forms 元素的 SkiaSharp 图形

SkiaSharp 图形可以通过多种方式与 Xamarin.Forms 的其余部分集成。可以将 SkiaSharp 画布和 Xamarin.Forms 元素合并在同一页上，甚至可以将 Xamarin.Forms 元素放置在 SkiaSharp 画布的之上：

使用滑块选择颜色

在 Xamarin.Forms 中创建交互式 SkiaSharp 图形的另一种方法是通过触摸。

示例程序中的第二页标题为“点击切换填充”。它用两种方式绘制一个简单的圆圈 - 无填充和有填充 - 点击即可切换。 TapToggleFillPage 类演示如何更改 SkiaSharp 图形以响应用户输入。

对于此页面，SKCanvasView 类会在 TapToggleFill.xaml 文件中实例化，该文件还会在视图上设置 Xamarin.FormsTapGestureRecognizer：

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:skia="clr-namespace:SkiaSharp.Views.Forms;assembly=SkiaSharp.Views.Forms"
             x:Class="SkiaSharpFormsDemos.TapToggleFillPage"
             Title="Tap Toggle Fill">

    <skia:SKCanvasView PaintSurface="OnCanvasViewPaintSurface">
        <skia:SKCanvasView.GestureRecognizers>
            <TapGestureRecognizer Tapped="OnCanvasViewTapped" />
        </skia:SKCanvasView.GestureRecognizers>
    </skia:SKCanvasView>
</ContentPage>

请注意 skia XML 命名空间声明。

TapGestureRecognizer 对象的 Tapped 处理程序只需切换布尔字段的值并调用 SKCanvasView 的 InvalidateSurface 方法：

bool showFill = true;
...
void OnCanvasViewTapped(object sender, EventArgs args)
{
    showFill ^= true;
    (sender as SKCanvasView).InvalidateSurface();
}

对 InvalidateSurface 的调用会有效地生成对 PaintSurface 处理程序的调用，该处理程序使用 showFill 字段来填充或不填充圆圈：

void OnCanvasViewPaintSurface(object sender, SKPaintSurfaceEventArgs args)
{
    SKImageInfo info = args.Info;
    SKSurface surface = args.Surface;
    SKCanvas canvas = surface.Canvas;

    canvas.Clear();

    SKPaint paint = new SKPaint
    {
        Style = SKPaintStyle.Stroke,
        Color = Color.Red.ToSKColor(),
        StrokeWidth = 50
    };
    canvas.DrawCircle(info.Width / 2, info.Height / 2, 100, paint);

    if (showFill)
    {
        paint.Style = SKPaintStyle.Fill;
        paint.Color = SKColors.Blue;
        canvas.DrawCircle(info.Width / 2, info.Height / 2, 100, paint);
    }
}

StrokeWidth 属性已设置为 50，以强调差异。还可以先绘制内部，然后再绘制轮廓来查看整个线条宽度。默认情况下，稍后在 PaintSurface 事件处理程序中绘制的图形会掩盖之前在处理程序中绘制的图形。

“颜色探索”页面演示了如何将 SkiaSharp 图形与其他 Xamarin.Forms 元素集成，并演示了在 SkiaSharp 中定义颜色的两种替代方法之间的差异。静态 SKColor.FromHsl 方法基于“色调-饱和度-亮度”模型创建 SKColor 值：

public static SKColor FromHsl (Single h, Single s, Single l, Byte a)

静态 SKColor.FromHsv 方法基于类似的“色调-饱和度-值”模型创建 SKColor 值：

public static SKColor FromHsv (Single h, Single s, Single v, Byte a)

在这两种情况下，参数 h 的范围均为 0 到 360。 s、l 和 v 参数的范围为 0 到 100。 a（alpha 或不透明度）参数的范围为 0 到 255。

ColorExplorePage.xaml 文件与 Slider 和 Label 视图会并排在 StackLayout 中创建两个 SKCanvasView 对象，允许用户选择 HSL 和 HSV 颜色值：

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:skia="clr-namespace:SkiaSharp.Views.Forms;assembly=SkiaSharp.Views.Forms"
             x:Class="SkiaSharpFormsDemos.Basics.ColorExplorePage"
             Title="Color Explore">
    <StackLayout>
        <!-- Hue slider -->
        <Slider x:Name="hueSlider"
                Maximum="360"
                Margin="20, 0"
                ValueChanged="OnSliderValueChanged" />

        <Label HorizontalTextAlignment="Center"
               Text="{Binding Source={x:Reference hueSlider},
                              Path=Value,
                              StringFormat='Hue = {0:F0}'}" />

        <!-- Saturation slider -->
        <Slider x:Name="saturationSlider"
                Maximum="100"
                Margin="20, 0"
                ValueChanged="OnSliderValueChanged" />

        <Label HorizontalTextAlignment="Center"
               Text="{Binding Source={x:Reference saturationSlider},
                              Path=Value,
                              StringFormat='Saturation = {0:F0}'}" />

        <!-- Lightness slider -->
        <Slider x:Name="lightnessSlider"
                Maximum="100"
                Margin="20, 0"
                ValueChanged="OnSliderValueChanged" />

        <Label HorizontalTextAlignment="Center"
               Text="{Binding Source={x:Reference lightnessSlider},
                              Path=Value,
                              StringFormat='Lightness = {0:F0}'}" />

        <!-- HSL canvas view -->
        <Grid VerticalOptions="FillAndExpand">
            <skia:SKCanvasView x:Name="hslCanvasView"
                               PaintSurface="OnHslCanvasViewPaintSurface" />

            <Label x:Name="hslLabel"
                   HorizontalOptions="Center"
                   VerticalOptions="Center"
                   BackgroundColor="Black"
                   TextColor="White" />
        </Grid>

        <!-- Value slider -->
        <Slider x:Name="valueSlider"
                Maximum="100"
                Margin="20, 0"
                ValueChanged="OnSliderValueChanged" />

        <Label HorizontalTextAlignment="Center"
               Text="{Binding Source={x:Reference valueSlider},
                              Path=Value,
                              StringFormat='Value = {0:F0}'}" />

        <!-- HSV canvas view -->
        <Grid VerticalOptions="FillAndExpand">
            <skia:SKCanvasView x:Name="hsvCanvasView"
                               PaintSurface="OnHsvCanvasViewPaintSurface" />

            <Label x:Name="hsvLabel"
                   HorizontalOptions="Center"
                   VerticalOptions="Center"
                   BackgroundColor="Black"
                   TextColor="White" />
        </Grid>
    </StackLayout>
</ContentPage>

这两个 SKCanvasView 元素位于单个单元格 Grid 中，顶部有一个 Label，用于显示生成的 RGB 颜色值。

ColorExplorePage.xaml.cs 代码隐藏文件相对简单。三个 Slider 元素的共享 ValueChanged 处理程序会使两个 SKCanvasView 元素失效。 PaintSurface 处理程序使用 Slider 元素指示的颜色清除画布，并会设置位于 SKCanvasView 元素顶部的 Label：

public partial class ColorExplorePage : ContentPage
{
    public ColorExplorePage()
    {
        InitializeComponent();

        hueSlider.Value = 0;
        saturationSlider.Value = 100;
        lightnessSlider.Value = 50;
        valueSlider.Value = 100;
    }

    void OnSliderValueChanged(object sender, ValueChangedEventArgs args)
    {
        hslCanvasView.InvalidateSurface();
        hsvCanvasView.InvalidateSurface();
    }

    void OnHslCanvasViewPaintSurface(object sender, SKPaintSurfaceEventArgs args)
    {
        SKColor color = SKColor.FromHsl((float)hueSlider.Value,
                                        (float)saturationSlider.Value,
                                        (float)lightnessSlider.Value);
        args.Surface.Canvas.Clear(color);

        hslLabel.Text = String.Format(" RGB = {0:X2}-{1:X2}-{2:X2} ",
                                      color.Red, color.Green, color.Blue);
    }

    void OnHsvCanvasViewPaintSurface(object sender, SKPaintSurfaceEventArgs args)
    {
        SKColor color = SKColor.FromHsv((float)hueSlider.Value,
                                        (float)saturationSlider.Value,
                                        (float)valueSlider.Value);
        args.Surface.Canvas.Clear(color);

        hsvLabel.Text = String.Format(" RGB = {0:X2}-{1:X2}-{2:X2} ",
                                      color.Red, color.Green, color.Blue);
    }
}

在 HSL 和 HSV 颜色模型中，色调值范围为 0 到 360，并会指示颜色的主导色调。这些是彩虹的传统颜色：红色、橙色、黄色、绿色、蓝色、靛蓝色、紫罗兰色，并会循环回红色。

在 HSL 模型中，亮度的 0 值始终为黑色，100 值始终为白色。当饱和度值为 0 时，0 到 100 之间的亮度值为不同的灰色。增加饱和度会增加更多颜色。当饱和度为 100，亮度为 50 时，会出现纯色（即 RGB 值中一个分量等于 255，另一个分量等于 0，第三个分量在 0 到 255 之间）。

在 HSV 模型中，纯色会在饱和度和值均为 100 时产生。如果值为 0，不论其他设置如何，颜色均为黑色。当饱和度为 0 且值范围为 0 到 100 时，会出现灰色阴影。

但是，了解这两种模式的最佳方法是亲自尝试：

SkiaSharp API

通过

与 Xamarin.Forms 集成

相关链接

其他资源