Dela via

Kompositionseffekter

API:er för Microsoft.UI.Composition tillåter att realtidseffekter tillämpas på bilder och användargränssnitt med animatable-effektegenskaper. I den här översikten går vi igenom de funktioner som gör att du kan tillämpa effekter på ett visuellt sammansättningsobjekt i WinUI- och Windows App SDK-appar.

För att stödja konsekvent redigering av effekter i WinUI- och Windows App SDK-appar utnyttjar kompositionseffekter Win2D:s IGraphicsEffect-gränssnitt så att du kan beskriva effekterna med hjälp av namnområdet Microsoft.Graphics.Canvas.Effects .

Penseleffekter används för att måla områden i ett program genom att tillämpa effekter på en uppsättning befintliga bilder. API:er för Windows App SDK-kompositionseffekter fokuserar på SpriteVisuals. En SpriteVisual ger dig flexibilitet när du kombinerar färg, bild och effektskapande. Det visuella objektet definierar gränserna för rektangeln och penseln definierar de pixlar som används för att måla den.

Effektborstar används på visuella objekt i kompositionsträd vars innehåll kommer från utdata från ett effektdiagram. Effekter kan referera till befintliga ytor/texturer, men inte utdata från andra kompositionsträd.

Effekter kan också tillämpas på XAML UIElements med hjälp av en effektborste med XamlCompositionBrushBase.

Effektfunktioner

Effektbibliotek

Sammansättning stöder för närvarande följande effekter:

Effekt Beskrivning
2D-affintransformering Tillämpar en 2D-affinformningsmatris på en bild.
Aritmetik sammansatt Kombinerar två bilder med en flexibel ekvation.
Blandningseffekt Skapar en blandningseffekt som kombinerar två bilder. Sammansättning ger 21 av de 26 blandningslägen som stöds i Win2D.
Färgkälla Genererar en bild som innehåller en solid färg.
Komposit Kombinerar två bilder. Sammansättning ger alla 13 blandningslägen som stöds i Win2D.
Kontrast Ökar eller minskar kontrasten i en bild.
Exponering Ökar eller minskar exponeringen för en bild.
Gråskala Konverterar en bild till monokromatisk grå.
Gammaöverföring Ändrar färgerna på en bild genom att använda en gammaöverföringsfunktion per kanal.
Hue-rotation Ändrar färgen på en bild genom att rotera dess nyansvärden.
Invertera Invertera färgerna i en bild.
Saturera Ändrar mättnad för en bild.
Sepia Konverterar en bild till sepia-toner.
Temperatur och nyans Justerar temperaturen och/eller nyansen för en bild.

Mer detaljerad information finns i Win2D:s namnområde Microsoft.Graphics.Canvas.Effects . Effekter som inte stöds i komposition anges som [NoComposition].

Länkningseffekter

Effekter kan länkas, vilket gör att ett program samtidigt kan använda flera effekter på en bild. Effektdiagram kan ha stöd för flera effekter som kan referera till en och annan. När du beskriver din effekt lägger du helt enkelt till en effekt som indata till din effekt.

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
}

Exemplet ovan beskriver en aritmetik sammansatt effekt som har två indata. Den andra ingången har en mättnadseffekt med en mättnadsegenskap på 0,5.

Stöd för animering

Effektegenskaper stöder animering. Under effektkompilering kan du ange effektegenskaper som kan animeeras och som kan "bakas in" som konstanter. De animerbara egenskaperna anges via strängar i formen "effect name.property name". Dessa egenskaper kan animeeras oberoende av varandra över flera instansieringar av effekten.

Egenskaper för konstant kontra animerad effekt

Under effektkompilering kan du ange effektegenskaper som dynamiska eller som egenskaper som "bakas in" som konstanter. De dynamiska egenskaperna anges via strängar i formulärets "<effektnamn>.<egenskapsnamn>". De dynamiska egenskaperna kan ställas in på ett visst värde eller animerad med hjälp av kompositionsanimationssystemet.

När du kompilerar effektbeskrivningen ovan har du flexibiliteten att antingen integrera mättnaden så att den är lika med 0,5, eller göra den dynamisk och ställa in den dynamiskt eller animera den.

Kompilera en effekt med mättnad bakad i:

var effectFactory = _compositor.CreateEffectFactory(graphicsEffect);

Kompilera en effekt med dynamisk mättnad:

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

Mättnadsegenskapen för effekten ovan kan sedan antingen anges till ett statiskt värde eller animeras med antingen uttryck eller ScalarKeyFrame-animeringar.

Du kan skapa en ScalarKeyFrame som ska användas för att animera egenskapen Saturation för en effekt som den här:

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;

Starta animeringen på egenskapen "Saturation" för effekten så här:

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

Flera effektinstanser med oberoende egenskaper

Genom att ange att en parameter ska vara dynamisk under kompileringen av effekten kan parametern sedan ändras per effekt-instans. Detta gör att två visuella objekt kan använda samma effekt men återges med olika effektegenskaper.

Komma igång med kompositionseffekter

Den här snabbstartsguiden visar hur du använder några av de grundläggande funktionerna i effekter.

Installera Visual Studio

  • Om du inte har en version av Visual Studio som stöds går du till sidan För nedladdningar i Visual Studio här.

Skapa ett nytt projekt

  • Gå till Arkiv>Ny>Projekt.
  • Välj mallen Tom WinUI-app (paketerad).
  • Ange ett projektnamn som du väljer.
  • Klicka på Skapa.

Installera Win2D

Win2D släpps som ett NuGet.org paket och måste installeras innan du kan använda dessa effekter i ett WinUI-projekt.

  • Starta NuGet Package Manager genom att gå till Verktyg>NuGet Package Manager>Hantera NuGet-paket för lösning.
  • Sök efter Win2D.WinUI och installera paketet för projektet.
  • Godkänn licensavtalet.
  • Klicka på Stäng.

I de närmaste stegen använder vi API:erna för sammansättning för att tillämpa en mättnadseffekt på den här kattbilden som tar bort all mättnad. I den här modellen skapas effekten och tillämpas sedan på en bild.

Källbild

Ange grunderna för komposition

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

Skapa en CompositionSurface Brush

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

Skapa, kompilera och tillämpa effekter

  1. Skapa grafikeffekten.

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

  2. Kompilera effekten och skapa effektborsten.

    var effectFactory = _compositor.CreateEffectFactory(graphicsEffect);

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

  3. Skapa en SpriteVisual i kompositionsträdet och tillämpa effekten.

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

  4. Kör din app. Resultatet ska vara en desaturerad katt:

Desaturerad bild

Mer information

  • Last updated on