Összetételi effektusok

A Microsoft.UI.Composition API-k lehetővé teszik a valós idejű effektusok alkalmazását a képekre és a felhasználói felületre animálható effektus tulajdonságokkal. Ebben az áttekintésben bemutatjuk azokat a funkciókat, amelyekkel effektusokat alkalmazhat a WinUI- és Windows App SDK-alkalmazásokban található kompozíciós vizualizációkra.

A WinUI- és Windows App SDK-alkalmazások egységes effektus-létrehozásának támogatásához a kompozíciós effektusok a Win2D IGraphicsEffect felületét használják, hogy a Microsoft.Graphics.Canvas.Effects névtér használatával ismertesse az effektusokat.

Az ecseteffektusok az alkalmazások területeinek festésére szolgálnak azáltal, hogy effektusokat alkalmaznak egy meglévő képek halmazára. A Windows App SDK kompozíciós effektus API-k a SpriteVisualsra összpontosítanak. A SpriteVisual rugalmasságot biztosít a színek, képek és effektusok létrehozásakor. A vizualizáció meghatározza a téglalap határait, az ecset pedig a festéshez használt képpontokat.

Az effektuskeféket olyan kompozíciófa-vizualizációkon használják, amelyek tartalma egy effektusdiagram kimenetéből származik. Az effektusok hivatkozhatnak a meglévő felületekre/textúrákra, de más kompozíciós fák kimenetére nem.

Az XAML UIElementsre effektusok is alkalmazhatók az XamlCompositionBrushBase effektuskefével.

Hatásfunkciók

Effektustár

Jelenleg a kompozíció a következő hatásokat támogatja:

Hatás	Leírás
2D affin transzformáció	2D affine transzformációs mátrixot alkalmaz egy képre.
Aritmetikai összetettség	Két kép kombinálása rugalmas egyenlet használatával.
Keverési effektus	Két képet egyesítő keverési effektust hoz létre. A Composition a Win2D-ben támogatott 26 keverési mód közül 21-et biztosít.
Színforrás	Egy folytonos színt tartalmazó képet hoz létre.
Composite	Két képet egyesít. A Kompozíció a Win2D-ben támogatott összes 13 összetett módot biztosítja.
Kontraszt	Növeli vagy csökkenti a kép kontrasztját.
Kitettség	Növeli vagy csökkenti a kép expozícióját.
Szürkeárnyalatos	Egy képet monokróm szürke színre konvertál.
Gamma-átvitel	Egy kép színeinek módosítása csatornánkénti gammaátviteli függvény alkalmazásával.
Színtónus elforgatása	Módosítja a kép színét az árnyalatértékek elforgatásával.
Megfordít	Egy kép színeinek megfordítása.
Telített	Módosítja a kép telítettségét.
Szépia	Kép konvertálása szépia tónusokká.
Hőmérséklet és színárnyalat	Beállítja a kép hőmérsékletét és/vagy színárnyalatát.

További információt a Win2D Microsoft.Graphics.Canvas.Effects névterében talál. A kompozícióban nem támogatott hatásokat [NoComposition] néven kell feljegyezni.

Láncoló effektusok

Az effektusok láncoltak, így az alkalmazások egyszerre több effektust is használhatnak egy képre. Az effektusdiagramok több effektust is támogathatnak, amelyek hivatkozhatnak az egyikre és a másikra. Az effektus leírásakor egyszerűen adjon hozzá egy effektust bemenetként az effektushoz.

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
}

A fenti példa egy olyan aritmetikai összetett effektust ír le, amely két bemenettel rendelkezik. A második bemenet telítettségi effektusa .5 telítettségi tulajdonsággal rendelkezik.

Animációs támogatás

Az effektustulajdonságok támogatják az animációt, az effektus összeállítása során megadhatja, hogy az effektus tulajdonságai animálhatók legyenek, és amelyek állandóként "beszúrhatók". Az animálható tulajdonságokat a „hatásnév.tulajdonságnév” formátumú sztringek határozzák meg. Ezek a tulajdonságok egymástól függetlenül is animálhatók az effektus több példányán keresztül.

