Kurz: Vytvoření jednoduché aplikace Win2D

Tento kurz představuje některé základní možnosti kreslení win2D. Naučíte se:

• Přidejte Win2D do aplikace WinUI (C#).
• Nakreslete text a geometrie.
• Použít efekty filtru
• Animujte obsah Win2D.
• Postupujte podle osvědčených postupů Win2D.

Odkaz na balíček NuGet Win2D

1. Vytvořte novou aplikaci WinUI a přidejte balíček NuGet Microsoft.Graphics.Win2D .

Přidání Win2D CanvasControl do XAML vaší aplikace

1. Abyste mohli použít Win2D, potřebujete někam nakreslit grafiku. Nejjednodušším způsobem, jak toho dosáhnout v aplikaci XAML, je přidat na stránku XAML prvek CanvasControl.

Než budete pokračovat, nejprve se ujistěte, že je možnost Architektura projektu nastavená na x86 nebo x64 a ne na Any CPU. Win2D je implementováno v jazyce C++, a proto projekty, které používají Win2D, musí být zaměřeny na konkrétní architekturu procesoru.

1. Poklepáním na něj v Průzkumníku řešení přejděte do MainWindow.xaml ve svém projektu. Tím se soubor otevře. Pro usnadnění můžete dvakrát kliknout na tlačítko XAML na kartě Návrhář; tím se skryje vizuální návrhář a zarezervuje se veškerý prostor pro zobrazení kódu.

2. Než ovládací prvek přidáte, musíte nejprve sdělit XAML, kde je definován CanvasControl . Přejděte k definici elementu Window a přidejte tuto směrnici: xmlns:canvas="using:Microsoft.Graphics.Canvas.UI.Xaml". Váš XAML by teď měl vypadat takto:

<Window
    ...
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:canvas="using:Microsoft.Graphics.Canvas.UI.Xaml"
    mc:Ignorable="d">

4. Nyní přidejte nový canvas:CanvasControl prvek jako podřízený prvek do kořenového prvku Mřížka . Pojmenujte ovládací prvek – například "plátno". Váš XAML by teď měl vypadat takto:

<Grid>
    <canvas:CanvasControl x:Name="canvas"/>
</Grid>

5. Dále definujte obslužnou rutinu události pro událost Draw. CanvasControl vyvolá Draw pokaždé, když vaše aplikace potřebuje kreslit nebo překreslit jeho obsah. Nejjednodušší způsob je nechat Visual Studio, aby vám pomohlo s automatickým dokončováním. V definici CanvasControl začněte psát nový atribut pro obslužnou rutinu Draw události:

<canvas:CanvasControl x:Name="canvas" Draw="canvas_Draw" />

Nakreslení prvního textu ve Win2D

1. Teď pojďme přejít ke kódu jazyka C#. Otevřete MainWindow.xaml.cs z Solution Explorer.

2. V horní části souboru C# jsou různé definice oboru názvů. Přidejte následující obory názvů:

using Windows.UI;
using System.Numerics;
using Microsoft.Graphics.Canvas;
using Microsoft.Graphics.Canvas.Effects;

3. Dále byste měli vidět následující prázdnou obslužnou rutinu události, která byla vložena automatickým dokončováním:

private void canvas_Draw(
    Microsoft.Graphics.Canvas.UI.Xaml.CanvasControl sender,
    Microsoft.Graphics.Canvas.UI.Xaml.CanvasDrawEventArgs args)
{
}

(Pokud jste v předchozím kroku nepoužíli automatické dokončování, přidejte tento kód.)

4. Parametr CanvasDrawEventArgs zveřejňuje člena DrawingSession, který je typu CanvasDrawingSession. Tato třída poskytuje většinu základních funkcí kreslení ve Win2D: má metody, jako jsou CanvasDrawingSession.DrawRectangle, CanvasDrawingSession.DrawImage a metodu, kterou potřebujete nakreslit text, CanvasDrawingSession.DrawText.

Do metody canvas_Draw přidejte následující kód:

args.DrawingSession.DrawText("Hello, World!", 100, 100, Colors.Black);

Prvním argumentem je řetězec, "Hello, World!"který má Win2D zobrazit. Dvě hodnoty "100" umožňují Win2D posunout tento text o 100 pixelů nezávislých na zařízení doprava a dolů. Colors.Black Nakonec definuje barvu textu.

5. Teď jste připraveni spustit svou první aplikaci Win2D. Stisknutím klávesy F5 zkompilujte a spusťte. Mělo by se zobrazit prázdné okno s černou zprávou "Hello, world!".

Správně likvidujte prostředky Win2D

1. Než budete pokračovat v kreslení dalších druhů obsahu, měli byste nejdřív přidat kód, který zajistí, že vaše aplikace zabrání úniku paměti. Většina aplikací Win2D napsaných v jazyce .NET a použití ovládacího prvku Win2D, jako je CanvasControl musí postupovat podle následujících kroků. Čistě řečeno, vaše jednoduchá aplikace "Hello, world" není ovlivněná, ale obecně je vhodné postupovat podle tohoto postupu.

Další informace naleznete v tématu zabránění únikům paměti.

2. Otevřete MainWindow.xaml a najděte element XAML, který obsahuje Objekt CanvasControl. Měl by to být první prvek v souboru.

3. Přidejte obslužnou rutinu události Unloaded. Xaml by měl vypadat takto:

<Page
    ...
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:canvas="using:Microsoft.Graphics.Canvas.UI.Xaml"
    mc:Ignorable="d"
    Unloaded="Page_Unloaded">

4. Přejděte na MainWindow.xaml.cs a vyhledejte obslužnou rutinu události Page_Unloaded. Přidejte následující kód:

void Page_Unloaded(object sender, RoutedEventArgs e)
{
    this.canvas.RemoveFromVisualTree();
    this.canvas = null;
}

5. Pokud vaše aplikace obsahuje více ovládacích prvků Win2D, je potřeba zopakovat výše uvedené kroky pro každou stránku XAML, která obsahuje ovládací prvek Win2D. Vaše aplikace má v současné době jenom jeden prvek CanvasControl, takže jste hotovi.

Kreslení některých obrazců

1. Do aplikace je stejně snadné přidat 2D geometrii. Na konec canvas_Drawpřidejte následující kód:

args.DrawingSession.DrawCircle(125, 125, 100, Colors.Green);
args.DrawingSession.DrawLine(0, 0, 50, 200, Colors.Red);

Argumenty těchto dvou metod jsou podobné DrawText. Kruh je definován středovým bodem (125, 125), poloměrem (100) a barvou (zelená). Čára je definována začátkem (0, 0), koncem (50, 200) a barvou (červená).

12. Teď stisknutím klávesy F5 spusťte aplikaci. Měli byste vidět "Hello, world!" spolu se zeleným kruhem a červenou čárou.

Možná vás zajímá, jak ovládat pokročilejší možnosti kreslení, jako je tloušťka čáry a pomlčky nebo složitější možnosti výplně, jako je použití štětců. Win2D nabízí všechny tyto možnosti a další možnosti a usnadňuje jejich použití, když chcete. Všechny metody Draw(...) nabízejí mnoho přetížení, která mohou přijímat další parametry, jako jsou CanvasTextFormat (rodina písem, velikost atd.) a CanvasStrokeStyle (pomlčky, tečky, koncová písmena atd.). Neváhejte prozkoumat rozsah API a získat další informace o těchto možnostech.

Dynamické generování parametrů výkresu

1. Teď přidáme řadu různých barev tak, že nakreslíme spoustu obrazců a textu s náhodnými barvami.

Do horní části MainWindow třídy přidejte následující kód. Toto je pomocná funkce pro generování náhodných hodnot, které použijete při kreslení:

Random rnd = new Random();
private Vector2 RndPosition()
{
    double x = rnd.NextDouble() * 500f;
    double y = rnd.NextDouble() * 500f;
    return new Vector2((float)x, (float)y);
}

private float RndRadius()
{
    return (float)rnd.NextDouble() * 150f;
}

private byte RndByte()
{
    return (byte)rnd.Next(256);
}

2. Upravte metodu canvas_Draw tak, aby kreslila pomocí těchto náhodných parametrů:

private void canvas_Draw(
    Microsoft.Graphics.Canvas.UI.Xaml.CanvasControl sender,
    Microsoft.Graphics.Canvas.UI.Xaml.CanvasDrawEventArgs args)
{
    args.DrawingSession.DrawText("Hello, World!", RndPosition(), Color.FromArgb(255, RndByte(), RndByte(), RndByte()));
    args.DrawingSession.DrawCircle(RndPosition(), RndRadius(), Color.FromArgb(255, RndByte(), RndByte(), RndByte()));
    args.DrawingSession.DrawLine(RndPosition(), RndPosition(), Color.FromArgb(255, RndByte(), RndByte(), RndByte()));
}

Pojďme si rozebrat, jak se změnily DrawText. "Hello, World!" zůstává stejná jako předtím. Parametry posunu x a y byly nahrazeny jedním System.Numerics.Vector2 , který je generován RndPosition. A konečně místo použití předdefinované barvy Color.FromArgb můžete definovat barvu pomocí hodnot A, R, G a B. A je alfa nebo úroveň neprůhlednosti; v tomto případě chcete vždy zcela neprůhlenou (255).

DrawCircle a DrawLine působí podobně jako DrawText.

3. Nakonec kód výkresu zabalte do for loop. Měli byste skončit s následujícím kódem canvas_Draw:

for (int i = 0; i < 100; i++)
{
    args.DrawingSession.DrawText("Hello, World!", RndPosition(), Color.FromArgb(255, RndByte(), RndByte(), RndByte()));
    args.DrawingSession.DrawCircle(RndPosition(), RndRadius(), Color.FromArgb(255, RndByte(), RndByte(), RndByte()));
    args.DrawingSession.DrawLine(RndPosition(), RndPosition(), Color.FromArgb(255, RndByte(), RndByte(), RndByte()));
}

4. Spusťte aplikaci znovu. Měli byste vidět celou řadu textu, řádků a kruhů s náhodnými pozicemi a velikostmi.

Použití efektu obrázku u obsahu

Obrazové efekty, označované také jako efekty filtru, jsou grafické transformace, které se použijí na data pixelů. Sytost, otočení odstínu a gaussovské rozostření jsou některé běžné obrazové efekty. Efekty obrázků lze vrstvit na sobě, což vytváří sofistikovaný vizuální vzhled s minimálním úsilím.

Efekty obrázků použijete tak, že poskytnete zdrojový obrázek (obsah, se kterým začínáte), vytvoříte efekt, například GaussianBlurEffect, nastavíte vlastnosti, jako je BlurAmount a potom nakreslete výstup efektu pomocí DrawImage.

Pokud chcete u textu a obrazců použít efekt obrázku, musíte ho nejdřív vykreslit do CanvasCommandList. Tento objekt je použitelný jako vstup pro váš efekt.

2. Změňte metodu canvas_Draw tak, aby používala následující kód:

CanvasCommandList cl = new CanvasCommandList(sender);

using (CanvasDrawingSession clds = cl.CreateDrawingSession())
{
    for (int i = 0; i < 100; i++)
    {
        clds.DrawText("Hello, World!", RndPosition(), Color.FromArgb(255, RndByte(), RndByte(), RndByte()));
        clds.DrawCircle(RndPosition(), RndRadius(), Color.FromArgb(255, RndByte(), RndByte(), RndByte()));
        clds.DrawLine(RndPosition(), RndPosition(), Color.FromArgb(255, RndByte(), RndByte(), RndByte()));
    }
}

Stejně jako když získáte CanvasDrawingSession z CanvasDrawEventArgs, se kterým můžete kreslit, můžete vytvořit CanvasDrawingSession z CanvasCommandList. Jediným rozdílem je, že při kreslení v rámci relace vykreslování seznamu příkazů (clds) nejste přímo vykreslováni na CanvasControl. Místo toho je seznam příkazů zprostředkující objekt, který ukládá výsledky vykreslování pro pozdější použití.

Možná jste si všimli using bloku, který obklopuje seanci výkresu seznamu příkazů. Sezení kreslení implementují IDisposable a musí být správně uvolněny po dokončení vykreslování (blok using to zajistí). CanvasDrawingSession, které získáte od CanvasDrawEventArgs, je pro vás automaticky uzavřeno, ale musíte ukončit všechny relace výkresu, které jste explicitně vytvořili.

3. Nakonec definujte GaussianBlurEffect přidáním následujícího kódu na konec canvas_Draw metody:

GaussianBlurEffect blur = new GaussianBlurEffect();
blur.Source = cl;
blur.BlurAmount = 10.0f;
args.DrawingSession.DrawImage(blur);

4. Spusťte aplikaci znovu. Měli byste vidět řádky, text a kruhy rozmazaně.

Animace aplikace pomocí CanvasAnimatedControl

. Win2D vám umožňuje aktualizovat a animovat obsah v reálném čase, například změnou poloměru Gaussovského rozostření u každého snímku. To do použijete CanvasAnimatedControl.

CanvasControl je nejvhodnější pro převážně statický grafický obsah – vyvolá událost pouze Draw v případě, že je potřeba obsah aktualizovat nebo překreslit. Pokud obsah neustále měníte, měli byste místo toho zvážit použití CanvasAnimatedControl . Oba ovládací prvky fungují velmi podobně, s výjimkou, že CanvasAnimatedControl pravidelně vyvolává Draw událost; ve výchozím nastavení je volán 60 krát za sekundu.

2. Chcete-li přepnout na CanvasAnimatedControl, přejděte na MainPage.xaml, odstraňte řádek CanvasControl a nahraďte jej následujícím XAML:.

<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <canvas:CanvasAnimatedControl x:Name="canvas" Draw="canvas_DrawAnimated" CreateResources="canvas_CreateResources"/>
</Grid>

Stejně jako u CanvasControl nechte AutoComplete vytvořit obslužnou rutinu Draw události za vás. Ve výchozím nastavení bude Visual Studio tuto obslužnou rutinu pojmenovat canvas_Draw_1, protože canvas_Draw již existuje; zde jsme přejmenovali metodu canvas_AnimatedDraw, aby bylo jasné, že se jedná o jinou událost.

Kromě toho zpracováváte novou událost CreateResources. Znovu nechte funkci Automatické dokončování vytvořit obslužnou rutinu.

Nyní, když bude vaše aplikace překreslovat na 60 snímků za sekundu, je efektivnější vytvořit vizuální prostředky Win2D jednou a znovu je používat s každým snímkem. Při zachování statického CanvasCommandList obsahu je neefektivní vytvořit a nakreslit do něj 300 prvků 60krát za sekundu. CreateResources je událost, která se aktivuje jenom v případě, že Win2D určuje, že potřebujete znovu vytvořit prostředky vizuálu, například při načtení stránky.

3. Přepněte zpět na MainPage.xaml.cs. Najděte svou canvas_Draw metodu, která by měla vypadat takto:

private void canvas_Draw(
    Microsoft.Graphics.Canvas.UI.Xaml.CanvasControl sender,
    Microsoft.Graphics.Canvas.UI.Xaml.CanvasDrawEventArgs args)
{
    CanvasCommandList cl = new CanvasCommandList(sender);
    using (CanvasDrawingSession clds = cl.CreateDrawingSession())
    {
        for (int i = 0; i < 100; i++)
        {
            clds.DrawText("Hello, World!", RndPosition(), Color.FromArgb(255, RndByte(), RndByte(), RndByte()));
            clds.DrawCircle(RndPosition(), RndRadius(), Color.FromArgb(255, RndByte(), RndByte(), RndByte()));
            clds.DrawLine(RndPosition(), RndPosition(), Color.FromArgb(255, RndByte(), RndByte(), RndByte()));
        }
    }

    GaussianBlurEffect blur = new GaussianBlurEffect();
    blur.Source = cl;
    blur.BlurAmount = 10.0f;
    args.DrawingSession.DrawImage(blur);
}

Velká většina tohoto existujícího kódu kreslení nemusí být provedena s každým snímkem: seznam příkazů obsahující text, čáry a kruhy zůstává stejný s každým snímkem a jedinou věcí, která se změní, je poloměr rozostření. Proto můžete tento "statický" kód přesunout do CreateResources.

Nejprve vyjměte (CTRL+X) celý obsah canvas_Draw kromě posledního řádku (args.DrawingSession.DrawImage(blur);). Teď můžete odstranit zbytek canvas_Draw , protože už není potřeba: vzpomeňte si, že CanvasAnimatedControl má svou vlastní jedinečnou Draw událost.

4. Vyhledejte automaticky vygenerovanou canvas_CreateResources metodu:

private void canvas_CreateResources(
    Microsoft.Graphics.Canvas.UI.Xaml.CanvasAnimatedControl sender, 
    Microsoft.Graphics.Canvas.UI.CanvasCreateResourcesEventArgs args)
{}

Vložte dříve vyjmutý kód (CTRL+V) do této metody. Dále přesuňte deklaraci GaussianBlurEffect mimo tělo metody, aby se proměnná stala členem MainPage třídy. Váš kód by teď měl vypadat takto:

GaussianBlurEffect blur;
private void canvas_CreateResources(
    Microsoft.Graphics.Canvas.UI.Xaml.CanvasAnimatedControl sender,
    Microsoft.Graphics.Canvas.UI.CanvasCreateResourcesEventArgs args)
{
    CanvasCommandList cl = new CanvasCommandList(sender);
    using (CanvasDrawingSession clds = cl.CreateDrawingSession())
    {
        for (int i = 0; i < 100; i++)
        {
            clds.DrawText("Hello, World!", RndPosition(), Color.FromArgb(255, RndByte(), RndByte(), RndByte()));
            clds.DrawCircle(RndPosition(), RndRadius(), Color.FromArgb(255, RndByte(), RndByte(), RndByte()));
            clds.DrawLine(RndPosition(), RndPosition(), Color.FromArgb(255, RndByte(), RndByte(), RndByte()));
        }
    }

    blur = new GaussianBlurEffect()
    {
        Source = cl,
        BlurAmount = 10.0f
    };
}

5. Teď můžete animovat gaussovské rozostření. Vyhledejte metodu canvas_DrawAnimated a přidejte následující kód:

private void canvas_DrawAnimated(
    Microsoft.Graphics.Canvas.UI.Xaml.ICanvasAnimatedControl sender,
    Microsoft.Graphics.Canvas.UI.Xaml.CanvasAnimatedDrawEventArgs args)
{
    float radius = (float)(1 + Math.Sin(args.Timing.TotalTime.TotalSeconds)) * 10f;
    blur.BlurAmount = radius;
    args.DrawingSession.DrawImage(blur);
}

Tím se přečte celkový uplynulý čas poskytnutý CanvasAnimatedDrawEventArgs a použije se k výpočtu požadované velikosti rozostření; sinusová funkce poskytuje zajímavou variaci v průběhu času. Nakonec se vykreslí GaussianBlurEffect.

6. Spusťte aplikaci, abyste viděli změnu rozmazaného obsahu v průběhu času.

Blahopřejeme k dokončení tohoto rychlého úvodního kurzu! Doufáme, že jste viděli, jak můžete pomocí Win2D vytvořit bohatou animovanou vizuální scénu s několika řádky kódu C# a XAML.