Oktatóanyag: Egyszerű Win2D-alkalmazás létrehozása

Ez az oktatóanyag bemutatja a Win2D néhány alapvető rajzképességét. Megtudhatja, hogyan:

• Adja hozzá a Win2D-t egy WinUI -alkalmazáshoz (C#).
• Szöveg és geometria rajzolása.
• Szűrőeffektusok alkalmazása.
• Animálja a Win2D-tartalmát.
• Kövesse a Win2D ajánlott eljárásait.

Hivatkozás a Win2D NuGet-csomagra

1. Hozzon létre egy új WinUI-alkalmazást, és adja hozzá a Microsoft.Graphics.Win2D Nuget-csomagot.

Win2D CanvasControl hozzáadása az alkalmazás XAML-éhez

1. A Win2D használatához valahol meg kell rajzolnia a grafikus elemeket. XAML-alkalmazásban a legegyszerűbb ezt úgy megtenni, ha hozzáad egy CanvasControl-t a XAML-laphoz.

A folytatás előtt győződjön meg arról, hogy a projekt Architektúra beállítása x86 vagy x64 és neAny CPU. A Win2D a C++-ban van implementálva, ezért a Win2D-t használó projekteket egy adott CPU-architektúrára kell célozni.

1. Kattintson duplán a Solution Explorerben található MainWindow.xaml elemre a projektjében. Ekkor megnyílik a fájl. A kényelem érdekében kattintson duplán az XAML gombra a Tervező lapon; ezzel elrejti a vizualizációtervezőt, és lefoglalja a kódnézet teljes területét.

2. Mielőtt hozzáadná a vezérlőt, először meg kell adnia az XAML-nek, hogy hol van definiálva a CanvasControl . Ehhez lépjen a Window elem definíciójára, és adja hozzá az alábbi irányelvet: xmlns:canvas="using:Microsoft.Graphics.Canvas.UI.Xaml". Az XAML-nek így kell kinéznie:

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

4. Most adjon hozzá egy új canvas:CanvasControl gyermekelemet a gyökérrács elemhez. Adjon nevet a vezérlőnek – például "vászon". Az XAML-nek így kell kinéznie:

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

5. Ezután definiáljon egy eseménykezelőt a Draw eseményhez. A CanvasControl minden alkalommal emel, Draw amikor az alkalmazásnak meg kell rajzolnia vagy újra kell szerkesztenie a tartalmát. A legegyszerűbb módja annak, hogy a Visual Studio AutoComplete funkcióját segítségül hívja. A CanvasControl definíciójában kezdje el beírni az eseménykezelő új attribútumát Draw :

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

Az első szöveg rajzolása a Win2D-ben

1. Most nézzük meg a mögöttük lévő C#-kódot. Nyissa meg a MainWindow.xaml.cs ablaktáblát a Solution Explorerben.

2. A C# fájl tetején különböző névtérdefiníciók találhatók. Adja hozzá a következő névtereket:

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

3. Ezután a következő üres eseménykezelőnek kell megjelennie, amelyet az Automatikus kiegészítés szúrt be:

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

(Ha az előző lépésben nem használta az automatikus kiegészítést, adja hozzá most ezt a kódot.)

4. A CanvasDrawEventArgs paraméter egy DrawingSession nevű tagot tesz elérhetővé, amely CanvasDrawingSession típusú. Ez az osztály a Win2D legtöbb alapvető rajzfunkcióját biztosítja: olyan metódusokkal rendelkezik, mint a CanvasDrawingSession.DrawRectangle, CanvasDrawingSession.DrawImage és a szöveg rajzolásához szükséges módszer, CanvasDrawingSession.DrawText.

Adja hozzá a következő kódot a canvas_Draw metódushoz:

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

Az első argumentum "Hello, World!"az a sztring, amelyet a Win2D-nek meg szeretne jeleníteni. A két "100" azt adja meg a Win2D-nek, hogy ezt a szöveget 100 dip-ekkel (eszközfüggetlen képpontokkal) jobbra és lefelé eltolja. Végül Colors.Black határozza meg a szöveg színét.

5. Most már készen áll az első Win2D-alkalmazás futtatására. A fordításhoz és az indításhoz nyomja le az F5 billentyűt. A "Hello, world!" feliratú üres ablaknak fekete színnel kell megjelennie.

Win2D-erőforrások helyes megsemmisítése

1. Mielőtt folytatná a más típusú tartalmak rajzolását, először adjon hozzá néhány kódot, hogy az alkalmazás elkerülje a memóriavesztést. A legtöbb Win2D-alkalmazásnak .NET nyelven kell írnia, és olyan Win2D-vezérlőt kell használnia, mint a CanvasControl az alábbi lépéseket kell követnie. Szigorúan véve az egyszerű "Hello, world" alkalmazásodra nincs hatással, de általában jó gyakorlat ezt követni.

További információ: Memóriavesztés elkerülése.

2. Nyissa meg MainWindow.xaml és keresse meg a CanvasControlt tartalmazó XAML-elemet. Ennek kell lennie a fájl első elemének.

3. Adjon hozzá egy kezelőt a Unloaded eseményhez. Az XAML-nek így kell kinéznie:

<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. Nyissa meg a MainWindow.xaml.cs, és keresse meg a Page_Unloaded eseménykezelőt. Adja hozzá a következő kódot:

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

5. Ha az alkalmazás több Win2D-vezérlőt tartalmaz, akkor meg kell ismételnie a fenti lépéseket minden olyan XAML-oldal esetében, amely Win2D-vezérlőt tartalmaz. Az alkalmazás jelenleg csak egyetlen CanvasControl-rel rendelkezik, így minden elkészült.

Alakzatok rajzolása

1. Ugyanolyan egyszerű 2D geometriát hozzáadni az alkalmazáshoz. Adja hozzá a következő kódot a canvas_Drawvégéhez:

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

A két metódus argumentumai hasonlóak a DrawText. A kört egy középpont (125, 125), egy sugár (100) és egy szín (Zöld) határozza meg. A vonalat egy kezdet (0, 0), egy vége (50, 200) és egy szín (Piros) határozza meg.

12. Most nyomja le az F5 billentyűt az alkalmazás futtatásához. Úgy fogod látni, hogy "Helló, világ!" egy zöld körrel és egy piros vonallal együtt jelenik meg.

Felmerülhet a kérdés, hogyan szabályozhatja a speciálisabb rajzbeállításokat, például a vonalvastagságot és a kötőjeleket, vagy az összetettebb kitöltési lehetőségeket, például az ecsetek használatát. A Win2D mindezeket a lehetőségeket és egyebeket biztosítja, és megkönnyíti azok használatát, ha szeretné. Az összes Draw(...) metódus számos túlterhelést kínál, amelyek további paramétereket is elfogadnak, például CanvasTextFormat (betűcsalád, méret stb.) és CanvasStrokeStyle (kötőjelek, pontok, véglapok stb.). Ha többet szeretne megtudni ezekről a lehetőségekről, bátran fedezze fel az API felületet.

Rajzparaméterek dinamikus létrehozása

1. Most adjunk hozzá némi változatosságot úgy, hogy véletlenszerű színekkel rajzolunk egy csomó alakzatot és szöveget.

Adja hozzá a következő kódot a MainWindow osztály elejéhez. Ez a segédfunkció véletlenszerű értékeket hoz létre, amelyeket rajzoláskor fog használni:

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. Módosítsa a canvas_Draw metódust, hogy az alábbi véletlenszerű paraméterekkel rajzoljon:

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()));
}

