21. diel - Grafika pomocou SkiaSharp v Xamarin.Forms - Úvod

V minulej lekcii, Aplikácie na počasie v Xamarin.Forms - Spracovanie upraveného , sme dokončili Xamarin.Forms aplikáciu pre predpoveď počasia.

V dnešnom Xamarin tutoriále si ukážeme, ako do mobilné aplikácie vkladať grafické prvky. Budeme pracovať s obrázkami as animáciami pomocou knižnice SkiaSharp. Vytvoríme si jednoduchú mobilnú hru, v ktorej budeme hráčom zobrazovať rôzne obrázky. Hráči potom vyberú jednu správnu odpoveď. Výsledná aplikácia bude vyzerať takto:

Inštalácia SkiaSharp

Vytvoríme nový projekt, ktorý pomenujeme SkiaSharpGame. Pre inštaláciu knižnice SkiaSharp klikneme v okne roztoku Explorer pravým tlačidlom na Solution a vyberieme možnosť Manage nugety Packages for Solutions.

Nájdeme knižnice SkiaSharp a SkiaSharp.Views.Forms, ktoré nainštalujeme do projektu SkiaSharpGame:

Implementácia SKCanvasView

Teraz môžeme použiť všetko, čo nám táto knižnica ponúka. Presunieme sa do MainPage.xaml.

MainPage.xaml

Aby sme SkiaSharp mohli použiť, musíme do definície elementu <ContentPage> vložiť riadok s xmls:skia, viď nižšie:

<?xml version="1.0" encoding="utf-8" ?>
<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="SkiaSharpGame.MainPage">
...

<AbsoluteLayout>

<AbsoluteLayout> sme doteraz príliš nepoužívali. Podobne ako <Grid> alebo <StackLayout> nám umožňuje vkladať rôzne prvky na absolútnu, či relatívnu pozíciu. Vzhľadom k rôznym veľkostiam mobilných zariadení sa s absolútnou pozíciou príliš často nestretneme. Pre vloženie prvku na požadovanú relatívnu pozíciu využijeme LayoutBounds:

...
<AbsoluteLayout>
        <skia:SKCanvasView
            AbsoluteLayout.LayoutBounds="0,0,1,1"
            AbsoluteLayout.LayoutFlags="All"
            x:Name="Cnv"
            PaintSurface="Cnv_PaintSurface" />
</AbsoluteLayout>

Prvé dve cifry v LayoutBounds určujú xy súradnice prvku a ďalšie dve šírku a výšku (všetko relatívne, šírka 0.25 by znamenala štvrtinu šírky displeja). Tu chceme, aby nám plátno (canvas) pokrylo celú obrazovku. Prvok nazveme Cnv.

PaintSurface

V PaintSurface vygenerujeme odkaz na metódu Cnv_PaintSurface, ktorá zaistí vykreslenie všetky grafiky. Vygenerujeme ju tak, že umiestnime kurzor do úvodzoviek za PaintSurface a stlačíme klávesy Ctrl + Space. Z ponúkaného zoznamu vyberieme Cnv_PaintSurface. Automaticky sa vloží názov metódy Cnv_PaintSurface a vlastné metóda Cnv_PaintSurface() sa vygeneruje v súbore MainPage.xaml.cs.

Doterajší kód v súbore MainPage.xaml vyzerá takto:

<?xml version="1.0" encoding="utf-8" ?>
<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="SkiaSharpGame.MainPage">
    <AbsoluteLayout>
        <skia:SKCanvasView
            AbsoluteLayout.LayoutBounds="0,0,1,1"
            AbsoluteLayout.LayoutFlags="All"
            x:Name="Cnv"
            PaintSurface="Cnv_PaintSurface" />
    </AbsoluteLayout>
</ContentPage>

Práca s SKCanvasView

Teraz si vysvetlíme, na čo náš canvas vlastne slúži a ako sa s ním pracuje. SKCanvasView je veľmi podobný PictureBox z Windows Forms. Jedná sa o plátno, na ktoré môžeme kresliť obrázky, geometrické tvary, text a podobne. Presunieme sa do súboru MainPage.xaml.cs.

Cnv_PaintSurface()

V súbore MainPage.xaml.cs nájdeme vygenerovanú metódu Cnv_PaintSurface(), ktorá umožní vykresliť všetku grafiku. V metóde si najprv vyskúšame nakresliť rámček okolo celej obrazovky a potom pozadie rámčeka vyplníme.

Príprava plátna

Najprv si pripravíme plátno:

private void Cnv_PaintSurface(object sender, SkiaSharp.Views.Forms.SKPaintSurfaceEventArgs e)
{
    //kreslení na plátno Cnv
    SKImageInfo info = e.Info;
    SKCanvas canvas = e.Surface.Canvas;
    canvas.Clear();
}

Pridáme using SkiaSharp.

Info nám poskytuje informácie o plátne. Uložíme ho do premennej info typu SKImageInfo. V premennej info máme napr. Šírku a výšku plátna. Keďže sme plátno vykreslili cez celú obrazovku, tak to je zároveň šírka a výška displeja.

Do premennej canvas typu SKCanvas sme uložili samotné plátno, na ktoré budeme všetko vykresľovať. Kedykoľvek sa metóda Cnv_PaintSurface() zavolá, plátno sa obnoví pomocou metódy Clear().

Vykreslenie rámčeku

V metóde Cnv_PaintSurface(), na inštanciu canvas, zavoláme metódu DrawRect(), pomocou ktorej vykreslíme rámček:

