Efek komposisi

Artikel
07/05/2024

WINDOWS.UI.Composition API memungkinkan efek real-time diterapkan pada gambar dan UI dengan properti efek yang dapat diubah. 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 Microsoft.Graphics.Canvas.Effects.

Efek kuas digunakan untuk melukis area aplikasi dengan menerapkan efek pada satu set gambar yang ada. API efek komposisi Windows 10 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 kuas efek 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	Meningkatkan atau mengurangi kontras gambar.
Pencahayaan	Meningkatkan 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 saturasi gambar.
Sotong	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 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 .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 dianimatasikan ditentukan melalui string formulir "nama efek.nama properti". Properti ini dapat dianimasikan secara independen melalui beberapa instans 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 menganimasikannya.

Mengkompilasi efek dengan saturasi yang dipanggang di:

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 (Windows Universal)' (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 menghilangkan 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 desaturasi:

Gambar yang didesturasi

Bagikan melalui