Aracılığıyla paylaş

Kılavuz: Basit bir Win2D uygulaması oluşturma

Bu öğreticide Win2D'nin temel çizim özelliklerinden bazıları tanıtılır. Nasıl yapılacağını öğreneceksiniz:

  • WinUI (C#) uygulamasına Win2D ekleyin.
  • Metin ve geometri çizin.
  • Filtre efektleri uygulayın.
  • Win2D içeriğinize animasyon ekleyin.
  • Win2D en iyi uygulamalarını takip edin.

Win2D NuGet paketine başvurma

  1. Yeni bir WinUI uygulaması oluşturun ve Microsoft.Graphics.Win2D Nuget paketini ekleyin.

Uygulamanızın XAML'sine Win2D CanvasControl ekleme

  1. Win2D'yi kullanmak için grafiklerinizi çizecek bir yere ihtiyacınız vardır. XAML uygulamasında bunu yapmanın en basit yoludur, XAML sayfanıza bir CanvasControl eklemektir.

Devam etmeden önce, projenin Mimari seçeneğinin x86 ya da x64 olarak ayarlandığından ve değilAny CPU olduğundan emin olun. Win2D, C++ dilinde uygulanır ve bu nedenle Win2D kullanan projelerin belirli bir CPU mimarisine hedeflenmiş olması gerekir.

  1. Projenizdeki MainWindow.xaml dosyasına, Solution Explorer'da üzerine çift tıklayarak gidin. Bu işlem dosyayı açar. Kolaylık sağlamak için Tasarımcı sekmesindeki XAML düğmesine çift tıklayabilirsiniz; bu, görsel tasarımcıyı gizler ve kod görünümü için tüm alanı ayırır.

  2. Denetimi eklemeden önce XAML'ye CanvasControl'un nerede tanımlandığını söylemeniz gerekir. Bunu yapmak için, Window öğesinin tanımına gidin ve şu yönergeyi ekleyin: xmlns:canvas="using:Microsoft.Graphics.Canvas.UI.Xaml". XAML'niz şu şekilde görünmelidir:

<Window
    ...
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:canvas="using:Microsoft.Graphics.Canvas.UI.Xaml"
    mc:Ignorable="d">
  1. Şimdi kök canvas:CanvasControl öğesine yeni bir alt öğe olarak ekleyin. Denetime bir ad verin; örneğin, "tuval". XAML'niz şu şekilde görünmelidir:
<Grid>
    <canvas:CanvasControl x:Name="canvas"/>
</Grid>
  1. Ardından, Draw olayı için bir olay işleyicisi tanımlayın. CanvasControl , uygulamanızın Draw içeriğini çizmesi veya yeniden çizmesi gerektiğinde yükseltir. En kolay yol, Visual Studio Otomatik Tamamlama'nın size yardımcı olmasına izin vermektir. CanvasControl tanımında, olay işleyicisi için Draw yeni bir öznitelik yazmaya başlayın:
<canvas:CanvasControl x:Name="canvas" Draw="canvas_Draw" />

Win2D'de ilk metninizi çizme

  1. Şimdi de arkasındaki C# koduna geçelim. Solution Explorer'dan MainWindow.xaml.cs açın.

  2. C# dosyasının en üstünde çeşitli ad alanı tanımları bulunur. Aşağıdaki ad alanlarını ekleyin:

using Windows.UI;
using System.Numerics;
using Microsoft.Graphics.Canvas;
using Microsoft.Graphics.Canvas.Effects;
  1. Ardından, Otomatik Tamamlama tarafından eklenen aşağıdaki boş olay işleyicisini görmeniz gerekir:
private void canvas_Draw(
    Microsoft.Graphics.Canvas.UI.Xaml.CanvasControl sender,
    Microsoft.Graphics.Canvas.UI.Xaml.CanvasDrawEventArgs args)
{
}

(Önceki adımda Otomatik Tamamlama'yı kullanmadıysanız, bu kodu şimdi ekleyin.)

  1. CanvasDrawEventArgs parametresi, CanvasDrawingSession türünde olan DrawingSession üyesini kullanıma sunar. Bu sınıf, Win2D'deki temel çizim işlevlerinin çoğunu sağlar: CanvasDrawingSession.DrawRectangle, gibi yöntemlere sahiptir CanvasDrawingSession.DrawImage ve CanvasDrawingSession.DrawText metin çizmek için gereken yöntem.

canvas_Draw yöntemine aşağıdaki kodu ekleyin:

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

İlk bağımsız değişken olan "Hello, World!", Win2D'nin görüntülemesini istediğiniz dizedir. İki "100", Win2D'ye bu metni 100 DIP (cihazdan bağımsız piksel) sağa ve aşağı kaydırmasını söyler. Son olarak, Colors.Black metnin rengini tanımlar.

  1. Artık ilk Win2D uygulamanızı çalıştırmaya hazırsınız. Derlemek ve başlatmak için F5 tuşuna basın. Siyah "Merhaba dünya!" ifadesini içeren boş bir pencere görmeniz gerekir.

Win2D kaynaklarını doğru şekilde bertaraf edin

  1. Diğer içerik türlerini çizmeye devam etmeden önce, uygulamanızın bellek sızıntılarını önlemesi için önce bazı kodlar eklemeniz gerekir. .NET dilde yazılan ve CanvasControl gibi bir Win2D denetimi kullanan çoğu Win2D uygulaması aşağıdaki adımları izlemesi gerekir. Açıkçası, basit "Merhaba, dünya" uygulamanız etkilenmez, ancak bu genel olarak takip etmek için iyi bir uygulamadır.

Daha fazla bilgi için bkz. Bellek sızıntılarını önleme.

  1. MainWindow.xaml içeren XAML öğesini açın ve bulun. Dosyadaki ilk öğe olmalıdır.

  2. Unloaded olayı için bir işleyici ekleyin. XAML'niz şöyle görünmelidir:

<Page
    ...
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:canvas="using:Microsoft.Graphics.Canvas.UI.Xaml"
    mc:Ignorable="d"
    Unloaded="Page_Unloaded">
  1. adresine MainWindow.xaml.cs gidin ve olay işleyicisini Page_Unloaded bulun. Aşağıdaki kodu ekleyin:
void Page_Unloaded(object sender, RoutedEventArgs e)
{
    this.canvas.RemoveFromVisualTree();
    this.canvas = null;
}
  1. Uygulamanız birden çok Win2D denetimi içeriyorsa, Win2D denetimi içeren her XAML sayfası için yukarıdaki adımları yinelemeniz gerekir. Uygulamanız şu anda tek bir CanvasControl'e sahip olduğundan işiniz bitti.

Bazı şekiller çizme

  1. Uygulamanıza 2B geometri eklemek de o kadar kolaydır. aşağıdaki kodu sonuna canvas_Drawekleyin:
args.DrawingSession.DrawCircle(125, 125, 100, Colors.Green);
args.DrawingSession.DrawLine(0, 0, 50, 200, Colors.Red);

Bu iki yönteme yönelik argümanlar, DrawText'a benzer. Daire, orta nokta (125, 125), yarıçap (100) ve renk (Yeşil) ile tanımlanır. Çizgi bir başlangıç (0, 0), bir uç (50, 200) ve bir renk (Kırmızı) ile tanımlanır.

  1. Şimdi uygulamayı çalıştırmak için F5 tuşuna basın. Yeşil daire ve kırmızı çizgiyle birlikte "Merhaba dünya!" ifadesini görmeniz gerekir.

Çizgi kalınlığı ve tireler gibi daha gelişmiş çizim seçeneklerini veya fırça kullanma gibi daha karmaşık dolgu seçeneklerini nasıl kontrol edeceğinizi merak ediyor olabilirsiniz. Win2D bu seçeneklerin tümünü ve daha fazlasını sağlar ve bunları istediğiniz zaman kullanmayı kolaylaştırır. tüm Draw(...) yöntemleri, CanvasTextFormat (yazı tipi ailesi, boyutu vb.) ve CanvasStrokeStyle (tireler, noktalar, son başlıklar vb.) gibi ek parametreleri kabul edebilen birçok aşırı yükleme sunar. Bu seçenekler hakkında daha fazla bilgi edinmek için API surface keşfetmekte çekinmeyin.

Çizim parametrelerini dinamik olarak oluşturma

  1. Şimdi, rastgele renklerle bir dizi şekil ve metin çizerek biraz çeşitlilik ekleyelim.

Sınıfınızın MainWindow en üstüne aşağıdaki kodu ekleyin. Bu, çizim yaparken kullanacağınız rastgele değerler oluşturmak için yardımcı işlevselliktir:

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);
}
  1. Aşağıdaki rastgele parametreleri kullanarak çizim yapmak için yönteminizi canvas_Draw değiştirin:
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()));
}