private void Cnv_PaintSurface(object sender, SkiaSharp.Views.Forms.SKPaintSurfaceEventArgs e)
{
    ...
    canvas.DrawRect(0, 0, info.Width, info.Height, new SKPaint
    {
        Color = SKColors.Black,
        Style = SKPaintStyle.Stroke,
        StrokeWidth = 20
    });
}

Počiatočný bod rámčeka je na pozícii 0,0. Šírka a výška sa rovná šírke a výške displeja.

Posledným parametrom metódy je objekt typu SKPaint. S objektom SKPaint sa stretneme u väčšiny grafických telies. Pomocou objektu SKPaint nastavíme farbu čiary, vykreslenie obrysové línie a hrúbku čiary.

Vykreslenie pozadia rámčeka

Metódu DrawRect() teraz upravíme tak, aby vykreslila vyplnený obdĺžnik, pretože pekné pozadie dodá aplikácii jej osobitý štýl. Z estetického hľadiska je vhodné držať sa okrem odtieňov šedi jednej, maximálne dvoch rôznych farieb, ktoré budú sprevádzať celú aplikáciu.

Zvoľme si napríklad modré pozadie. Dôležité je, aby sme najprv vykreslili pozadia a až potom rámček. V opačnom prípade by pozadí rámček prekrylo.

private void Cnv_PaintSurface(object sender, SkiaSharp.Views.Forms.SKPaintSurfaceEventArgs e)
{
    ...
    canvas.DrawRect(0, 0, info.Width, info.Height, new SKPaint
    {
        Color = new SKColor(147, 158, 254),
        Style = SKPaintStyle.Fill
    });
}

Všimnime si zadávanie farby. Môžeme si vybrať ako z predvolených farieb (napr. SKColors.Black), tak si zvoliť farbu vlastné pomocou RGB (napr. new SKColor(147, 158, 254)). Hodnoty určujú zložky farby v poradí červená, zelená, modrá v rozsahu 0 - 255. Ak by sme zvolili (0, 0, 0), získame čiernu farbu. Hodnota (0, 255, 0) nám vráti čisto zelenú a (255, 255, 255) bielu farbu. Výhoda zápisu farby pomocou RGB je, že farbu môžeme meniť aj v priebehu aplikácie (myRed, myGreen, myBlue), kde premenné môžu meniť hodnotu v závislosti na užívateľovi.

Vykreslenie tlačidiel

SkiaSharp nám umožňuje používať rôzne prvky, napríklad tlačidla. Do spodnej časti obrazovky vložíme tri tlačidlá s hodnotami "A", "B" a "C", ktorými hráč bude vyberať správnu odpoveď.

Štýl tlačidiel

Naše tlačidla sa budú líšiť iba textom a pozíciou. Vytvoríme si pre nich jednotný štýl. V súbore App.xaml, v <Application.Resources>, vytvoríme nový štýl, kde si nastavíme farbu a veľkosť písma tlačidiel:

...
     <Application.Resources>
        <Style
            x:Key="ButtonStyle"
            TargetType="{x:Type Button}">
            <Setter
                Property="TextColor"
                Value="Black" />
            <Setter
                Property="FontSize"
                Value="60" />
        </Style>
    </Application.Resources>
...

Vykreslenie tlačidiel

V súbore MainPage.xaml vytvoríme tri tlačidlá, ktoré budú používať vyššie nami vytvorený ButtonStyle:

<AbsoluteLayout>
        <skia:SKCanvasView
            ... />
        <Button
            Style="{StaticResource ButtonStyle}"
            AbsoluteLayout.LayoutBounds="0.1,0.9,0.25,0.15"
            AbsoluteLayout.LayoutFlags="All"
            Text="A"
            x:Name="BtnA"
            Clicked="BtnA_Clicked"></Button>
        <Button
            Style="{StaticResource ButtonStyle}"
            AbsoluteLayout.LayoutBounds="0.5,0.9,0.25,0.15"
            AbsoluteLayout.LayoutFlags="All"
            Text="B"
            x:Name="BtnB"
            Clicked="BtnB_Clicked"></Button>
        <Button
            Style="{StaticResource ButtonStyle}"
            AbsoluteLayout.LayoutBounds="0.9,0.9,0.25,0.15"
            AbsoluteLayout.LayoutFlags="All"
            Text="C"
            x:Name="BtnC"
            Clicked="BtnC_Clicked"></Button>
    </AbsoluteLayout>

Ku všetkým tlačidlám priradíme náš ButtonStyle. Ďalej nastavíme súradnice a veľkosť tlačidiel tak, aby sa tlačidlá neprekrývali. Do Text vložíme hodnotu pre zobrazenie tlačidla a do Name názov prvku.

Nakoniec opäť vygenerujeme metódy BtnA_Clicked(), BtnB_Clicked() a BtnC_Clicked() tak, že umiestnime kurzor do úvodzoviek za Clicked a stlačíme klávesy Ctrl + Space. Zo zoznamu vyberieme správnu metódu a potvrdíme. Metóda sa opäť vygeneruje v súbore MainPage.xaml.cs.

Kód pre tlačidlá v <Button>, v súbore MainPage.xaml, musíme napísať až pod <skia:SKCanvasView>, pretože inak by canvas tlačidla prekryl.

Testovanie

Po spustení aplikácie uvidíme nasledujúce obrazovku:

Základ hry máme, nabudúce budeme pokračovať:-)

V budúcej lekcii, Grafika v Xamarin.Forms - Úvod do vektorovej grafiky , sa zoznámime so štetcami, pomocou ktorých možno vytvárať farebné prechody, as vykresľovaním základných geometrických tvarov.

 

Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.