Membuat aplikasi Win2D sederhana

Artikel
10/25/2023

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

Tambahkan Win2D ke proyek Windows C# XAML.
Gambar teks dan geometri.
Terapkan efek filter.
Animasikan konten Win2D Anda.
Ikuti praktik terbaik Win2D.

Menyiapkan komputer dev Anda

Pastikan untuk menyiapkan komputer Anda dengan semua alat yang diperlukan:

Pasang Visual Studio
- Sertakan UWP atau Windows SDK (tergantung kebutuhan Anda), 17763+
Jika menggunakan UWP, pastikan juga mengaktifkan mode pengembang

Membuat proyek Win2D baru

Ikuti langkah-langkah dalam mulai cepat Win2D "Hello, World!" untuk membuat proyek baru menggunakan Win2D, dan untuk menambahkan referensi ke paket Win2D NuGet. Anda dapat menggunakan WinUI 3 (SDK Aplikasi Windows) atau Platform Windows Universal (UWP).

Menambahkan Win2D CanvasControl ke XAML aplikasi Anda

Untuk menggunakan Win2D, Anda perlu tempat untuk menggambar grafik Anda. Dalam aplikasi XAML, cara paling sederhana untuk melakukan ini adalah dengan menambahkan CanvasControl ke halaman XAML Anda.

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

Navigasikan ke MainPage.xaml dalam proyek Anda dengan mengekliknya dua kali di Penjelajah Solusi. Ini akan membuka file. Untuk kenyamanan, Anda dapat mengklik dua kali pada tombol XAML di tab Desainer; ini akan menyembunyikan perancang visual dan memesan semua ruang untuk tampilan kode.
Sebelum menambahkan kontrol, Anda harus terlebih dahulu memberi tahu XAML di mana CanvasControl ditentukan. Untuk melakukan ini, buka definisi elemen Halaman , dan tambahkan arahan ini: xmlns:canvas="using:Microsoft.Graphics.Canvas.UI.Xaml". XAML Anda sekarang 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">

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 Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <canvas:CanvasControl x:Name="canvas"/>
</Grid>

Selanjutnya, tentukan penanganan aktivitas untuk peristiwa Gambar . CanvasControl muncul Draw setiap kali aplikasi Anda perlu menggambar atau menggambar ulang kontennya. Cara term mudah adalah dengan 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" />

Catatan

Setelah Anda memasukkan di Draw=", Visual Studio akan memunculkan kotak yang meminta Anda untuk membiarkannya secara otomatis mengisi definisi yang tepat untuk penanganan aktivitas. Tekan TAB untuk menerima penanganan aktivitas default Visual Studio. Ini juga akan secara otomatis menambahkan metode penanganan aktivitas yang diformat dengan benar dalam kode Anda di belakang ('MainPage.xaml.cs''). Jangan khawatir jika Anda tidak menggunakan AutoComplete; Anda dapat menambahkan metode penanganan aktivitas secara manual di langkah berikutnya.

Gambar teks pertama Anda di Win2D

Sekarang, mari kita pergi ke kode C# belakang. Buka MainPage.xaml.cs dari Penjelajah Solusi.
Di bagian atas file C# ada berbagai definisi namespace layanan. Menambahkan namespace berikut:

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

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.)

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 "100"s memberi tahu Win2D untuk mengimbangi teks ini dengan 100 DIP (piksel independen perangkat) ke kanan dan ke bawah. Terakhir, Colors.Black menentukan warna teks.

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

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 harus 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.

Buka MainPage.xaml dan temukan elemen XAML Halaman yang berisi CanvasControl Anda. Ini harus menjadi elemen pertama dalam file.
Tambahkan handler untuk peristiwa tersebut 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">

MainPage.xaml.cs Buka dan temukan penanganan Page_Unloaded aktivitas. Tambahkan kode berikut:

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

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

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 DrawTextdengan . Lingkaran didefinisikan oleh titik tengah (125, 125), radius (100), dan warna (Hijau). Garis ditentukan oleh awal (0, 0), akhir (50, 200) dan warna (Merah).

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. Draw(...) Semua metode 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 permukaan API untuk mempelajari selengkapnya tentang opsi ini.

Membuat parameter gambar secara dinamis

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

Tambahkan kode berikut ke bagian atas kelas Anda MainPage . 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);
}

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.

Terakhir, bungkus kode gambar Anda dalam perulangan for . Anda harus berakhir dengan kode berikut 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()));
}

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 rotasi rona, dan kabur Gaussia 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.

Ubah metode Anda canvas_Draw untuk menggunakan kode berikut:

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 mana Anda dapat menggambar dengan, Anda dapat membuat CanvasDrawingSession dari CanvasCommandList. Satu-satunya perbedaan adalah bahwa ketika Anda menggambar ke sesi gambar 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 using blok yang membungkus sesi gambar daftar perintah. Sesi menggambar mengimplementasikan IDisposable dan harus dibuang ketika Anda selesai merender ( using blok melakukan ini). Yang CanvasDrawingSession Anda peroleh dari CanvasDrawEventArgs secara otomatis ditutup untuk Anda, tetapi Anda harus membuang sesi gambar apa pun yang Anda buat secara eksplisit.

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

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 kabur Gaussian kabur dengan setiap bingkai. Untuk melakukan ini, Anda akan 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 menaikkan Draw peristiwa secara berkala; secara default disebut 60 kali per detik.

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 menamai handler canvas_Draw_1 ini 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 dirayapkan ulang pada 60 bingkai per detik, lebih efisien untuk membuat sumber daya visual Win2D Sekali dan menggunakannya kembali dengan 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.

Beralih kembali ke MainPage.xaml.cs. Temukan metode Anda canvas_Draw 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 potong (CTRL+X) seluruh isi canvas_Draw, kecuali untuk 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.

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

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

Sekarang kau bisa menganimasikan kabur 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, dirender GaussianBlurEffect .

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

Selamat atas penyelesaian tutorial mulai 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.

Bagikan melalui