Udostępnij za pośrednictwem

Efekty kompozycji

Interfejsy API Microsoft.UI.Composition umożliwiają stosowanie efektów w czasie rzeczywistym do obrazów i interfejsu użytkownika z animowalnymi właściwościami efektów. W tym omówieniu omówimy funkcje, które umożliwiają stosowanie efektów do wizualizacji kompozycji w aplikacjach WinUI i Windows App SDK.

Aby obsługiwać spójne tworzenie efektów w aplikacjach WinUI i Windows App SDK, efekty kompozycji wykorzystują interfejs IGraphicsEffect win2D, aby można było opisać efekty przy użyciu przestrzeni nazw Microsoft.Graphics.Canvas.Effects .

Efekty pędzla są używane do malowania obszarów aplikacji przez zastosowanie efektów do zestawu istniejących obrazów. Interfejsy API efektu kompozycji zestawu SDK aplikacji systemu Windows koncentrują się na funkcji SpriteVisuals. Funkcja SpriteVisual zapewnia elastyczność podczas łączenia tworzenia kolorów, obrazów i efektów. Wizualizacja definiuje granice prostokąta, a pędzl definiuje piksele używane do malowania.

Pędzle efektu są używane w wizualizacjach drzewa kompozycji, których zawartość pochodzi z danych wyjściowych grafu efektów. Efekty mogą odwoływać się do istniejących powierzchni/tekstur, ale nie do wyniku innych drzew kompozycji.

Efekty można również stosować do elementów interfejsu użytkownika XAML przy użyciu pędzla efektu z XamlCompositionBrushBase.

Funkcje efektu

Biblioteka efektów

Obecnie kompozycja obsługuje następujące efekty:

Efekt Opis
Transformacja afiniczna 2D Stosuje macierz przekształcenia afiniczną 2D do obrazu.
Kompozyt arytmetyczny Łączy dwa obrazy przy użyciu elastycznego równania.
Efekt mieszania Tworzy efekt mieszany, który łączy dwa obrazy. Kompozycja zapewnia 21 z 26 obsługiwanych w Win2D trybów mieszania.
Źródło kolorów Generuje obraz zawierający pełny kolor.
Kompozyt Łączy dwa obrazy. Kompozycja zapewnia wszystkie 13 trybów kompozycji obsługiwanych w systemie Win2D.
Kontrast Zwiększa lub zmniejsza kontrast obrazu.
Narażenie Zwiększa lub zmniejsza ekspozycję obrazu.
Skala szarości Konwertuje obraz na odcienie szarości.
Transfer gamma Zmienia kolory obrazu, stosując funkcję transferu gamma dla kanału.
Obrót hue Zmienia kolor obrazu, obracając jego wartości odcieni.
Odwróć Odwraca kolory obrazu.
Nasycenia Zmienia nasycenie obrazu.
Sepia Konwertuje obraz na odcienie sepii.
Temperatura i odcień Dostosowuje temperaturę i/lub odcień obrazu.

Aby uzyskać bardziej szczegółowe informacje, zobacz przestrzeń nazw Win2D Microsoft.Graphics.Canvas.Effects. Efekty, które nie są obsługiwane w kompozycji, są oznaczone jako [NoComposition].

Efekty łańcuchowe

Efekty mogą być łańcuchowe, dzięki czemu aplikacja może jednocześnie używać wielu efektów na obrazie. Wykresy efektów mogą obsługiwać wiele efektów, które mogą odnosić się do jednego i drugiego. Opisując efekt, po prostu dodaj efekt jako dane wejściowe do efektu.

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
}

W powyższym przykładzie opisano efekt złożony arytmetyczny, który ma dwa dane wejściowe. Drugie wejście ma efekt nasycenia z właściwością nasycenia ustawioną na 0.5.

Obsługa animacji

