Poznámka:
Přístup k této stránce vyžaduje autorizaci. Můžete se zkusit přihlásit nebo změnit adresáře.
Přístup k této stránce vyžaduje autorizaci. Můžete zkusit změnit adresáře.
Objekt SkiaSharp SKCanvas definuje metodu pojmenovanou DrawBitmapNinePatch a dvě metody s názvem DrawBitmapLattice , které jsou velmi podobné. Obě tyto metody vykreslují rastrový obrázek na velikost cílového obdélníku, ale místo rovnoměrného roztažení rastrového obrázku zobrazí části rastrového obrázku v rozměrech jeho pixelů a roztahují další části rastrového obrázku tak, aby odpovídaly obdélníku:
Tyto metody se obecně používají pro vykreslování rastrových obrázků, které tvoří součást objektů uživatelského rozhraní, jako jsou tlačítka. Při návrhu tlačítka obecně chcete, aby velikost tlačítka byla založena na obsahu tlačítka, ale pravděpodobně chcete, aby ohraničení tlačítka bylo stejné šířce bez ohledu na obsah tlačítka. To je ideální použití DrawBitmapNinePatch.
DrawBitmapNinePatch je zvláštní případ DrawBitmapLattice , ale je to jednodušší ze dvou metod, jak je používat a pochopit.
Displej s devíti opravami
Koncepčně DrawBitmapNinePatch rozdělí rastrový obrázek na devět obdélníků:
Obdélníky ve čtyřech rozích se zobrazují v jejich velikostech pixelů. Jak šipky označují, ostatní oblasti na okrajích rastrového obrázku jsou roztaženy vodorovně nebo svisle do oblasti cílového obdélníku. Obdélník ve středu je roztažen vodorovně i svisle.
Pokud v cílovém obdélníku není dostatek místa, aby se zobrazily i čtyři rohy v rozměrech pixelů, pak se zvětšují na dostupnou velikost a nic, ale čtyři rohy se zobrazí.
Chcete-li rozdělit rastrový obrázek na těchto devět obdélníků, je nutné zadat pouze obdélník ve středu. Toto je syntaxe DrawBitmapNinePatch metody:
canvas.DrawBitmapNinePatch(bitmap, centerRectangle, destRectangle, paint);
Středový obdélník je relativní vzhledem k rastru. Je SKRectI to hodnota (celočíselná verze SKRect) a všechny souřadnice a velikosti jsou v jednotkách pixelů. Cílový obdélník je relativní vzhledem k ploše zobrazení. Argument paint je nepovinný.
Stránka Nine Patch Display v ukázce nejprve používá statický konstruktor k vytvoření veřejné statické vlastnosti typu SKBitmap:
public partial class NinePatchDisplayPage : ContentPage
{
static NinePatchDisplayPage()
{
using (SKCanvas canvas = new SKCanvas(FiveByFiveBitmap))
using (SKPaint paint = new SKPaint
{
Style = SKPaintStyle.Stroke,
Color = SKColors.Red,
StrokeWidth = 10
})
{
for (int x = 50; x < 500; x += 100)
for (int y = 50; y < 500; y += 100)
{
canvas.DrawCircle(x, y, 40, paint);
}
}
}
public static SKBitmap FiveByFiveBitmap { get; } = new SKBitmap(500, 500);
···
}
Dvě další stránky v tomto článku používají stejný rastrový obrázek. Rastrový obrázek je 500 pixelů čtvercový a skládá se z matice 25 kruhů, všechny mají stejnou velikost, přičemž každá zabírá 100 pixelů čtvercovou plochu:
Konstruktor instance programu vytvoří s obslužnou SKCanvasView rutinou PaintSurface , která používá DrawBitmapNinePatch k zobrazení rastrového obrázku roztaženého na celou plochu zobrazení:
public class NinePatchDisplayPage : ContentPage
{
···
public NinePatchDisplayPage()
{
Title = "Nine-Patch Display";
SKCanvasView canvasView = new SKCanvasView();
canvasView.PaintSurface += OnCanvasViewPaintSurface;
Content = canvasView;
}
void OnCanvasViewPaintSurface(object sender, SKPaintSurfaceEventArgs args)
{
SKImageInfo info = args.Info;
SKSurface surface = args.Surface;
SKCanvas canvas = surface.Canvas;
canvas.Clear();
SKRectI centerRect = new SKRectI(100, 100, 400, 400);
canvas.DrawBitmapNinePatch(FiveByFiveBitmap, centerRect, info.Rect);
}
}
Obdélník centerRect zahrnuje centrální matici 16 kruhů. Kruhy v rozích se zobrazují v rozměrech pixelů a všechno ostatní je roztaženo odpovídajícím způsobem:
Stránka UPW má šířku 500 pixelů a proto zobrazuje horní a dolní řádky jako řadu kruhů stejné velikosti. V opačném případě jsou všechny kruhy, které nejsou v rozích, roztaženy tak, aby vytvořily tři tečky.
Pro zvláštní zobrazení objektů skládajících se z kombinace kruhů a tří teček zkuste definovat středový obdélník tak, aby překrýval řádky a sloupce kruhů:
SKRectI centerRect = new SKRectI(150, 150, 350, 350);
Zobrazení mřížky
Tyto dvě DrawBitmapLattice metody jsou podobné DrawBitmapNinePatch, ale jsou generalizovány pro libovolný počet vodorovných nebo svislých dělení. Tato dělení jsou definována poli celých čísel odpovídajících pixelům.
Metoda DrawBitmapLattice s parametry pro tato pole celých čísel zdánlivě nefunguje. Metoda DrawBitmapLattice s parametrem typu SKLattice funguje a to je metoda použitá v níže uvedených ukázkách.
Struktura SKLattice definuje čtyři vlastnosti:
XDivs, pole celých číselYDivs, pole celých číselFlags, pole typu výčtuSKLatticeFlagsBoundsNullable<SKRectI>určení volitelného zdrojového obdélníku v rastrovém obrázku
Pole XDivs rozdělí šířku rastrového obrázku na svislé pruhy. První pruh se rozšiřuje z pixelu 0 vlevo na XDivs[0]. Tento pruh se vykreslí v šířce pixelů. Druhý pruh se rozšiřuje od XDivs[0] do XDivs[1]a je roztažen. Třetí pruh se rozšiřuje od XDivs[1] do XDivs[2] a je vykreslen v jeho pixelové šířce. Poslední pruh se rozšiřuje od posledního prvku pole k pravému okraji rastrového obrázku. Pokud má pole sudý počet prvků, zobrazí se v šířce jeho pixelů. Jinak je to roztaženo. Celkový počet svislých pruhů je jeden více než počet prvků v matici.
Pole YDivs je podobné. Rozdělí výšku pole na vodorovné pruhy.
Společně rozdělí XDivs YDivs rastrový obrázek na obdélníky. Počet obdélníků se rovná součinu počtu vodorovných pruhů a počtu svislých pruhů.
Podle dokumentace Flags skia pole obsahuje jeden prvek pro každý obdélník, první horní řádek obdélníků, pak druhý řádek atd. Pole Flags je typu SKLatticeFlags, výčet s následujícími členy:
Defaults hodnotou 0Transparents hodnotou 1
Tyto příznaky ale zdánlivě nefungují tak, jak mají, a je nejlepší je ignorovat. Ale nenastavujte Flags vlastnost na nullhodnotu . Nastavte ho na pole SKLatticeFlags hodnot dostatečně velké, aby zahrnovalo celkový počet obdélníků.
Stránka Lattice Nine Patch používá DrawBitmapLattice k napodobení DrawBitmapNinePatch. Používá stejný rastrový obrázek vytvořený v NinePatchDisplayPage:
public class LatticeNinePatchPage : ContentPage
{
SKBitmap bitmap = NinePatchDisplayPage.FiveByFiveBitmap;
public LatticeNinePatchPage ()
{
Title = "Lattice Nine-Patch";
SKCanvasView canvasView = new SKCanvasView();
canvasView.PaintSurface += OnCanvasViewPaintSurface;
Content = canvasView;
}
`
void OnCanvasViewPaintSurface(object sender, SKPaintSurfaceEventArgs args)
{
SKImageInfo info = args.Info;
SKSurface surface = args.Surface;
SKCanvas canvas = surface.Canvas;
SKLattice lattice = new SKLattice();
lattice.XDivs = new int[] { 100, 400 };
lattice.YDivs = new int[] { 100, 400 };
lattice.Flags = new SKLatticeFlags[9];
canvas.DrawBitmapLattice(bitmap, lattice, info.Rect);
}
}
Obě vlastnosti XDivs YDivs jsou nastaveny na pole pouze dvou celých čísel, rozdělení rastrového obrázku na tři pruhy vodorovně i svisle: od pixelu 0 do pixelu 100 (vykresleno v pixelové velikosti), od pixelu 100 do pixel 400 (roztaženo) a od pixelů 400 do pixel 500 (velikost pixelů). XDivs Společně definujte YDivs celkem 9 obdélníků, což je velikost Flags pole. Stačí vytvořit matici SKLatticeFlags.Default hodnot.
Zobrazení je identické s předchozím programem:
Stránka Zobrazení mřížky rozdělí rastrový obrázek na 16 obdélníků:
public class LatticeDisplayPage : ContentPage
{
SKBitmap bitmap = NinePatchDisplayPage.FiveByFiveBitmap;
public LatticeDisplayPage()
{
Title = "Lattice Display";
SKCanvasView canvasView = new SKCanvasView();
canvasView.PaintSurface += OnCanvasViewPaintSurface;
Content = canvasView;
}
void OnCanvasViewPaintSurface(object sender, SKPaintSurfaceEventArgs args)
{
SKImageInfo info = args.Info;
SKSurface surface = args.Surface;
SKCanvas canvas = surface.Canvas;
canvas.Clear();
SKLattice lattice = new SKLattice();
lattice.XDivs = new int[] { 100, 200, 400 };
lattice.YDivs = new int[] { 100, 300, 400 };
int count = (lattice.XDivs.Length + 1) * (lattice.YDivs.Length + 1);
lattice.Flags = new SKLatticeFlags[count];
canvas.DrawBitmapLattice(bitmap, lattice, info.Rect);
}
}
YDivs Pole XDivs jsou poněkud odlišná, což způsobuje, že zobrazení není tak symetrické jako v předchozích příkladech:
V iOSu a androidových obrázcích na levé straně se v jejich pixelech vykreslují jenom menší kruhy. Všechno ostatní je roztaženo.
Stránka Zobrazení mřížky zobecní vytvoření Flags pole, což vám umožní experimentovat a XDivs YDivs snadněji. Konkrétně budete chtít zjistit, co se stane, když nastavíte první prvek XDivs pole na YDivs hodnotu 0.