21. diel - Grafika v Xamarin.Forms - Lokálne obrázky

V minulej lekcii, Grafika pomocou SkiaSharp v Xamarin.Forms - Úvod , sme začali tvoriť mobilnú hru s použitím grafickej knižnice SkiaSharp. Ukázali sme si, ako vkladať do aplikácie základné grafické prvky.

V dnešnej lekcii si popíšeme rozdiely vektorovej a rastrovej grafiky. Predovšetkým si však ukážeme, ako sa v Xamarin.Forms pracuje s lokálnymi rastrovými obrázkami.

Vektorová vs. rastrová grafika

Veľmi laicky môžeme povedať, že vektorový obrázok si môžeme zväčšiť ako chceme a nikdy sa nám nerozmaže alebo nerozpixeluje. To je veľmi lákavé, pretože takýto obrázok je plne responzívne a stále 100% ostrý, navyše zaberá veľmi málo pamäte a naše aplikácie potom vyzerá na všetkých zariadeniach rovnako pekne. Niet divu, že napr. SVG ikony sú dnes na webe veľmi populárne. A aj my budeme vektorové ikony vo svojich aplikáciách preferovať.

Vektorový obrázok

Vektorový obrázok v sebe obsahuje matematický zápis súradníc bodov (vrcholov) a ich spojníc (hrán), ktorý vytvára požadovaný obrazec (napr. Trojuholník, kruh, štvorec ...). Kombinovaním a prelínaním týchto obrazcov sa potom vytvárajú obrazce zložitejšie. Ďalej sa vo vektorových obrázkoch špecifikujú informácie ako hrúbka čiary, farba výplne atď. Z toho vyplýva, že s akýmkoľvek zväčšením či zmenšením obrazce sa mení len pomer vzdialeností medzi vrcholmi.

Rasterizácia

A ako sa krivky vykreslí? To, čo potom vidíme na obrazovke, sa musí samozrejme znova "rasterizovat", čiže vykresliť na 2D ploche nášho monitora:

Ako sami vidíte, vykreslenie vektorového obrázku na obrazovku vytvára pri malom počte pixelov "schody" čiže aliasing. Xamarin.Forms za nás však uplatňuje pokročilejšie algoritmy, tzv. Anti-aliasing, aby boli jednotlivé krivky obrázka vyhladené.

Rastrový obrázok

Naopak bitová mapa,

...koniec náhľadu článku...
Pokračuj ďalej