Şimdi nasıl DrawText değiştiğini görelim. "Hello, World!" öncekiyle aynı kalır. x ve y uzaklık parametreleri, tarafından oluşturulan RndPosition adlı tek bir yapıyla değiştirilmiştir. Son olarak, önceden tanımlanmış bir renk kullanmak yerine A, Color.FromArgb R, G ve B değerlerini kullanarak bir renk tanımlamanıza olanak tanır. A alfa veya opaklık düzeyidir; bu durumda her zaman tamamen opak (255) istiyorsunuz.

DrawCircle ve DrawLine ile DrawTextbenzer şekilde çalışır.

  1. Son olarak, çizim kodunuzu bir for döngü içine sarın. Sonuçta aşağıdaki canvas_Draw koduna sahip olmalısınız:
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()));
}
  1. Uygulamayı yeniden çalıştırın. Rastgele konumlara ve boyutlara sahip bir dizi metin, satır ve daire görmeniz gerekir.

İçeriğinize resim efekti uygulama

Filtre efektleri olarak da bilinen görüntü efektleri, piksel verilerine uygulanan grafik dönüştürmelerdir. Doygunluk, ton döndürme ve Gauss bulanıklığı bazı yaygın görüntü efektleridir. Görüntü efektleri birbirine zincirlenebilir ve minimum çaba için gelişmiş görsel görünüme neden olabilir.

