Effetti di composizione

Articolo
03/01/2024

Le APi Windows.UI.Composition consentono di applicare effetti in tempo reale alle immagini e all'interfaccia utente con proprietà degli effetti animabili. In questa panoramica verranno presentate le funzionalità disponibili che consentono l'applicazione degli effetti a un oggetto visivo di composizione.

Per supportare la coerenza della piattaforma UWP (Universal Windows Platform) per gli sviluppatori che descrivono gli effetti nelle applicazioni, gli effetti di composizione sfruttano l'interfaccia IGraphicsEffect di Win2D per usare le descrizioni degli effetti tramite lo spazio dei nomi Microsoft.Graphics.Canvas.Effects.

Gli effetti pennello vengono usati per disegnare aree di un'applicazione applicando effetti a un set di immagini esistenti. Le API degli effetti di composizione di Windows 10 sono incentrate sugli oggetti visivi sprite. SpriteVisual consente flessibilità e interazione nel colore, nell'immagine e nella creazione di effetti. SpriteVisual è un tipo di oggetto visivo di composizione che può riempire un rettangolo 2D con un pennello. L'oggetto visivo definisce i limiti del rettangolo e il pennello definisce i pixel utilizzati per disegnare il rettangolo.

I pennelli effetto vengono usati negli oggetti visivi della struttura ad albero di composizione il cui contenuto proviene dall'output di un grafico degli effetti. Gli effetti possono fare riferimento a superfici/trame esistenti, ma non all'output di altri alberi di composizione.

Gli effetti possono essere applicati anche a UIElement XAML usando un pennello effetto con XamlCompositionBrushBase.

Caratteristiche effetto

Libreria degli effetti

Attualmente la composizione supporta gli effetti seguenti:

Effetto	Descrizione
Trasformazione affine 2D	Applica una matrice di trasformazione affine 2D a un'immagine.
Composito aritmetico	Combina due immagini usando un'equazione flessibile.
Effetto blend	Crea un effetto blend che combina due immagini. La composizione fornisce 21 delle 26 modalità di fusione supportate in Win2D.
Origine colore	Genera un'immagine contenente un colore a tinta unita.
Composito	Combina due immagini. La composizione fornisce tutte le 13 modalità composite supportate in Win2D.
Contrasto	Aumenta o riduce il contrasto di un'immagine.
Esposizione	Aumenta o riduce l'esposizione di un'immagine.
Scala di grigi	Converte un'immagine in grigio monocromatico.
Trasferimento gamma	Modifica i colori di un'immagine applicando una funzione di trasferimento gamma per canale.
Rotazione di tonalità	Modifica il colore di un'immagine ruotando i relativi valori di tonalità.
Inverti	Inverte i colori di un'immagine.
Saturazione	Modifica la saturazione di un'immagine.
Seppia	Converte un'immagine in toni seppia.
Temperatura e tinta	Regola la temperatura e/o la tinta di un'immagine.

Per informazioni più dettagliate, vedere lo spazio dei nomi Microsoft.Graphics.Canvas.Effects di Win2D. Gli effetti non supportati nella composizione sono indicati come [NoComposition].

Effetti di concatenamento

Gli effetti possono essere concatenati, consentendo a un'applicazione di usare simultaneamente più effetti su un'immagine. I grafici degli effetti possono supportare più effetti che possono fare riferimento a uno e all'altro. Quando si descrive l'effetto, è sufficiente aggiungere un effetto come input all'effetto.

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
}

L'esempio precedente descrive un effetto composito aritmetico che ha due input. Il secondo input ha un effetto di saturazione con una proprietà di saturazione 0.5.

Supporto animazione

Le proprietà degli effetti supportano l'animazione, durante la compilazione degli effetti è possibile specificare le proprietà degli effetti che possono essere animate e che possono essere "inserite" come costanti. Le proprietà animabili vengono specificate tramite stringhe nel formato "nome effetto.nome proprietà". Queste proprietà possono essere animate in modo indipendente su più istanze dell'effetto.

Proprietà degli effetti costanti e animate

Durante la compilazione degli effetti è possibile specificare le proprietà degli effetti come dinamiche oppure "inserite" come costanti. Le proprietà animabili vengono specificate tramite stringhe nel formato "<nome effetto>.<nome proprietà>". Le proprietà dinamiche possono essere impostate su un valore specifico o possono essere animate usando il sistema di animazione di composizione.

Quando si compila la descrizione dell'effetto precedente, si ha la flessibilità di applicare saturazione per renderlo uguale a 0.5 o renderlo dinamico e impostarlo in modo dinamico o animandolo.

Compilazione di un effetto con saturazione incorporata:

var effectFactory = _compositor.CreateEffectFactory(graphicsEffect);

Compilazione di un effetto con saturazione dinamica:

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

La proprietà saturazione dell'effetto precedente può quindi essere impostata su un valore statico o animata usando animazioni Expression o ScalarKeyFrame.

È possibile creare un ScalarKeyFrame che verrà usato per animare la proprietà Saturation di un effetto simile al seguente:

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;

Avviare l'animazione sulla proprietà Saturation dell'effetto come segue:

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

Istanze di più effetti con proprietà indipendenti

Specificando che un parametro debba essere dinamico durante la compilazione dell'effetto, il parametro potrà essere modificato in base all'istanza per effetto. Ciò consente a due oggetti visivi di usare lo stesso effetto ma di eseguire il rendering con proprietà di effetto diverse.

Introduzione agli effetti di composizione

Questa esercitazione introduttiva illustra come usare alcune delle funzionalità di base degli effetti.

Installazione di Visual Studio

Se non è installata una versione supportata di Visual Studio, passare alla pagina Download di Visual Studio qui.

Creazione di un nuovo progetto

Accedere a File > Nuovo > Progetto
Selezionare 'Visual C#'
Creare un'app di Windows universale di Visual Studio 2015 vuota
Immettere un nome di progetto a scelta
Scegliere OK

Installazione di Win2D

Win2D viene rilasciato come pacchetto Nuget.org e deve essere installato prima di poter usare gli effetti.

Esistono due versioni del pacchetto, una per Windows 10 e una per Windows 8.1. Per effetti di composizione si userà la versione di Windows 10.

Avviare il Gestione pacchetti NuGet passando a Strumenti → NuGet Gestione pacchetti → Gestire pacchetti NuGet per la soluzione.
Cercare "Win2D" e selezionare il pacchetto appropriato per la versione di destinazione di Windows. Poiché Windows.UI. Composition supporta Windows 10 (non 8.1), selezionare Win2D.uwp.
Accettare il contratto di licenza
Fare clic su Chiudi

Nei prossimi passaggi si userà l'API di composizione per applicare un effetto di saturazione all'immagine del gatto che rimuoverà tutta la saturazione. In questo modello l'effetto viene creato e quindi applicato a un'immagine.

Immagine di origine

Impostazione delle nozioni di base sulla composizione

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

Creazione di un pennello CompositionSurface

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

Creazione, compilazione e applicazione di effetti

Creare l'effetto grafico

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

Compilare l'effetto e creare il pennello effetto

var effectFactory = _compositor.CreateEffectFactory(graphicsEffect);

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

Creare un oggetto SpriteVisual nell'albero di composizione e applicare l'effetto

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

Creare l'origine immagine da caricare.

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

Ridimensionare e pennellare la superficie in SpriteVisual
```
brush.Surface = imageSource.Surface;
```
Eseguire l'app: i risultati devono essere un gatto desaturato:

Immagine desaturata

Condividi tramite