Základy cesty v SkiaSharp
Prozkoumejte objekt SkiaSharp SKPath pro kombinování propojených čar a křivek.
Jednou z nejdůležitějších vlastností grafické cesty je možnost definovat, kdy má být více řádků připojeno a kdy by neměly být připojeny. Rozdíl může být významný, protože vrcholy těchto dvou trojúhelníků ukazují:
Objekt zapouzdřuje SKPath
grafickou cestu. Cesta je kolekce jednoho nebo více obrysů. Každý obrys je kolekce propojených rovných čar a křivek. Obrysy nejsou vzájemně propojené, ale můžou se vizuálně překrývat. Někdy se může jeden obrys překrývat.
Obrys obecně začíná voláním následující metody SKPath
:
MoveTo
zahájení nového obrysu
Argumentem této metody je jeden bod, který můžete vyjádřit buď jako hodnotu, nebo jako SKPoint
samostatné souřadnice X a Y. Volání MoveTo
vytvoří bod na začátku obrysu a počátečního aktuálního bodu. Následující metody můžete volat k pokračování obrysu čáry nebo křivky od aktuálního bodu k bodu zadanému v metodě, který se pak stane novým aktuálním bodem:
LineTo
přidání přímky k cestěArcTo
pro přidání oblouku, což je čára na obvodu kruhu nebo elipsyCubicTo
přidání krychlové bezierové křivkyQuadTo
přidání kvadratické bezierové křivkyConicTo
pro přidání logické kvadratické bezierové křivky, která může přesně vykreslit kuželové části (tři tečky, parabolas a hyperbolas)
Žádný z těchto pěti metod neobsahuje všechny informace potřebné k popisu čáry nebo křivky. Každá z těchto pěti metod funguje ve spojení s aktuálním bodem vytvořeným voláním metody bezprostředně před ní. Metoda například LineTo
přidá přímku k obrysu na základě aktuálního bodu, takže parametr je LineTo
pouze jeden bod.
Třída SKPath
také definuje metody, které mají stejné názvy jako tyto šest metod, ale na R
začátku:
Zkratka R
pro relativní. Tyto metody mají stejnou syntaxi jako odpovídající metody bez R
aktuálního bodu, ale jsou relativní. Jsou užitečné pro kreslení podobných částí cesty v metodě, kterou voláte vícekrát.
Obrys končí jiným voláním MoveTo
nebo RMoveTo
, který začíná novým obrysem, nebo voláním Close
, který zavře obrys. Metoda Close
automaticky připojí přímku od aktuálního bodu k prvnímu bodu obrysu a označí cestu jako uzavřenou, což znamená, že bude vykreslena bez zakončení tahů.
Rozdíl mezi otevřenými a uzavřenými obrysy je znázorněn na stránce Dvou trojúhelníkových obrysů , která používá SKPath
objekt se dvěma obrysy k vykreslení dvou trojúhelníků. První obrys je otevřený a druhý je uzavřen. Tady je TwoTriangleContoursPage
třída:
void OnCanvasViewPaintSurface(object sender, SKPaintSurfaceEventArgs args)
{
SKImageInfo info = args.Info;
SKSurface surface = args.Surface;
SKCanvas canvas = surface.Canvas;
canvas.Clear();
// Create the path
SKPath path = new SKPath();
// Define the first contour
path.MoveTo(0.5f * info.Width, 0.1f * info.Height);
path.LineTo(0.2f * info.Width, 0.4f * info.Height);
path.LineTo(0.8f * info.Width, 0.4f * info.Height);
path.LineTo(0.5f * info.Width, 0.1f * info.Height);
// Define the second contour
path.MoveTo(0.5f * info.Width, 0.6f * info.Height);
path.LineTo(0.2f * info.Width, 0.9f * info.Height);
path.LineTo(0.8f * info.Width, 0.9f * info.Height);
path.Close();
// Create two SKPaint objects
SKPaint strokePaint = new SKPaint
{
Style = SKPaintStyle.Stroke,
Color = SKColors.Magenta,
StrokeWidth = 50
};
SKPaint fillPaint = new SKPaint
{
Style = SKPaintStyle.Fill,
Color = SKColors.Cyan
};
// Fill and stroke the path
canvas.DrawPath(path, fillPaint);
canvas.DrawPath(path, strokePaint);
}
První obrys se skládá z volání, které MoveTo
používá souřadnice X a Y místo SKPoint
hodnoty, následované třemi voláními k LineTo
vykreslení tří stran trojúhelníku. Druhý obrys má pouze dvě volání LineTo
, ale končí obrys voláním Close
, který zavře obrys. Rozdíl je významný:
Jak vidíte, první obrys je zřejmě řada tří propojených čar, ale konec se nepřipojí se začátkem. Tyto dvě čáry se překrývají v horní části. Druhý obrys je očividně uzavřený a byl dokončen s jedním menším LineTo
počtem volání, protože Close
metoda automaticky přidá poslední čáru pro uzavření obrysu.
SKCanvas
definuje pouze jednu DrawPath
metodu, která je v této ukázce volána dvakrát k vyplnění a tahu cesty. Všechny obrysy jsou vyplněné, i ty, které nejsou uzavřeny. Pro účely vyplňování nezařazených cest se předpokládá, že mezi počátečním a koncovými body obrysů existuje přímka. Pokud odeberete poslední LineTo
z prvního obrysu nebo odeberete Close
volání z druhého obrysu, bude mít každý obrys pouze dvě strany, ale bude vyplněný, jako by to byl trojúhelník.
SKPath
definuje mnoho dalších metod a vlastností. Následující metody přidávají do cesty celé obrysy, které mohou být uzavřeny nebo nezavřeny v závislosti na metodě:
AddRect
AddRoundedRect
AddCircle
AddOval
AddArc
přidání křivky na obvod tří tečekAddPath
přidání další cesty k aktuální cestěAddPathReverse
přidání další cesty v obráceném směru
Mějte na paměti, že SKPath
objekt definuje pouze geometrii – řadu bodů a spojení. Pouze v případě SKPath
, že je zkombinován s objektem SKPaint
, je cesta vykreslená konkrétní barvou, šířkou tahu atd. Mějte také na paměti, že SKPaint
objekt předaný DrawPath
metodě definuje charakteristiky celé cesty. Pokud chcete nakreslit něco, co vyžaduje několik barev, musíte pro každou barvu použít samostatnou cestu.
Stejně jako vzhled začátku a konce čáry je definován pomocí zakončení tahu, vzhled spojení mezi dvěma čárami je definován spojením tahu. Tuto hodnotu určíte nastavením StrokeJoin
vlastnosti SKPaint
na člena výčtu SKStrokeJoin
:
Miter
pro bodové spojeníRound
pro zaokrouhlené spojeníBevel
pro rozsekané spojení
Stránka Spojení tahů zobrazuje tyto tři spojení tahů s kódem, který je podobný stránce Tah Caps . Toto je obslužná rutina PaintSurface
události ve StrokeJoinsPage
třídě:
void OnCanvasViewPaintSurface(object sender, SKPaintSurfaceEventArgs args)
{
SKImageInfo info = args.Info;
SKSurface surface = args.Surface;
SKCanvas canvas = surface.Canvas;
canvas.Clear();
SKPaint textPaint = new SKPaint
{
Color = SKColors.Black,
TextSize = 75,
TextAlign = SKTextAlign.Right
};
SKPaint thickLinePaint = new SKPaint
{
Style = SKPaintStyle.Stroke,
Color = SKColors.Orange,
StrokeWidth = 50
};
SKPaint thinLinePaint = new SKPaint
{
Style = SKPaintStyle.Stroke,
Color = SKColors.Black,
StrokeWidth = 2
};
float xText = info.Width - 100;
float xLine1 = 100;
float xLine2 = info.Width - xLine1;
float y = 2 * textPaint.FontSpacing;
string[] strStrokeJoins = { "Miter", "Round", "Bevel" };
foreach (string strStrokeJoin in strStrokeJoins)
{
// Display text
canvas.DrawText(strStrokeJoin, xText, y, textPaint);
// Get stroke-join value
SKStrokeJoin strokeJoin;
Enum.TryParse(strStrokeJoin, out strokeJoin);
// Create path
SKPath path = new SKPath();
path.MoveTo(xLine1, y - 80);
path.LineTo(xLine1, y + 80);
path.LineTo(xLine2, y + 80);
// Display thick line
thickLinePaint.StrokeJoin = strokeJoin;
canvas.DrawPath(path, thickLinePaint);
// Display thin line
canvas.DrawPath(path, thinLinePaint);
y += 3 * textPaint.FontSpacing;
}
}
Tady je spuštěný program:
Spojení miteru se skládá z ostrého bodu, kde se spojnice spojují. Když se dvě čáry spojí v malém úhlu, spojení miteru může být poměrně dlouhé. Aby se zabránilo nadměrnému dlouhému spojení miteru, je délka spojení miteru omezena hodnotou StrokeMiter
vlastnosti SKPaint
. Spojení miter, které překračuje tuto délku, se odseká, aby se stal zkoseným spojením.