Integrace s Xamarin.Forms

Ukázka stažení Stažení ukázky

Vytváření ve skiasharpu grafiky, které reagují na dotykové ovládání a prvky

Ve skiasharpu Graphics můžete integrovat se zbytkem Xamarin.Forms několika způsobů. Můžete kombinovat plátno ve skiasharpu a Xamarin.Forms elementy na stejné stránce a dokonce umístit Xamarin.Forms prvky na plátno ve skiasharpu:

Výběr barvy pomocí posuvníků

Dalším přístupem k vytváření interaktivní ve skiasharpu grafiky v nástroji Xamarin.Forms je prostřednictvím dotykového ovládání. Druhá stránka v programu SkiaSharpFormsDemos má nárok na přepnutí výplně. Kreslí jednoduché kruhy dvěma způsoby – bez výplně a s výplní – přepínat klepnutím. TapToggleFillPageTřída ukazuje, jak lze změnit ve skiasharpu grafiku v reakci na uživatelský vstup.

Pro tuto stránku SKCanvasView je vytvořena instance třídy v souboru SKCanvasView , který také nastaví Xamarin.FormsTapGestureRecognizer v zobrazení:

<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>

Všimněte si skia deklarace oboru názvů XML.

TappedObslužná rutina pro TapGestureRecognizer objekt jednoduše přepíná hodnotu logického pole a volá InvalidateSurface metodu SKCanvasView :

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

Volání InvalidateSurface účinně vygeneruje volání PaintSurface obslužné rutiny, které používá showFill pole k vyplnění nebo nevyplnění kruhu:

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);
    }
}

StrokeWidthVlastnost byla nastavena na 50, čímž se zvýrazní rozdíl. Celou šířku čáry můžete zobrazit také tak, že nejprve nakreslíte vnitřek a potom obrys. Ve výchozím nastavení obrázky grafiky, které jsou vyvykreslovány později v PaintSurface obslužné rutině události, překrývají objekty vykreslené dříve v obslužné rutině.

Stránka prozkoumat barvy ukazuje, jak lze také integrovat ve skiasharpu grafiku s jinými prvky a také ukazuje rozdíl mezi dvěma alternativními metodami pro definování barev v ve skiasharpu. Statická SKColor.FromHsl Metoda vytvoří SKColor hodnotu založenou na modelu sytosti a sytosti barvy:

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

Statická SKColor.FromHsv Metoda vytvoří SKColor hodnotu na základě podobného modelu sytosti a sytosti hodnoty:

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

V obou případech je h argumentem rozsah od 0 do 360. sArgumenty, l a jsou v v rozsahu od 0 do 100. aArgumenty (alfa nebo opacity) jsou v rozsahu od 0 do 255.

Soubor ColorExplorePage. XAML vytvoří dva objekty vedle sebe Slider a Label zobrazení, která umožňují uživateli vybrat hodnoty barev HSL a 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>

Tyto dva SKCanvasView prvky jsou v jedné buňce Grid s Label nahlídáním na začátku pro zobrazení výsledné hodnoty barvy RGB.

Soubor s kódem na pozadí ColorExplorePage. XAML. cs je poměrně jednoduchý. Sdílená ValueChanged obslužná rutina pro tři Slider prvky jednoduše zruší platnost obou SKCanvasView prvků. PaintSurfaceObslužné rutiny vyčistí plátno barvou, které jsou označeny Slider prvky a také nastavují Label na SKCanvasView prvcích:

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);
    }
}

V barevných modelech HSL a HSV má hodnota odstín rozsah od 0 do 360 a označuje dominantní odstín barvy. Jedná se o tradiční barvy mezi duha: červená, oranžová, žlutá, zelená, modrá, Indigo, fialová a zadní v kruhu.

V modelu HSL je hodnota 0 pro světlost vždy černá a hodnota 100 je vždy bílá. Je-li hodnota sytosti 0, hodnoty světlosti mezi 0 a 100 jsou odstíny šedé. Zvýšení sytosti přidá další barvu. Čisté barvy (což jsou hodnoty RGB s jednou komponentou, která se rovná 255, jiná hodnota je 0, a třetí v rozsahu od 0 do 255) nastane, pokud je sytost v 100 a světlost je 50.

V modelu HSV vyplynou čistě barvy, pokud jsou sytost i hodnota 100. Pokud je hodnota 0, bez ohledu na ostatní nastavení, je barva černá. Šedé odstíny vznikají, pokud je sytost 0 a rozsah hodnot je od 0 do 100.

Ale nejlepší způsob, jak získat dojem pro tyto dva modely, je experimentovat s nimi sami:

trojím obrazovky barvy stránky prozkoumat