Nézzük meg, hogyan változott DrawText. "Hello, World!" ugyanaz marad, mint korábban. Az x és az y eltolási paramétereket egyetlen System.Numerics.Vector2 értékre cseréltük, amelyet a rendszer generált RndPosition. Végül az előre definiált szín használata helyett Color.FromArgb lehetővé teszi a szín definiálását A, R, G és B értékekkel. Az A az alfa, vagy az átlátszatlansági szint; ebben az esetben mindig teljesen átlátszatlan (255) értéket szeretne.

DrawCircle és DrawLine hasonlóan működnek, mint DrawText.

3. Végül helyezze a rajzkódot egy for ciklusba. Végül a következő canvas_Draw kódot kell megadnia:

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. Futtassa újra az alkalmazást. Egy csomó szöveget, sort és kört kell látnia véletlenszerű pozíciókkal és méretekkel.

Képeffektus alkalmazása a tartalomra

A képeffektusok, más néven szűrőeffektusok a képpontadatokra alkalmazott grafikus átalakítások. A telítettség, az árnyalatváltás és a Gauss-elmosódás gyakori képeffektusok. A képeffektusok összefűzhetők, így kifinomult vizuális megjelenést kölcsönöznek a minimális munkához.

A képeffektusok használatához meg kell adnia egy forrásképet (a kezdő tartalmat), létre kell hoznia egy effektet, például a GaussianBlurEffect effektust, be kell állítania olyan tulajdonságokat, mint a BlurAmount, végül meg kell rajzolnia az effektus eredményét DrawImage.

Ha képeffektust szeretne alkalmazni a szövegre és az alakzatokra, először renderelnie kell a tartalmat egy CanvasCommandList. Ez az objektum használható az effektus bemeneteként.

2. Módosítsa a canvas_Draw metódust a következő kód használatára:

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()));
    }
}

Hasonlóan ahhoz, ahogy a CanvasDrawingSession segítségével létrehoz egy CanvasDrawEventArgs-t, úgy egy CanvasDrawingSession-ból létrehozhat egy CanvasCommandList-t. Az egyetlen különbség az, hogy amikor a parancslista rajzi munkamenetére (clds) rajzol, akkor nem közvetlenül a CanvasControl-ra végzi a renderelést. Ehelyett a parancslista egy köztes objektum, amely a renderelés eredményeit tárolja későbbi használatra.

