Základy cesty v SkiaSharp

  • Článek

Download Sample Stažení ukázky

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í:

Two triangles showing the difference between connected and disconnected lines

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 elipsy
  • CubicTo přidání krychlové bezierové křivky
  • QuadTo přidání kvadratické bezierové křivky
  • ConicTo 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ý:

Triple screenshot of the Two Triangle Contours page

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ě:

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:

Triple screenshot of the Stroke Joins page

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.