Kompositionseffekte

Artikel
03/18/2023

Die Windows.UI.Composition-APIs ermöglichen das Anwenden von Echtzeiteffekten auf Bilder und die Benutzeroberfläche mit abstellbaren Effekteigenschaften. In dieser Übersicht erläutern wir die Funktionen, über die Effekte auf visuelle Kompositionselemente angewendet werden können.

Um die Konsistenz der Universellen Windows-Plattform (UWP) für Entwickler zu gewährleisten, die Effektbeschreibungen in ihren Anwendungen verwenden, nutzen Kompositionseffekte die „IGraphicsEffect“-Schnittstelle von Win2D, um die Effektbeschreibungen über den Microsoft.Graphics.Canvas.Effects-Namespace anzuwenden.

Pinseleffekte werden verwendet, um Bereiche einer Anwendung farbig zu gestalten. Dabei werden Effekte auf eine Gruppe vorhandener Bilder angewendet. Die Kompositionseffekt-APIs in Windows 10 sind auf visuelle Sprite-Elemente ausgerichtet. Das SpriteVisual-Element ermöglicht hohe Flexibilität und Interaktion bei der Farb-, Bild- und Effektgestaltung. SpriteVisual ist ein visueller Kompositionstyp, der ein 2D-Rechteck mit einem Pinsel füllen kann. Das visuelle Element definiert die Grenzen des Rechtecks und der Pinsel die Pixel zum Zeichnen des Rechtecks.

Effektpinsel werden für visuelle Elemente von Kompositionsstrukturen verwendet, deren Inhalt der Ausgabe eines Effektgraphen entnommen wird. Effekte können auf vorhandene Oberflächen/Texturen verweisen, aber nicht auf die Ausgabe anderer Kompositionsstrukturen.

Effekte können auch mithilfe eines Effektpinsels mit XamlCompositionBrushBase auf XAML UIElements angewendet werden.

Effektfeatures

Effektbibliothek

Derzeit unterstützt die Komposition folgende Effekte:

Auswirkung	Beschreibung
2D-affine Transformation	Wendet eine 2D-affine Transformationsmatrix auf ein Bild an.
Arithmetische Komposition	Kombiniert zwei Bilder mittels einer flexiblen Gleichung.
Fülleffekt	Erzeugt einen Fülleffekt, der zwei Bilder kombiniert. Die Komposition stellt 21 der 26 in Win2D unterstützten Füllmethoden bereit.
Farbquelle	Generiert ein Bild, das eine Volltonfarbe enthält.
Composite	Kombiniert zwei Bilder. Die Komposition stellt alle 13 in Win2D unterstützten Kompositionsmodi bereit.
Vergleichen Sie	Erhöht oder verringert den Kontrast eines Bilds.
Belichtung	Erhöht oder verringert die Belichtung eines Bilds.
Grayscale	Konvertiert ein Bild in ein monochromes Graustufenbild.
Gammakorrektur	Ändert die Farben eines Bilds, indem die Gammakorrekturfunktion pro Kanal angewendet wird.
Farbtondrehung	Ändert die Farbe eines Bilds durch Rotation der Farbtonwerte.
Invertierung	Invertiert die Farben eines Bilds.
Sättigung	Ändert die Sättigung eines Bilds.
Sepia	Konvertiert ein Bild in Sepiatöne.
Temperatur und Farbton	Passt die Temperatur und/oder den Farbton eines Bilds an.

Ausführliche Informationen finden Sie in der Beschreibung des Win2D-Namespaces Microsoft.Graphics.Canvas.Effects. Effekte, die in der Komposition nicht unterstützt werden, werden als [NoComposition] notiert.

Verketten von Effekten

Effekte können verkettet werden, um einer Anwendung die gleichzeitige Nutzung mehrerer Effekte in einem Bild zu ermöglichen. Effektgraphen unterstützen mehrere Effekte, die aufeinander verweisen können. Bei der Beschreibung eines Effekts fügen Sie Ihrem Effekt einfach einen Effekt als Eingabe hinzu.

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
}

Im obigen Beispiel wird der Effekt einer arithmetischen Komposition mit zwei Eingaben beschrieben. Die zweite Eingabe hat einen Sättigungseffekt mit der Sättigungseigenschaft „0,5“.

Animationsunterstützung

Effekteigenschaften bieten Unterstützung für Animationen. Während der Effektkompilierung können Sie angeben, welche Effekteigenschaften animiert und welche als Konstanten vorgegeben werden können. Die animierbaren Eigenschaften werden über Zeichenfolgen im Format „Effektname.Eigenschaftenname“ angegeben. Diese Eigenschaften können unabhängig über mehrere Instanziierungen des Effekts animiert werden.

