Efek komposisi

API Microsoft.UI.Composition memungkinkan efek real-time diterapkan pada gambar dan UI dengan properti efek yang dapat diubah. Dalam gambaran umum ini, kita akan menelusuri fungsionalitas yang memungkinkan Anda menerapkan efek pada visual komposisi di aplikasi WinUI dan Windows App SDK.

Untuk mendukung penulisan efek yang konsisten di aplikasi WinUI dan Windows App SDK, efek komposisi memanfaatkan antarmuka IGraphicsEffect Win2D sehingga Anda dapat menjelaskan efek dengan menggunakan namespace Microsoft.Graphics.Canvas.Effects .

Efek kuas digunakan untuk melukis area aplikasi dengan menerapkan efek pada satu set gambar yang ada. API efek komposisi Windows App SDK difokuskan pada SpriteVisuals. SpriteVisual memberi Anda fleksibilitas saat menggabungkan pembuatan warna, gambar, dan efek. Visual mendefinisikan batas persegi panjang, dan kuas mendefinisikan piksel yang digunakan untuk melukisnya.

Kuas efek digunakan pada visual pohon komposisi yang kontennya berasal dari output grafik efek. Efek dapat merujuk pada permukaan/tekstur yang ada, tetapi tidak pada keluaran dari pohon komposisi lainnya.

Efek juga dapat diterapkan pada XAML UIElements dengan menggunakan kuas efek dengan XamlCompositionBrushBase.

Fitur Efek

Perpustakaan Efek

Saat ini komposisi mendukung efek berikut:

Efek	Deskripsi
Transformasi affine 2D	Menerapkan matriks transformasi affine 2D ke gambar.
Komposit aritmatika	Menggabungkan dua gambar menggunakan persamaan yang fleksibel.
Efek campuran	Membuat efek campuran yang menggabungkan dua gambar. Komposisi menyediakan 21 dari 26 mode campuran yang didukung dalam Win2D.
Sumber warna	Menghasilkan gambar yang berisi warna solid.
Composite	Menggabungkan dua gambar. Komposisi menyediakan semua 13 mode komposit yang didukung dalam Win2D.
Kontras	Meningkatkan atau mengurangi kontras gambar.
Eksposur	Meningkatkan atau mengurangi paparan gambar.
Grayscale	Mengonversi gambar menjadi abu-abu monokromatik.
Transferan Gamma	Mengubah warna gambar dengan menerapkan fungsi transfer gamma per saluran.
Pengubahan Hue	Mengubah warna gambar dengan memutar nilai ronanya.
Balikkan	Menginversi warna gambar.
Saturasi	Mengubah saturasi gambar.
Sepia	Mengonversi gambar menjadi nada sepia.
Suhu dan warna	Menyesuaikan suhu dan/atau warna gambar.

Lihat Namespace Microsoft.Graphics.Canvas.Effects Win2D untuk informasi selengkapnya. Efek yang tidak didukung dalam komposisi dicatat sebagai [NoComposition].

Efek Rantai

Efek dapat ditautkan, memungkinkan aplikasi untuk secara bersamaan menggunakan beberapa efek pada gambar. Grafik efek dapat mendukung beberapa efek yang dapat merujuk ke satu dan lainnya. Saat menjelaskan efek Anda, cukup tambahkan efek sebagai input ke efek Anda.

IGraphicsEffect graphicsEffect =
new Microsoft.Graphics.Canvas.Effects.ArithmeticCompositeEffect
{
  Source1 = new CompositionEffectSourceParameter("source1"),
  Source2 = new SaturationEffect
  {
    Saturation = 0,
    Source = new CompositionEffectSourceParameter("source2")
  },
  MultiplyAmount = 0,
  Source1Amount = 0.5f,
  Source2Amount = 0.5f,
  Offset = 0
}

Contoh di atas menjelaskan efek komposit aritmatika yang memiliki dua input. Input kedua memiliki efek saturasi dengan properti saturasi 0.5.

Dukungan Animasi

Properti efek mendukung animasi, selama proses kompilasi efek Anda dapat menetapkan properti efek yang dapat dianimasikan dan yang dapat ditetapkan sebagai konstanta. Properti yang dapat dianimatasikan ditentukan melalui string formulir "nama efek.nama properti". Properti ini dapat dianimasikan secara independen dalam beberapa instansiasi efek.

Properti Efek Konstanta vs Animasi

Selama kompilasi efek, Anda dapat menentukan properti efek sebagai properti dinamis atau sebagai properti yang "dipanggang" sebagai konstanta. Properti dinamis ditentukan melalui string formulir "<nama> efek.<nama> properti". Properti dinamis dapat diatur ke nilai tertentu atau dapat dianimasikan menggunakan sistem animasi komposisi.

Saat mengompilasi deskripsi efek di atas, Anda memiliki fleksibilitas untuk menetapkan saturasi menjadi 0,5 secara statis atau membuatnya bersifat dinamis dengan mengaturnya secara dinamis atau menganimasikannya.

