Kreslení jednoduchého kruhu ve SkiaSharpu
Seznamte se se základy kreslení SkiaSharp, včetně plátna a malování objektů.
Tento článek představuje koncepty kreslení grafiky při Xamarin.Forms použití SkiaSharp, včetně vytvoření SKCanvasView objektu pro hostování grafiky, zpracování PaintSurface události a použití SKPaint objektu k určení barvy a dalších atributů výkresu.
Ukázkový program obsahuje veškerý vzorový kód pro tuto řadu článků SkiaSharp. První stránka má název Jednoduchý kruh a vyvolá třídu SimpleCirclePagestránky . Tento kód ukazuje, jak nakreslit kruh uprostřed stránky s poloměrem 100 pixelů. Obrys kruhu je červený a vnitřní část kruhu je modrá.
Třída SimpleCircle stránky je odvozena z ContentPage a obsahuje dvě using direktivy pro SkiaSharp obory názvů:
using SkiaSharp;
using SkiaSharp.Views.Forms;
Následující konstruktor třídy vytvoří SKCanvasView objekt, připojí obslužnou rutinu události PaintSurface a nastaví SKCanvasView objekt jako obsah stránky:
public SimpleCirclePage()
{
Title = "Simple Circle";
SKCanvasView canvasView = new SKCanvasView();
canvasView.PaintSurface += OnCanvasViewPaintSurface;
Content = canvasView;
}
Zabírá SKCanvasView celou oblast obsahu stránky. Alternativně můžete kombinovat s SKCanvasView jinými Xamarin.FormsView deriváty, jak vidíte v jiných příkladech.
Obslužná rutina PaintSurface události je místo, kde provádíte všechny výkresy. Tuto metodu lze volat vícekrát, když je program spuštěný, takže by měl udržovat všechny informace potřebné k opětovnému vytvoření grafického displeje:
void OnCanvasViewPaintSurface(object sender, SKPaintSurfaceEventArgs args)
{
...
}
Objekt SKPaintSurfaceEventArgs , který doprovází událost, má dvě vlastnosti:
InfotypuSKImageInfoSurfacetypuSKSurface
Struktura SKImageInfo obsahuje informace o ploše výkresu, nejdůležitější je jeho šířka a výška v pixelech. Objekt SKSurface představuje samotný kreslicí povrch. V tomto programu je kreslicí plocha zobrazení videa, ale v jiných programech SKSurface může objekt také představovat rastrový obrázek, na který můžete kreslit skiaSharp.
Nejdůležitější vlastností SKSurface je Canvas typ SKCanvas. Tato třída je kontext grafického výkresu, který používáte k provedení skutečného výkresu. Objekt SKCanvas zapouzdřuje grafický stav, který zahrnuje transformace grafiky a výřez.
Tady je typický začátek PaintSurface obslužné rutiny události:
void OnCanvasViewPaintSurface(object sender, SKPaintSurfaceEventArgs args)
{
SKImageInfo info = args.Info;
SKSurface surface = args.Surface;
SKCanvas canvas = surface.Canvas;
canvas.Clear();
...
}
Metoda Clear vymaže plátno průhlednou barvou. Přetížení umožňuje zadat barvu pozadí plátna.
Cílem je nakreslit červený kruh vyplněný modrou barvou. Vzhledem k tomu, že tento konkrétní grafický obrázek obsahuje dvě různé barvy, je potřeba úlohu provést ve dvou krocích. Prvním krokem je nakreslení obrysu kruhu. Pokud chcete určit barvu a další charakteristiky čáry, vytvoříte a inicializujete SKPaint objekt:
void OnCanvasViewPaintSurface(object sender, SKPaintSurfaceEventArgs args)
{
...
SKPaint paint = new SKPaint
{
Style = SKPaintStyle.Stroke,
Color = Colors.Red.ToSKColor(),
StrokeWidth = 25
};
...
}
Vlastnost Style označuje, že chcete tahnout čáru (v tomto případě obrys kruhu) místo vyplnění interiéru. Tři členy výčtu SKPaintStyle jsou následující:
Výchozí hodnota je Fill. Třetí možnost použijte k tahu čáry a vyplnění interiéru stejnou barvou.
Color Nastavte vlastnost na hodnotu typu SKColor. Jedním ze způsobů, jak získat SKColor hodnotu, je převod hodnoty Xamarin.FormsColor na SKColor hodnotu pomocí rozšiřující metody ToSKColor. Třída Extensions v SkiaSharp.Views.Forms oboru názvů obsahuje další metody, které převádějí mezi Xamarin.Forms hodnotami a hodnotami SkiaSharp.
Vlastnost StrokeWidth označuje tloušťku čáry. Tady je nastavená na 25 pixelů.
Tento objekt použijete SKPaint k nakreslení kruhu:
void OnCanvasViewPaintSurface(object sender, SKPaintSurfaceEventArgs args)
{
...
canvas.DrawCircle(info.Width / 2, info.Height / 2, 100, paint);
...
}
Souřadnice se zadají vzhledem k levému hornímu rohu plochy zobrazení. Souřadnice X se zvětší doprava a souřadnice Y se zvětší. V diskuzi o grafikě se často k označení bodu používá matematická notace (x, y). Bod (0, 0) je levý horní roh povrchu displeje a často se nazývá původ.
První dva argumenty DrawCircle označují souřadnice X a Y středu kruhu. Tyto hodnoty jsou přiřazeny k poloviční šířce a výšce povrchu displeje, aby se střed kruhu umístil do středu plochy displeje. Třetí argument určuje poloměr kruhu a poslední argument je SKPaint objekt.
Chcete-li vyplnit vnitřní část kruhu, můžete změnit dvě vlastnosti objektu SKPaint a znovu zavolat DrawCircle . Tento kód také ukazuje alternativní způsob získání SKColor hodnoty z jednoho z mnoha polí SKColors struktury:
void OnCanvasViewPaintSurface(object sender, SKPaintSurfaceEventArgs args)
{
...
paint.Style = SKPaintStyle.Fill;
paint.Color = SKColors.Blue;
canvas.DrawCircle(args.Info.Width / 2, args.Info.Height / 2, 100, paint);
}
DrawCircle Tentokrát volání vyplní kruh pomocí nových vlastností objektuSKPaint.
Tady je program spuštěný v iOSu a Androidu:
Při spuštění programu můžete telefon nebo simulátor otočit bokem, abyste viděli, jak se obrázek překresluje. Pokaždé, když je potřeba překreslit obrázek, obslužná rutina PaintSurface události se znovu zavolá.
Je také možné barevné grafické objekty s přechody nebo rastrovými dlaždicemi. Tyto možnosti jsou popsány v části o shaderech SkiaSharp.
Objekt SKPaint je o něco víc než kolekce grafických vlastností výkresu. Tyto objekty jsou jednoduché. Objekty můžete opakovaně používat SKPaint , jak to dělá tento program, nebo můžete vytvořit více SKPaint objektů pro různé kombinace vlastností výkresu. Tyto objekty můžete vytvořit a inicializovat mimo obslužnou rutinu PaintSurface události a uložit je jako pole ve třídě stránky.
Poznámka:
Třída SKPaint definuje IsAntialias povolení anti-aliasing při vykreslování grafiky. Anti-aliasing obecně vede k vizuálně plynulejším okrajům, takže pravděpodobně budete chtít tuto vlastnost nastavit na true většinu objektů SKPaint . Pro účely jednoduchosti není tato vlastnost nastavena na většině ukázkových stránek.
I když je šířka obrysu kruhu zadaná jako 25 pixelů ( neboli jedna čtvrtina poloměru kruhu), zdá se, že je tenčí a je to dobrý důvod: Polovina šířky čáry je zakrytá modrým kruhem. Argumenty metody DrawCircle definují abstraktní geometrické souřadnice kruhu. Modrý interiér má velikost této rozměry na nejbližší pixel, ale 25 pixelů široký obrys obléká geometrický kruh – polovinu uvnitř a polovinu na vnější straně.
Další ukázka v integraci s článkem Xamarin.Forms ukazuje tuto vizuální ukázku.