Kompositionseffekte

Artikel
07/05/2024

Die Windows.UI.Composition-APIs ermöglichen die Anwendung von Echtzeiteffekten auf Bilder und Ui mit animierbaren Effekteigenschaften. In dieser Übersicht werden wir die verfügbaren Funktionen durchlaufen, mit denen Effekte auf eine visuelle Komposition angewendet werden können.

Um Universelle Windows-Plattform (UWP)-Konsistenz für Entwickler zu unterstützen, die Effekte in ihren Anwendungen beschreiben, nutzen Kompositionseffekte die IGraphicsEffect-Schnittstelle von Win2D, um Effektbeschreibungen über die Microsoft.Graphics.Canvas.Effects-Namespace zu verwenden.

Pinseleffekte werden verwendet, um Bereiche einer Anwendung zu zeichnen, indem Effekte auf eine Reihe vorhandener Bilder angewendet werden. Windows 10-Kompositionseffekt-APIs konzentrieren sich auf Sprite Visuals. Das SpriteVisual ermöglicht Flexibilität und Interaktion bei der Farb-, Bild- und Effekterstellung. 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 definiert die Pixel, die zum Zeichnen des Rechtecks verwendet werden.

Effektpinsel werden für visuelle Kompositionsstrukturelemente verwendet, deren Inhalt aus der Ausgabe eines Effektdiagramms stammt. 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 die folgenden Effekte:

Auswirkung	Beschreibung
2D-affine Transformation	Wendet eine 2D-affine Transformationsmatrix auf ein Bild an.
Arithmetische Zusammengesetzte	Kombiniert zwei Bilder mit einer flexiblen Formel.
Blend-Effekt	Erstellt einen Blend-Effekt, der zwei Bilder kombiniert. Composition bietet 21 der 26 in Win2D unterstützten Blendmodi .
Farbquelle	Generiert ein Bild, das eine Volltonfarbe enthält.
Zusammengesetzt	Kombiniert zwei Bilder. Composition stellt alle 13 zusammengesetzten Modi bereit, die in Win2D unterstützt werden.
Kontraste	Erhöht oder verkleinert den Kontrast eines Bilds.
Exposure (Belichtung)	Erhöht oder verringert die Belichtung eines Bilds.
Grayscale	Konvertiert ein Bild in monochromes Grau.
Gammaübertragung	Ändert die Farben eines Bilds, indem eine Gammaübertragungsfunktion pro Kanal angewendet wird.
Farbtondrehung	Ändert die Farbe eines Bilds, indem die Farbtonwerte gedreht werden.
Invertierung	Invertiert die Farben eines Bilds.
Sättigen	Ä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ührlichere Informationen finden Sie im Microsoft.Graphics.Canvas.Effects-Namespace von Win2D. Effekte, die in der Komposition nicht unterstützt werden, werden als [NoComposition] angegeben.

Verkettungseffekte

Effekte können verkettet werden, sodass eine Anwendung mehrere Effekte auf einem Bild gleichzeitig verwenden kann. Effektdiagramme können mehrere Effekte unterstützen, die auf einen und andere verweisen können. Wenn Sie Ihren Effekt beschreiben, fügen Sie einfach einen Effekt als Eingabe zu Ihrem Effekt 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 ein arithmetischer zusammengesetzter Effekt beschrieben, der zwei Eingaben enthält. Die zweite Eingabe hat einen Sättigungseffekt mit einer Sättigungseigenschaft von 0,5.

Animationsunterstützung

Effekteigenschaften unterstützen Animation, während der Effektkompilierung können Sie Effekteigenschaften animieren und die als Konstanten "eingebacken" werden können. Die animierbaren Eigenschaften werden über Zeichenfolgen des Formulars "Effect name.property name" angegeben. Diese Eigenschaften können unabhängig über mehrere Instanziierungen des Effekts animiert werden.

Konstanten- und Animierte Effekteigenschaften

Während der Effektkompilierung können Sie Effekteigenschaften als dynamisch oder als Eigenschaften angeben, die als Konstanten "eingebacken" sind. Die dynamischen Eigenschaften werden über Zeichenfolgen des Formulars "<Effektname>" angegeben.<property name>". Die dynamischen Eigenschaften können auf einen bestimmten Wert festgelegt oder mithilfe des Kompositionsanimationssystems animiert werden.

Beim Kompilieren der obigen Effektbeschreibung haben Sie die Flexibilität, entweder in der Sättigung zu backen, um 0,5 zu entsprechen, oder sie dynamisch zu gestalten und dynamisch festzulegen oder zu animieren.

Kompilieren eines Effekts mit eingebackener 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 obigen Effekts kann dann entweder auf einen statischen Wert festgelegt oder mithilfe von Expression- oder ScalarKeyFrame-Animationen animiert werden.

Sie können einen ScalarKeyFrame erstellen, der verwendet wird, um die Sättigungseigenschaft eines Effekts wie folgt zu animieren:

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 die Animation für die Sättigungseigenschaft des Effekts wie folgt:

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

Mehrere Effektinstanzen mit unabhängigen Eigenschaften

Wenn Sie angeben, dass ein Parameter während der Effektkompilierung dynamisch sein soll, kann der Parameter dann 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 Funktionen von Effekten nutzen können.

Visual Studio installieren

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 "Datei-Neu-Projekt>>"...
Wählen Sie "Visual C#" aus.
Erstellen einer leeren App (Windows Universal)" (Visual Studio 2015)
Geben Sie einen Projektnamen Ihrer Wahl ein.
Klicken Sie auf "OK".

Installieren von Win2D

Win2D wird als Nuget.org-Paket veröffentlicht und muss installiert werden, bevor Sie Effekte verwenden 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 die NuGet-Paket-Manager, indem Sie zu Tools → NuGet Paket-Manager → Manage NuGet Packages for Solution wechseln.
Suchen Sie nach "Win2D", und wählen Sie das entsprechende Paket für Ihre Zielversion von Windows aus. Da Windows.UI. Composition unterstützt Windows 10 (nicht 8.1), wählen Sie Win2D.uwp aus.
Akzeptieren des Lizenzvertrags
Klicken Sie auf "Schließen".

In den nächsten Schritten verwenden wir die Kompositions-API zum Anwenden eines Sättigungseffekts auf dieses Katzenbild, das alle Sättigung entfernt. In diesem Modell wird der Effekt erstellt und dann auf ein Bild angewendet.

Quellimage

Festlegen der Kompositionsgrundlagen

_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 eines Effektpinsels

var effectFactory = _compositor.CreateEffectFactory(graphicsEffect);

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

Erstellen eines SpriteVisual-Elements in der Kompositionsstruktur und Anwenden des Effekts

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

Erstellen Sie die zu ladende Bildquelle.

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 entaturierte Katze sein:

Entaturiertes Bild

Freigeben über