Efek komposisi

Artikel
03/18/2023

WINDOWS.UI.Composition API memungkinkan efek real-time diterapkan pada gambar dan UI dengan properti efek yang dapat dianimasikan. Dalam gambaran umum ini, kita akan menjalankan fungsionalitas yang tersedia yang memungkinkan efek diterapkan ke visual komposisi.

Untuk mendukung konsistensi Platform Windows Universal (UWP) bagi pengembang yang menjelaskan efek dalam aplikasi mereka, efek komposisi memanfaatkan antarmuka IGraphicsEffect Win2D untuk menggunakan deskripsi efek melalui Namespace Layanan Microsoft.Graphics.Canvas.Effects.

Efek kuas digunakan untuk melukis area aplikasi dengan menerapkan efek pada satu set gambar yang ada. Windows 10 API efek komposisi difokuskan pada Visual Sprite. SpriteVisual memungkinkan fleksibilitas dan interplay dalam pembuatan warna, gambar, dan efek. SpriteVisual adalah jenis visual komposisi yang dapat mengisi persegi panjang 2D dengan kuas. Visual mendefinisikan batas persegi panjang dan kuas mendefinisikan piksel yang digunakan untuk mengecat persegi panjang.

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

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

Fitur Efek

Pustaka 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.
Komposit	Menggabungkan dua gambar. Komposisi menyediakan semua 13 mode komposit yang didukung dalam Win2D.
Kontras	Menambah atau mengurangi kontras gambar.
Pencahayaan	Menambah atau mengurangi paparan gambar.
Skala abu-abu	Mengonversi gambar menjadi abu-abu monokromatik.
Transfer Gamma	Mengubah warna gambar dengan menerapkan fungsi transfer gamma per saluran.
Rotasi hue	Mengubah warna gambar dengan memutar nilai ronanya.
Balikkan	Menginversi warna gambar.
Saturasi	Mengubah kejenuhan 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 Penautan

Efek dapat dirangkai, 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 pada 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 .5.

Dukungan Animasi

Properti efek mendukung animasi, selama kompilasi efek Anda dapat menentukan properti efek dapat dianimasikan dan yang dapat "dipanggang" sebagai konstanta. Properti yang dapat dianimasikan ditentukan melalui string formulir "nama efek.nama properti". Properti ini dapat dianimasikan secara independen melalui 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 mengkompilasi deskripsi efek di atas, Anda memiliki fleksibilitas pembuatan kue dalam saturasi agar sama dengan 0,5 atau membuatnya dinamis dan mengaturnya secara dinamis atau menanimasikannya.

Mengkompilasi efek dengan saturasi yang dipanggang dalam:

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.

Memulai 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 produk baru

Buka File-Proyek> Baru>...
Pilih 'Visual C#'
Membuat 'Aplikasi Kosong (Universal Windows)' (Visual Studio 2015)
Masukkan nama proyek yang Anda pilih
Klik 'OK'

Menginstal Win2D

Win2D dirilis sebagai paket Nuget.org dan perlu diinstal sebelum Anda dapat menggunakan efek.

Ada dua versi paket, satu untuk Windows 10 dan satu untuk Windows 8.1. Untuk Efek komposisi, Anda akan menggunakan versi Windows 10.

Luncurkan Manajer Paket NuGet dengan membuka Alat → Manajer Paket NuGet → Mengelola Paket NuGet untuk Solusi.
Cari "Win2D" dan pilih paket yang sesuai untuk versi target Windows Anda. Karena Windows.UI. Komposisi mendukung Windows 10 (bukan 8.1), pilih Win2D.uwp.
Terima perjanjian lisensi
Klik 'Tutup'

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

Gambar sumber

Mengatur Dasar-Dasar Komposisi Anda

_compositor = new Compositor();
_root = _compositor.CreateContainerVisual();
_target = _compositor.CreateTargetForCurrentView();
_target.Root = _root;
_imageFactory = new CompositionImageFactory(_compositor)
Desaturate();

Membuat Kuas KomposisiSurface

CompositionSurfaceBrush surfaceBrush = _compositor.CreateSurfaceBrush();
LoadImage(surfaceBrush);

Membuat, Mengkompilasi, dan Menerapkan Efek

Membuat efek grafik

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

Mengkompilasi efek dan membuat 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);

Buat sumber gambar Anda untuk dimuat.

CompositionImage imageSource = _imageFactory.CreateImageFromUri(new Uri("ms-appx:///Assets/cat.png"));
CompositionImageLoadResult result = await imageSource.CompleteLoadAsync();
if (result.Status == CompositionImageLoadStatus.Success)

Ukuran dan sikat permukaan pada SpriteVisual
```
brush.Surface = imageSource.Surface;
```
Jalankan aplikasi Anda - hasil Anda harus menjadi kucing yang didesturasi:

Gambar yang didesturasi