Állandó és animált effektus tulajdonságai

Az effektus összeállítása során az effektustulajdonságokat dinamikusként vagy állandóként "beszúrt" tulajdonságokként is megadhatja. A dinamikus tulajdonságokat "<effektus neve>.<tulajdonság neve>" formájú karaktersorozatokkal adhatjuk meg. A dinamikus tulajdonságok beállíthatók egy adott értékre, vagy animálhatók a kompozíció animációs rendszerével.

A fenti effektus leírásának összeállításakor rugalmasan beállíthatja a telítettséget 0,5-re, vagy dinamikussá teheti, és dinamikusan állíthatja be vagy animálhatja.

Effect összeállítása előintegrált telítettséggel

var effectFactory = _compositor.CreateEffectFactory(graphicsEffect);

Dinamikus telítettséggel rendelkező effektus összeállítása.

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

A fenti effektus telítettségi tulajdonsága ezután statikus értékre állítható be, vagy Expression vagy ScalarKeyFrame animációkkal animált.

Létrehozhat egy ScalarKeyFrame-et, amely az alábbihoz hasonló effektus telítettségi tulajdonságának animálására szolgál:

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;

Indítsa el az animációt az effektus Telítettségi tulajdonságán a következő módon:

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

Több effektuspéldány független tulajdonságokkal

Ha megadja, hogy egy paraméternek dinamikusnak kell lennie az effektusok összeállítása során, a paraméter effektusonkénti példányonként módosítható. Ez lehetővé teszi, hogy két vizualizáció ugyanazt az effektust használja, de különböző effektustulajdonságokkal jelenik meg.

A kompozíciós effektusok használatának első lépései

Ez a gyors üzembe helyezési oktatóanyag bemutatja, hogyan használhatja ki az effektusok néhány alapvető képességét.

A Visual Studio telepítése

Ha nincs telepítve a Visual Studio támogatott verziója, lépjen ide a Visual Studio Letöltések lapjára.

Új projekt létrehozása

Menjen a Fájl>Új>Projekt menüpontra.
Válassza ki a WinUI Blank App (Csomagolt) sablont .
Adja meg az Ön által választott projektnevet.
Kattintson a Létrehozás gombra.

A Win2D telepítése

A Win2D NuGet.org csomagként jelenik meg, és telepíteni kell, mielőtt ezeket az effektusokat egy WinUI-projektben használhatja.

Indítsa el a NuGet csomagkezelőt, ehhez menjen a Eszközök> menübe, NuGet csomagkezelő>, majd válassza a NuGet csomagok kezelése a megoldáshoz lehetőséget.
Keresse meg a Win2D.WinUI-t , és telepítse a csomagot a projekthez.
Fogadja el a licencszerződést.
Kattintson a Bezárás gombra.

A következő néhány lépésben a composition API-k használatával alkalmazunk egy telítettségi effektust erre a macskaképre, amely eltávolítja az összes telítettséget. Ebben a modellben az effektus létrejön, majd egy képre lesz alkalmazva.

Forráskép

A kompozíció alapjainak beállítása

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

CompositionSurface-ecset létrehozása

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

Effektusok létrehozása, összeállítása és alkalmazása

Hozza létre a grafikus effektust.

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

Állítsa össze az effektust, és hozza létre az effektusecsetet.

var effectFactory = _compositor.CreateEffectFactory(graphicsEffect);

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

Hozzon létre egy SpriteVisualt a kompozíciós fán, és alkalmazza az effektust.

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

Futtassa az alkalmazást. Az eredménynek egy színtelenített macskát kell eredményeznie.

Telítetlen kép

További információ

Visszajelzés

Hasznosnak találta ezt az oldalt?

Last updated on 2026-03-26