Konstante im Vergleich zu animierten Effekteigenschaften

Während der Effektkompilierung können Sie Effekteigenschaften als dynamisch oder als Eigenschaften angeben, die konstant fest sind. Die dynamischen Eigenschaften werden durch Zeichenfolgen der Form "Effektname>"< angegeben.< Eigenschaftsname>". Die dynamischen Eigenschaften können auf einen bestimmten Wert festgelegt oder mithilfe des Kompositionsanimationssystems animiert werden.

Beim Kompilieren der oben angegebenen Effektbeschreibung können Sie die Sättigung entweder als Konstante mit dem Wert „0,5“ vorgeben oder sie dynamisch gestalten (sie also dynamisch festlegen oder animieren).

Kompilieren eines Effekts mit als Konstante festgelegter Sättigung:

var effectFactory = _compositor.CreateEffectFactory(graphicsEffect);

Kompilieren eines Effekts mit dynamischer Sättigung:

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

Die Sättigungseigenschaft des oben genannten Effekts kann dann entweder auf einen statischen Wert festgelegt oder mithilfe der Expression- oder ScalarKeyFrame-Animation animiert werden.

Sie können ein ScalarKeyFrame-Element erstellen, das wie folgt zum Animieren der Sättigungseigenschaft eines Effekts verwendet wird:

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;

Starten Sie wie folgt die Animation der Sättigungseigenschaft des Effekts:

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

Mehrere Effektinstanzen mit unabhängigen Eigenschaften

Wenn angegeben wird, dass ein Parameter während der Effektkompilierung dynamisch sein soll, kann der Parameter pro Effektinstanz geändert werden. Dadurch können zwei visuelle Elemente denselben Effekt verwenden, aber mit unterschiedlichen Effekteigenschaften gerendert werden.

Erste Schritte mit Kompositionseffekten

In diesem Schnellstart-Lernprogramm erfahren Sie, wie Sie einige der grundlegenden Effektfunktionen nutzen.

Installieren von Visual Studio

Wenn Sie keine unterstützte Version von Visual Studio installiert haben, wechseln Sie hier zur Visual Studio-Downloadseite.

Erstellen eines neuen Projekts

Wechseln Sie zu File-New-Project>>...
Wählen Sie „Visual C#“ aus.
Erstellen Sie eine App vom Typ „(Leere App (Windows – universell)“ (Visual Studio 2015).
Geben Sie einen Projektnamen Ihrer Wahl ein.
Klicken Sie auf „OK“.

Installieren von Win2D

Win2D wird als „Nuget.org“-Paket freigegeben und muss installiert werden, damit Sie Effekte nutzen können.

Es gibt zwei Paketversionen: eine für Windows 10 und eine für Windows 8.1. Für Kompositionseffekte verwenden Sie die Windows 10-Version.

Starten Sie den NuGet-Paket-Manager, indem Sie „Extras → NuGet-Paket-Manager → NuGet-Pakete für Projektmappe verwalten“ auswählen.
Suchen Sie nach „Win2D“, und wählen Sie das entsprechende Paket für die Zielversion von Windows aus. Da Windows.UI. Composition Windows 10 (aber nicht 8.1) unterstützt, wählen Sie „Win2D.uwp“ aus.
Akzeptieren Sie den Lizenzvertrag.
Klicken Sie auf „Schließen“.

In den nächsten Schritten verwenden wir Composition-APIs, um einen Sättigungseffekt auf dieses Katzenfoto anzuwenden, durch den die gesamte Sättigung entfernt wird. In diesem Modell wird der Effekt erstellt und dann auf ein Bild angewendet.

Quellbild

Festlegen der Grundlagen für die Komposition

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

Erstellen eines CompositionSurface-Pinsels

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

Erstellen, Kompilieren und Anwenden von Effekten

Erstellen des Grafikeffekts

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

Kompilieren des Effekts und Erstellen des Effektpinsels

var effectFactory = _compositor.CreateEffectFactory(graphicsEffect);

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

Erstellen sie einen SpriteVisual in der Kompositionsstruktur, und wenden Sie den Effekt an.

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

Erstellen Sie Ihre Bildquelle zum Laden.

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

Größe und Pinsel der Oberfläche auf dem SpriteVisual
```
brush.Surface = imageSource.Surface;
```
Führen Sie Ihre App aus – Ihre Ergebnisse sollten eine entsättigte Katze sein:

Bild ohne Sättigung