Mengkompilasi efek dengan saturasi yang tertanam:

var effectFactory = _compositor.CreateEffectFactory(graphicsEffect);

Mengkompilasi efek dengan saturasi dinamis:

var effectFactory = _compositor.CreateEffectFactory(graphicsEffect, new[]{"SaturationEffect.Saturation"});
_catEffect = effectFactory.CreateBrush();
_catEffect.SetSourceParameter("mySource", surfaceBrush);
_catEffect.Properties.InsertScalar("saturationEffect.Saturation", 0f);

Properti saturasi efek di atas kemudian dapat diatur ke nilai statis atau dianimasikan menggunakan animasi Ekspresi atau ScalarKeyFrame.

Anda dapat membuat ScalarKeyFrame yang akan digunakan untuk menganimasikan properti Saturasi dari efek seperti ini:

ScalarKeyFrameAnimation effectAnimation = _compositor.CreateScalarKeyFrameAnimation();
            effectAnimation.InsertKeyFrame(0f, 0f);
            effectAnimation.InsertKeyFrame(0.50f, 1f);
            effectAnimation.InsertKeyFrame(1.0f, 0f);
            effectAnimation.Duration = TimeSpan.FromMilliseconds(2500);
            effectAnimation.IterationBehavior = AnimationIterationBehavior.Forever;

Mulai animasi pada properti Saturasi efek seperti ini:

catEffect.Properties.StartAnimation("saturationEffect.Saturation", effectAnimation);

Beberapa Instans Efek dengan Properti Independen

Dengan menentukan bahwa parameter harus dinamis selama kompilasi efek, parameter kemudian dapat diubah berdasarkan instans per efek. Ini memungkinkan dua Visual untuk menggunakan efek yang sama tetapi dirender dengan properti efek yang berbeda.

Panduan Memulai dengan Efek Komposisi

Tutorial mulai cepat ini menunjukkan kepada Anda cara menggunakan beberapa kemampuan dasar efek.

Menginstal Visual Studio

Jika Anda tidak memiliki versi Visual Studio yang didukung yang terinstal, buka halaman Unduhan Visual Studio di sini.

Membuat proyek baru

Pergi ke File>Baru>Proyek.
Pilih templat Aplikasi Kosong, Dikemas (WinUI 3 di Desktop), atau pilih Aplikasi Kosong, Buka Kemasan (WinUI 3 di Desktop) jika lebih cocok dengan model aplikasi Anda.
Masukkan nama proyek yang Anda pilih.
Klik Buat.

Menginstal Win2D

Win2D dirilis sebagai paket NuGet.org dan perlu diinstal sebelum Anda dapat menggunakan efek ini dalam proyek WinUI.

Luncurkan Manajer Paket NuGet dengan membuka Alat> Pengelola >Kelola Paket NuGet untuk Solusi.
Cari Win2D.WinUI dan instal paket tersebut untuk proyek Anda.
Terima perjanjian lisensi.
Klik Tutup.

Dalam beberapa langkah berikutnya kita akan menggunakan API komposisi untuk menerapkan efek saturasi pada gambar kucing ini yang akan menghilangkan semua saturasi. Dalam model ini efek dibuat dan kemudian diterapkan ke gambar.

Gambar sumber

Mengatur Dasar-Dasar Komposisi Anda

_compositor = ElementCompositionPreview.GetElementVisual(MyHost).Compositor;
_root = _compositor.CreateContainerVisual();
ElementCompositionPreview.SetElementChildVisual(MyHost, _root);

Membuat Kuas CompositionSurface

CompositionSurfaceBrush surfaceBrush = _compositor.CreateSurfaceBrush();
LoadedImageSurface imageSurface = LoadedImageSurface.StartLoadFromUri(new Uri("ms-appx:///Assets/cat.png"));
surfaceBrush.Surface = imageSurface;

Membuat, Mengkompilasi, dan Menerapkan Efek

Buat efek grafis.

var graphicsEffect = new SaturationEffect
{
    Saturation = 0.0f,
    Source = new CompositionEffectSourceParameter("mySource")
};

Kompilasi efek dan buat kuas efek.

var effectFactory = _compositor.CreateEffectFactory(graphicsEffect);

var catEffect = effectFactory.CreateBrush();
catEffect.SetSourceParameter("mySource", surfaceBrush);

Buat SpriteVisual di pohon komposisi dan terapkan efeknya.

var catVisual = _compositor.CreateSpriteVisual();
catVisual.Brush = catEffect;
catVisual.Size = new Vector2(219, 300);
_root.Children.InsertAtBottom(catVisual);

Jalankan aplikasi Anda. Hasil Anda seharusnya berupa kucing dengan saturasi warna rendah.

Gambar yang didesturasi

Informasi Lainnya

Saran dan Komentar

Apakah halaman ini membantu?

Last updated on 2026-03-18