Bir kaynak görüntü (kullanmaya başladığınız içerik) sağlayarak, GaussianBlurEffect gibi bir efekt oluşturarak, BlurAmount gibi özellikleri ayarlayarak ve ardından efektin çıkışını DrawImage ile çizerek görüntü efektlerini kullanırsınız.

Metninize ve şekillerinize görüntü efekti uygulamak için önce bu içeriği bir CanvasCommandList içinde işlemeniz gerekir. Bu nesne, etkinize giriş olarak kullanılabilir.

  1. Yönteminizi canvas_Draw aşağıdaki kodu kullanacak şekilde değiştirin:
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()));
    }
}

Çizim yapabileceğiniz bir CanvasDrawingSession 'ı CanvasDrawEventArgs 'den nasıl elde ediyorsanız, aynı şekilde bir CanvasDrawingSession'den CanvasCommandList oluşturabilirsiniz. Tek fark, komut listesinin çizim oturumuna (clds) çizim yaptığınızda, işlemi doğrudan CanvasControl'e yapmamış olmanızdır. Bunun yerine, komut listesi daha sonra kullanmak üzere işleme sonuçlarını depolayan bir ara nesnedir.

Komut listesinin çizim oturumunu saran using bloğunu fark etmiş olabilirsiniz. Çizim oturumları IDisposable'ı uygular ve işlemeyi bitirdiğinizde yok edilmelidir (bunu using blok gerçekleştirir). CanvasDrawingSession'den aldığınız CanvasDrawEventArgs, sizin için otomatik olarak kapatılır, ancak açıkça oluşturduğunuz çizim oturumlarını sonlandırmalısınız.

  1. Son olarak, GaussianBlurEffect yönteminin sonuna canvas_Draw aşağıdaki kodu ekleyerek tanımlayın:
GaussianBlurEffect blur = new GaussianBlurEffect();
blur.Source = cl;
blur.BlurAmount = 10.0f;
args.DrawingSession.DrawImage(blur);
  1. Uygulamayı yeniden çalıştırın. Çizgilerinizi, metninizi ve dairelerinizi bulanık bir görünümde görmeniz gerekir.

CanvasAnimatedControl ile uygulamanıza animasyon ekleme

. Win2D, örneğin Gauss bulanıklaştırmasının bulanıklık yarıçapını her kareyle değiştirerek içeriğinizi gerçek zamanlı olarak güncelleştirme ve animasyon ekleme olanağı sağlar. Bunu yapmak için CanvasAnimatedControl kullanacaksınız.