Właściwości efektu mogą wspierać animację; podczas kompilacji efektu można określić, które właściwości mogą być animowane, a które powinny być ustalone jako stałe. Właściwości animatowalne są określane za pomocą ciągów formularza "nazwa efektu.nazwa właściwości". Te właściwości mogą być animowane niezależnie od wielu wystąpień efektu.

Stałe i animowane właściwości efektu

Podczas kompilacji efektu można określić właściwości efektu jako dynamiczne lub jako właściwości wbudowane jako stałe. Właściwości dynamiczne są określane za pomocą ciągów formularza "<nazwa> efektu.<nazwa> właściwości". Właściwości dynamiczne można ustawić na określoną wartość lub animować przy użyciu systemu animacji kompozycyjnej.

Podczas kompilowania powyższego opisu efektu masz elastyczność określenia wartości nasycenia jako 0,5 i utrwalenia jej, bądź dynamicznego ustawienia tej wartości lub jej animowania.

Kompilowanie efektu z wbudowanym nasyceniem.

var effectFactory = _compositor.CreateEffectFactory(graphicsEffect);

Kompilowanie efektu z dynamicznym nasyceniem:

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

Właściwość nasycenia powyższego efektu może być następnie ustawiona na wartość statyczną lub animowana przy użyciu animacji Expression lub ScalarKeyFrame.

Możesz utworzyć ScalarKeyFrame, który będzie używany do animowania właściwości saturacji efektu w następujący sposób:

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;

Uruchom animację we właściwości Nasycenie efektu w następujący sposób:

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

Wiele wystąpień efektu z niezależnymi właściwościami

Określając, że parametr powinien być dynamiczny podczas kompilacji efektu, parametr można następnie zmienić na podstawie wystąpienia efektu. Dzięki temu dwie wizualizacje mogą używać tego samego efektu, ale są renderowane z różnymi właściwościami efektu.

Wprowadzenie do efektów kompozycji

W tym szybkim przewodniku pokazano, jak korzystać z niektórych podstawowych możliwości efektów.

Instalowanie programu Visual Studio

  • Jeśli nie masz zainstalowanej obsługiwanej wersji programu Visual Studio, przejdź do strony Pobierania programu Visual Studio tutaj.

Tworzenie nowego projektu

  • Przejdź do Plik>Nowy>Projekt.
  • Wybierz szablon Pusta aplikacja, Spakowana (WinUI 3 na pulpicie) lub wybierz pozycję Pusta aplikacja, Rozpakowana (WinUI 3 na pulpicie) jeśli lepiej pasuje do modelu aplikacji.
  • Wprowadź wybraną nazwę projektu.
  • Kliknij pozycję Utwórz.

Instalowanie win2D

Win2D jest udostępniany jako pakiet NuGet.org i należy go zainstalować przed użyciem tych efektów w projekcie WinUI.

  • Uruchom Menedżera pakietów NuGet, przechodząc do pozycji Narzędzia> Menedżer >Zarządzanie pakietami NuGet dla rozwiązania.
  • Wyszukaj plik Win2D.WinUI i zainstaluj ten pakiet dla projektu.
  • Zaakceptuj umowę licencyjną.
  • Kliknij Zamknij.

W następnych kilku krokach użyjemy kompozycyjnego API, aby zastosować efekt nasycenia do tego obrazu kota, który całkowicie usunie nasycenie. W tym modelu efekt jest tworzony, a następnie stosowany do obrazu.

Obraz źródłowy

Ustawianie podstaw kompozycji

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

Tworzenie pędzla CompositionSurface

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

Tworzenie, kompilowanie i stosowanie efektów

  1. Utwórz efekt graficzny.

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

  2. Skompiluj efekt i utwórz szczotkę efektu.

    var effectFactory = _compositor.CreateEffectFactory(graphicsEffect);

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

  3. Utwórz element SpriteVisual w drzewie kompozycji i zastosuj efekt.

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

  4. Uruchom aplikację. Wynik powinien być kotem o zmniejszonej saturacji kolorów.

Obraz pozbawiony nasycenia

Więcej informacji

  • Last updated on