Lehet, hogy észrevette a parancslista rajzi munkamenetét burkoló using blokkot. A rajzolási munkamenetek implementálják az IDisposable-t, és a renderelés befejezésekor meg kell szüntetni őket (a using blokk ezt teszi). A CanvasDrawingSession által beszerzett CanvasDrawEventArgs automatikusan bezáródik, de a kifejezetten létrehozott rajz munkameneteket el kell végeznie.

3. Végül adja meg a GaussianBlurEffect úgy, hogy hozzáadja a következő kódot a canvas_Draw metódus végéhez:

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

4. Futtassa újra az alkalmazást. Látni fogja, hogy a vonalak, szöveg és körök elmosódott megjelenésűek.

Alkalmazás animálása a CanvasAnimatedControl használatával

. A Win2D lehetővé teszi a tartalom valós idejű frissítését és animálását, például a Gauss-elmosódás elmosódási sugarának minden kerettel történő módosításával. Ennek érdekében a CanvasAnimatedControl-t fogja használni.

A CanvasControl leginkább statikus grafikus tartalmakhoz alkalmas – csak akkor aktiválja az Draw eseményt, ha a tartalmat frissíteni vagy újra kell szerkeszteni. Ha folyamatosan módosítja a tartalmat, fontolja meg inkább a CanvasAnimatedControl használatát. A két vezérlő nagyon hasonlóan működik, kivéve, hogy CanvasAnimatedControl rendszeres időközönként indítja a Draw eseményt; alapértelmezés szerint másodpercenként 60-szor hívják meg.

2. A váltás érdekében váltson a CanvasAnimatedControl-ra, menjen a MainPage.xaml-hez, törölje a CanvasControl sort, és cserélje ki a következő XAML-re:

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

A CanvasControlhoz hasonlóan az Automatikus kiegészítés funkcióval is létrehozhatja az Draw eseménykezelőt. Alapértelmezés szerint Visual Studio ezt a kezelőt canvas_Draw_1 nevezi el, mert canvas_Draw már létezik; itt átneveztük a metódust canvas_AnimatedDraw, hogy egyértelmű legyen, hogy ez egy másik esemény.

Emellett egy új eseményt is kezel, CreateResources. Ismét hagyja, hogy az AutoComplete hozza létre a kezelőt.

Most, hogy az alkalmazás másodpercenként 60 képkockában frissül, érdemes egyszer létrehozni a Win2D-vizuális erőforrásokat, és ezeket minden képkocka esetén újra felhasználni. Nem hatékony CanvasCommandList létrehozni, és másodpercenként 60-szor 300 elemet rajzolni bele, ha a tartalom statikus marad. CreateResources olyan esemény, amely csak akkor aktiválódik, ha a Win2D megállapítja, hogy újra létre kell hoznia a vizualizációs erőforrásokat, például a lap betöltésekor.

3. Váltson vissza a MainPage.xaml.cs. Keresse meg a canvas_Draw metódust, amelynek így kell kinéznie:

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);
}

A meglévő rajzkód túlnyomó többségét nem kell minden kerettel végrehajtani: a szöveget, vonalakat és köröket tartalmazó parancslista minden kerettel megegyezik, és az egyetlen dolog, ami változik, az elmosódott sugár. Ezért ezt a "statikus" kódot áthelyezheti a CreateResources-ba.

Ehhez először vágja ki (CTRL+X) a canvas_Draw teljes tartalmát, kivéve az utolsó sort (args.DrawingSession.DrawImage(blur);). Most már törölheti a canvas_Draw fennmaradó részét, mivel már nincs rá szükség: ne feledje, hogy CanvasAnimatedControl saját különálló Draw eseménye van.

4. Keresse meg az automatikusan létrehozott canvas_CreateResources metódust:

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

Illessze be (CTRL+V) a korábban kivágott kódot ebbe az eljárásba. Ezután helyezze át a GaussianBlurEffect deklarációját a metódus törzsén kívül, hogy a változó a MainPage osztály tagjává váljon. A kódnak most az alábbihoz hasonlóan kell kinéznie:

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. Most már animálhatja a Gauss-elmosódást. Keresse meg a canvas_DrawAnimated metódust, és adja hozzá a következő kódot:

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);
}

Ez beolvassa a CanvasAnimatedDrawEventArgs által biztosított teljes időt, és ezzel kiszámítja a kívánt elmosódási összeget; a szinuszfüggvény érdekes variációt biztosít az idő függvényében. Végül megjelenik a GaussianBlurEffect.

6. Futtassa az alkalmazást az elmosódott tartalom időbeli változásának megtekintéséhez.

Gratulálunk a gyors üzembe helyezési oktatóanyag elvégzéséhez! Remélhetőleg már látta, hogyan hozhat létre gazdag, animált vizuális jelenetet a Win2D-vel, mindössze néhány sor C# és XAML-kóddal.