CanvasControl çoğunlukla statik grafik içeriği için idealdir; yalnızca içeriğinizin güncelleştirilmesi veya yeniden çizilmesi gerektiğinde olayı tetikler Draw . İçeriği sürekli değiştiriyorsanız bunun yerine kullanmayı CanvasAnimatedControl düşünmelisiniz. İki denetim çok benzer şekilde çalışır, ancak CanvasAnimatedControl olayı düzenli aralıklarla yükseltir Draw ; varsayılan olarak saniyede 60 kez çağrılır.

  1. öğesine geçmek için CanvasAnimatedControladresine gidin MainPage.xaml, CanvasControl satırını silin ve aşağıdaki XAML ile değiştirin:
<Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
    <canvas:CanvasAnimatedControl x:Name="canvas" Draw="canvas_DrawAnimated" CreateResources="canvas_CreateResources"/>
</Grid>

CanvasControl'de olduğu gibi Otomatik Tamamlama'nın sizin için olay işleyicisi oluşturmasına Draw izin verin. varsayılan olarak, Visual Studio bu işleyiciyi canvas_Draw_1 olarak adlandırır çünkü canvas_Draw zaten var; burada, bunun farklı bir olay olduğunu açıkça belirtebilmek için canvas_AnimatedDraw yöntemini yeniden adlandırdık.

Ayrıca, CreateResources adlı yeni bir olayı da işliyebilirsiniz. Bir kez daha, işleyiciyi Otomatik Tamamlama'nın oluşturmasına izin verin.

Artık uygulamanız saniyede 60 karede yeniden çizileceğine göre, Win2D görsel kaynaklarınızı bir kez oluşturmak ve bunları her karede yeniden kullanmak daha verimlidir. İçerik statik kaldığında saniyede 60 kez bir CanvasCommandList öğe oluşturmak ve içine 300 öğe çizmek verimsizdir. CreateResources , yalnızca Win2D sayfa yüklendiğinde olduğu gibi görsel kaynaklarınızı yeniden oluşturmanız gerektiğini belirlediğinde tetiklenen bir olaydır.

  1. MainPage.xaml.cs öğesine geri dönün. Aşağıdaki gibi görünmesi gereken yönteminizi canvas_Draw bulun:
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);
}

Bu mevcut çizim kodunun büyük çoğunluğunun her kareyle yürütülmesi gerekmez: metin, satır ve daireleri içeren komut listesi her karede aynı kalır ve değişen tek şey bulanıklık yarıçapıdır. Bu nedenle, bu "statik" kodu CreateResources'a taşıyabilirsiniz.

Bunu yapmak için, ilk olarak canvas_Draw içeriğinin tamamını, son satır (args.DrawingSession.DrawImage(blur);) hariç, kesin (CTRL+X). Artık ihtiyaç duyulmadığından canvas_Draw'ın geri kalanını silebilirsiniz. Unutmayın ki CanvasAnimatedControl kendi ayrı Draw olayına sahiptir.

  1. Otomatik olarak oluşturulan canvas_CreateResources yöntemi bulun:
private void canvas_CreateResources(
    Microsoft.Graphics.Canvas.UI.Xaml.CanvasAnimatedControl sender, 
    Microsoft.Graphics.Canvas.UI.CanvasCreateResourcesEventArgs args)
{}

Daha önce kestiğiniz kodu bu yönteme yapıştırın (CTRL+V). Ardından, GaussianBlurEffect değişkeninin bildirimini yöntem gövdesinin dışına taşıyın, böylece değişken AnaSayfa sınıfının bir üyesi olur. Kodunuz şimdi aşağıdaki gibi görünmelidir:

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
    };
}
  1. Artık Gauss bulanıklığı animasyonu oluşturabilirsiniz. canvas_DrawAnimated yöntemini bulun ve aşağıdaki kodu ekleyin:
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);
}

Bu, CanvasAnimatedDrawEventArgs tarafından sağlanan toplam süreyi okur ve istenen bulanıklık miktarını hesaplamak için bunu kullanır; sinüs işlevi, zaman içinde ilginç bir varyasyon sağlar. Son olarak GaussianBlurEffect işlemden geçirilir.

  1. Zaman içinde bulanık içerik değişikliğini görmek için uygulamayı çalıştırın.

Bu hızlı başlangıç öğreticisini tamamladığınız için tebrikler! Win2D'yi kullanarak yalnızca birkaç satır C# ve XAML kodu içeren zengin, animasyonlu bir görsel sahne oluşturabileceğinizi gördünüz.

  • Last updated on