Efek komposisi

Windows. UI. API Komposisi 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 pada visual komposisi.

Untuk mendukung konsistensi Universal Windows Platform (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. 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 melukis 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 UIElements XAML menggunakan kuas efek dengan XamlCompositionBrushBase.

Fitur Efek

Pustaka Efek

Komposisi saat ini mendukung efek berikut:

Efek Deskripsi
Transformasi affine 2D Menerapkan matriks transformasi affine 2D ke gambar. Kami menggunakan efek ini untuk menganimasikan masker alfa dalam efek kami [sampel](https://github.com/microsoft/WindowsCompositionSamples/tree/master/Demos/Reference Demos/BasicCompositonEffects).
Komposit aritmatika Menggabungkan dua gambar menggunakan persamaan yang fleksibel. Kami menggunakan komposit aritmatika untuk membuat efek crossfade di [samples](https://github.com/microsoft/WindowsCompositionSamples/tree/master/Demos/Reference Demos/BasicCompositonEffects).
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.
Jenuh 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 lebih rinci. 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 instansiasi efek.

Properti Konstanta vs Efek 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 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);

Lihat properti [Desaturation - Animation sample](https://github.com/microsoft/WindowsCompositionSamples/tree/master/Demos/Reference Demos/BasicCompositonEffects/Desaturation - Animation) untuk properti efek yang dianimasikan dengan bingkai kunci dan [AlphaMask sample](https://github.com/microsoft/WindowsCompositionSamples/tree/master/Demos/Reference Demos/BasicCompositonEffects/AlphaMask) untuk penggunaan efek dan ekspresi.

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. Lihat ColorSource dan Blend [sample](https://github.com/microsoft/WindowsCompositionSamples/tree/master/Demos/Reference Demos/BasicCompositonEffects/ColorSource and Blend) untuk informasi selengkapnya.

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 proyek baru

  • Buka File-Baru-Project>>...
  • 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 → Pengelola 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.

Source image

Mengatur Dasar-Dasar Komposisi Anda

Lihat [Komposisi Sampel Pohon Visual](https://github.com/microsoft/WindowsCompositionSamples/tree/master/Demos/Reference Demo/KomposisiImageSample) di GitHub kami untuk contoh cara menyiapkan Windows. UI. Komposit Komposisi, ContainerVisual root, dan kaitkan dengan Jendela Inti.

_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

  1. Membuat efek grafik

    var graphicsEffect = new SaturationEffect
    {
      Saturation = 0.0f,
      Source = new CompositionEffectSourceParameter("mySource")
    };
    
  2. Mengkompilasi efek dan membuat kuas efek

    var effectFactory = _compositor.CreateEffectFactory(graphicsEffect);
    
    var catEffect = effectFactory.CreateBrush();
    catEffect.SetSourceParameter("mySource", surfaceBrush);
    
  3. 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);    
    
  4. 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)
    
  5. Ukuran dan sikat permukaan pada SpriteVisual

    brush.Surface = imageSource.Surface;
    
  6. Jalankan aplikasi Anda - hasil Anda harus menjadi kucing yang didesturasi:

Desaturated image

Informasi Lebih Lanjut