Tutorial: Membangun aplikasi Win2D sederhana

Tutorial ini memperkenalkan beberapa kemampuan menggambar dasar Win2D. Anda akan mempelajari cara:

• Tambahkan Win2D ke aplikasi WinUI (C#).
• Gambar teks dan geometri.
• Terapkan efek filter.
• Animasikan konten Win2D Anda.
• Ikuti praktik terbaik Win2D.

Rujuk pada paket Win2D NuGet

1. Buat aplikasi WinUI baru, dan tambahkan paket Nuget Microsoft.Graphics.Win2D .

Menambahkan Win2D CanvasControl ke XAML aplikasi Anda

1. Untuk menggunakan Win2D, Anda perlu tempat untuk menggambar grafik Anda. Dalam aplikasi XAML, cara paling sederhana untuk melakukannya adalah dengan menambahkan CanvasControl pada halaman XAML Anda.

Sebelum melanjutkan, pertama-tama pastikan bahwa opsi Arsitektur proyek diatur ke x86 atau x64 dan tidak ke Any CPU. Win2D diimplementasikan dalam C++, dan oleh karena itu proyek yang menggunakan Win2D perlu ditargetkan ke arsitektur CPU tertentu.

1. Navigasi ke MainWindow.xaml di project Anda dengan mengekliknya dua kali di Solution Explorer. Ini akan membuka file. Untuk kenyamanan, Anda dapat mengklik dua kali pada tombol XAML di tab Desainer; ini akan menyembunyikan perancang visual dan mengalokasikan semua ruang untuk tampilan kode saja.

2. Sebelum menambahkan kontrol, Anda harus terlebih dahulu memberi tahu XAML di mana CanvasControl ditentukan. Untuk melakukan ini, buka definisi elemen Window dan tambahkan arahan ini: xmlns:canvas="using:Microsoft.Graphics.Canvas.UI.Xaml". XAML Anda sekarang akan terlihat seperti ini:

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

4. Sekarang, tambahkan elemen baru canvas:CanvasControl sebagai turunan ke elemen Grid akar. Beri nama kontrol—misalnya, "kanvas". XAML Anda sekarang akan terlihat seperti ini:

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

5. Selanjutnya, tentukan penanganan aktivitas untuk peristiwa Draw. CanvasControl muncul Draw setiap kali aplikasi Anda perlu menggambar atau menggambar ulang kontennya. Cara term mudah adalah membiarkan Visual Studio AutoComplete membantu Anda. Dalam definisi CanvasControl , mulai ketik atribut baru untuk penanganan Draw aktivitas:

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

Gambar teks pertama Anda di Win2D

1. Sekarang, mari kita beralih ke kode C# di belakang. Buka MainWindow.xaml.cs dari Solution Explorer.

2. Di bagian atas file C# ada berbagai definisi namespace. Tambahkan namespace berikut:

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

3. Selanjutnya, Anda akan melihat penanganan aktivitas kosong berikut yang disisipkan oleh LengkapiOtomatis:

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

(Jika Anda tidak menggunakan LengkapiOtomatis di langkah sebelumnya, tambahkan kode ini sekarang.)

4. Parameter CanvasDrawEventArgs mengekspos anggota, DrawingSession, yang merupakan jenis CanvasDrawingSession. Kelas ini menyediakan sebagian besar fungsionalitas gambar dasar di Win2D: kelas ini memiliki metode seperti CanvasDrawingSession.DrawRectangle, CanvasDrawingSession.DrawImage, dan metode yang Anda butuhkan untuk menggambar teks, CanvasDrawingSession.DrawText.

Tambahkan kode berikut ke metode canvas_Draw:

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

Argumen pertama, "Hello, World!", adalah string yang Anda inginkan untuk ditampilkan Win2D. Dua angka "100" menunjukkan kepada Win2D untuk menggeser teks ini sebanyak 100 DIPs (piksel independen perangkat) ke kanan dan ke bawah. Terakhir, Colors.Black menentukan warna teks.

5. Sekarang Anda siap untuk menjalankan aplikasi Win2D pertama Anda. Tekan tombol F5 untuk mengkompilasi dan meluncurkan. Anda akan melihat jendela kosong dengan "Halo, dunia!" dalam warna hitam.

Membuang sumber daya Win2D dengan benar

1. Sebelum terus menggambar jenis konten lain, Anda harus terlebih dahulu menambahkan beberapa kode untuk memastikan aplikasi Anda menghindari kebocoran memori. Sebagian besar aplikasi Win2D yang ditulis dalam bahasa .NET dan menggunakan kontrol Win2D seperti CanvasControl perlu mengikuti langkah-langkah di bawah ini. Secara ketat, aplikasi "Halo, dunia" sederhana Anda tidak terpengaruh, tetapi ini adalah praktik yang baik untuk diikuti secara umum.

Untuk informasi selengkapnya, lihat Menghindari kebocoran memori.

2. Buka MainWindow.xaml dan temukan elemen XAML yang berisi CanvasControl Anda. Ini harus menjadi elemen pertama dalam file.

3. Tambahkan handler untuk peristiwa Unloaded. XAML Anda akan terlihat seperti ini:

<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. Buka MainWindow.xaml.cs dan temukan penanganan aktivitas Page_Unloaded. Tambahkan kode berikut:

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

5. Jika aplikasi Anda berisi beberapa kontrol Win2D, Maka Anda perlu mengulangi langkah-langkah di atas untuk setiap halaman XAML yang berisi kontrol Win2D. Aplikasi Anda saat ini hanya memiliki satu CanvasControl sehingga Anda sudah selesai.

Gambar beberapa bentuk

1. Sangat mudah untuk menambahkan geometri 2D ke aplikasi Anda. Tambahkan kode berikut ke akhir :canvas_Draw

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

Argumen untuk kedua metode ini mirip dengan DrawText. Lingkaran didefinisikan oleh titik tengah (125, 125), radius (100), dan warna (Hijau). Garis ditentukan oleh awal (0, 0), akhir (50, 200) dan warna (Merah).

12. Sekarang, tekan F5 untuk menjalankan aplikasi. Anda akan melihat "Halo, dunia!" bersama dengan lingkaran hijau dan garis merah.

Anda mungkin bertanya-tanya cara mengontrol opsi gambar yang lebih canggih, seperti ketebalan garis dan tanda hubung, atau opsi pengisian yang lebih kompleks seperti menggunakan kuas. Win2D menyediakan semua opsi ini dan banyak lagi, dan memudahkan untuk menggunakannya saat Anda mau. Semua metode Draw(...) menawarkan banyak kelebihan beban yang dapat menerima parameter tambahan seperti CanvasTextFormat (keluarga font, ukuran, dll) dan CanvasStrokeStyle (tanda hubung, titik, endcap, dll). Jangan ragu untuk menjelajahi API surface untuk mempelajari selengkapnya tentang opsi ini.

Membuat parameter gambar secara dinamis

1. Sekarang, mari kita tambahkan beberapa variasi dengan menggambar sekelompok bentuk dan teks dengan warna acak.

Tambahkan kode berikut ke bagian atas kelas Anda MainWindow . Ini adalah fungsi pembantu untuk menghasilkan nilai acak yang akan Anda gunakan saat menggambar:

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. Ubah metode Anda canvas_Draw untuk menggambar menggunakan parameter acak ini:

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

Mari kita uraikan bagaimana DrawText telah berubah. "Hello, World!" tetap sama seperti sebelumnya. Parameter offset x dan y telah diganti dengan satu System.Numerics.Vector2 yang dihasilkan oleh RndPosition. Terakhir, alih-alih menggunakan warna yang telah ditentukan sebelumnya, Color.FromArgb memungkinkan Anda menentukan warna menggunakan nilai A, R, G, dan B. adalah alfa, atau tingkat keburaman; dalam hal ini Anda selalu ingin sepenuhnya buram (255).

DrawCircle dan DrawLine beroperasi mirip dengan DrawText.

3. Terakhir, bungkus kode gambar Anda dalam for loop. Anda harus memperoleh kode canvas_Draw berikut:

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. Jalankan aplikasi lagi. Anda akan melihat sekelompok teks, garis, dan lingkaran dengan posisi dan ukuran acak.

Menerapkan efek gambar ke konten Anda

Efek gambar, juga dikenal sebagai efek filter, adalah transformasi grafis yang diterapkan ke data piksel. Saturasi, rotasi rona, dan kabur Gaussian adalah beberapa efek gambar umum. Efek gambar dapat dirangkai bersama-sama, menghasilkan penampilan visual yang canggih untuk upaya minimal.

Anda menggunakan efek gambar dengan menyediakan gambar sumber (konten yang Anda mulai), membuat efek seperti GaussianBlurEffect, mengatur properti seperti BlurAmount, lalu menggambar output efek dengan DrawImage.

Untuk menerapkan efek gambar ke teks dan bentuk, Anda harus terlebih dahulu merender konten tersebut ke dalam CanvasCommandList. Objek ini dapat digunakan sebagai input untuk efek Anda.

2. Ubah metode Anda di canvas_Draw untuk menggunakan kode berikut ini:

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

Sama seperti bagaimana Anda mendapatkan CanvasDrawingSession dari CanvasDrawEventArgs yang dapat Anda gunakan untuk menggambar, Anda dapat membuat CanvasDrawingSession dari CanvasCommandList. Satu-satunya perbedaan adalah bahwa ketika Anda menggambar ke sesi menggambar daftar perintah (clds), Anda tidak secara langsung merender ke CanvasControl. Sebagai gantinya, daftar perintah adalah objek perantara yang menyimpan hasil penyajian untuk digunakan nanti.

Anda mungkin telah melihat blok using yang membungkus sesi menggambar dari daftar perintah. Sesi menggambar mengimplementasikan IDisposable dan harus dibuang ketika Anda selesai merender ( using blok melakukan ini). CanvasDrawingSession yang Anda peroleh dari CanvasDrawEventArgs secara otomatis ditutup untuk Anda, tetapi Anda harus membuang sesi gambar apa pun yang Anda buat secara eksplisit.

3. Terakhir, tentukan GaussianBlurEffect dengan menambahkan kode berikut ke akhir canvas_Draw metode:

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

4. Jalankan aplikasi lagi. Anda akan melihat garis, teks, dan lingkaran Anda dengan tampilan buram.

Menganimasikan aplikasi Anda dengan CanvasAnimatedControl

. Win2D memberi Anda kemampuan untuk memperbarui dan menganimasikan konten Anda secara realtime, misalnya dengan mengubah radius blur Gaussian setiap frame. Untuk melakukan ini, Anda menggunakan CanvasAnimatedControl.

CanvasControl paling cocok untuk sebagian besar konten grafis statis - itu hanya meningkatkan Draw peristiwa ketika konten Anda perlu diperbarui atau digambar ulang. Jika Anda terus mengubah konten, anda harus mempertimbangkan untuk menggunakan CanvasAnimatedControl sebagai gantinya. Kedua kontrol beroperasi dengan sangat mirip, kecuali CanvasAnimatedControl meningkatkan peristiwa Draw secara berkala; secara default disebut 60 kali per detik.

2. Untuk beralih ke CanvasAnimatedControl, buka MainPage.xaml, hapus baris CanvasControl , dan ganti dengan XAML berikut:

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

Sama seperti canvasControl, biarkan AutoComplete membuat Draw penanganan aktivitas untuk Anda. Secara default, Visual Studio akan memberi nama handler ini canvas_Draw_1 karena canvas_Draw sudah ada; di sini, kami telah mengganti nama metode canvas_AnimatedDraw untuk memperjelas bahwa ini adalah peristiwa yang berbeda.

Selain itu, Anda juga menangani peristiwa baru, CreateResources. Sekali lagi, biarkan AutoComplete membuat handler.

Sekarang setelah aplikasi Anda akan digambar ulang pada 60 bingkai per detik, lebih efisien untuk membuat sumber daya visual Win2D sekali dan menggunakannya kembali di setiap bingkai. Tidak efisien untuk membuat CanvasCommandList dan menggambar 300 elemen ke dalamnya 60 kali per detik ketika konten tetap statis. CreateResources adalah peristiwa yang diaktifkan hanya ketika Win2D menentukan Anda perlu membuat ulang sumber daya visual Anda, seperti ketika halaman dimuat.

3. Beralih kembali ke MainPage.xaml.cs. Temukan metode canvas_Draw Anda yang akan terlihat seperti ini:

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

Sebagian besar kode gambar yang ada ini tidak perlu dijalankan dengan setiap bingkai: daftar perintah yang berisi teks, garis, dan lingkaran tetap sama dengan setiap bingkai, dan satu-satunya hal yang berubah adalah radius kabur. Oleh karena itu, Anda dapat memindahkan kode "statis" ini ke dalam CreateResources.

Untuk melakukan ini, pertama-tama potonglah (CTRL+X) seluruh konten canvas_Draw, kecuali baris terakhir (args.DrawingSession.DrawImage(blur);). Anda sekarang dapat menghapus sisa canvas_Draw karena tidak lagi diperlukan: ingat yang CanvasAnimatedControl memiliki peristiwa berbeda Draw sendiri.

4. Temukan metode yang dihasilkan canvas_CreateResources secara otomatis:

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

Tempelkan (CTRL+V) kode yang sebelumnya Anda potong ke dalam metode ini. Selanjutnya, pindahkan deklarasi GaussianBlurEffect di luar isi metode sehingga variabel menjadi anggota kelas MainPage. Kode Anda sekarang akan terlihat seperti berikut:

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. Sekarang Anda dapat menganimasikan blur Gaussian. canvas_DrawAnimated Temukan metode dan tambahkan kode berikut:

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

Ini membaca total waktu yang berlalu yang disediakan oleh CanvasAnimatedDrawEventArgs dan menggunakan ini untuk menghitung jumlah kabur yang diinginkan; fungsi sinus menyediakan variasi yang menarik dari waktu ke waktu. Akhirnya, GaussianBlurEffect ditampilkan.

6. Jalankan aplikasi untuk melihat perubahan konten kabur dari waktu ke waktu.

Selamat telah menyelesaikan panduan cepat ini! Semoga Anda telah melihat bagaimana Anda dapat menggunakan Win2D untuk membuat adegan visual animasi yang kaya hanya dengan beberapa baris kode C# dan XAML.