Effets de composition

Article
03/18/2023

Les API Windows.UI.Composition permettent d’appliquer des effets en temps réel aux images et à l’interface utilisateur avec des propriétés d’effet animatables. Dans cette vue d’ensemble, nous allons parcourir les fonctionnalités disponibles, qui permettent d’appliquer des effets à un élément visuel de composition.

Pour prendre en charge la cohérence de plateforme Windows universelle (UWP) pour les développeurs décrivant des effets dans leurs applications, les effets de composition tirent parti de l’interface IGraphicsEffect de Win2D pour utiliser les descriptions d’effet via l’espace de noms Microsoft.Graphics.Canvas.Effects.

Les effets de pinceau permettent de peindre les zones d’une application en appliquant des effets à un ensemble d’images existantes. Les API d’effet de composition de Windows 10 sont axées sur SpriteVisual. SpriteVisual permet une flexibilité et une interconnexion de création de couleur, d’image et d’effet. SpriteVisual est un type d’élément visuel de composition qui permet de remplir un rectangle 2D avec un pinceau. L’élément visuel définit les limites du rectangle, et le pinceau définit les pixels utilisés pour peindre le rectangle.

Les pinceaux à effets sont utilisés sur les éléments visuels de l’arborescence de composition dont le contenu provient de la sortie d’un graphique d’effet. Les effets peuvent référencer des surfaces/textures existantes, mais pas la sortie des autres arborescences de composition.

Les effets peuvent également être appliqués aux éléments UIElements XAML à l’aide d’un pinceau à effet avec XamlCompositionBrushBase.

Fonctionnalités d’effet

Bibliothèque d’effets

Actuellement, les compositions prennent en charge les effets suivants :

Effet	Description
Transformation affine 2D :	applique une matrice de transformation affine 2D à une image.
Composite arithmétique :	combine deux images à l’aide d’une équation flexible.
Effet de fusion :	crée un effet de fusion qui combine deux images. La composition fournit 21 des 26 modes de fusion pris en charge dans Win2D.
Source de couleur :	génère une image contenant une couleur unie.
Composite	combine deux images. La composition fournit l’ensemble des 13 modes composites pris en charge dans Win2D.
Comparez	augmente ou diminue le contraste d’une image.
Exposition :	augmente ou diminue l’exposition d’une image.
Grayscale (Nuances de gris)	convertit une image en gris monochrome.
Transfert gamma :	modifie les couleurs d’une image en appliquant une fonction de transfert gamma par canal.
Rotation des teintes :	modifie la couleur d’une image en faisant tourner ses valeurs de teinte.
Inverser :	inverse les couleurs d’une image.
Saturer :	modifie la saturation d’une image.
Sépia :	convertit une image en tons sépia.
Température et teinte :	ajuste la température et/ou la teinte d’une image.

Pour plus d’informations, voir l’espace de noms Microsoft.Graphics.Canvas.Effects de Win2D. Les effets non pris en charge dans la composition sont notés comme [NoComposition].

Chaînage des effets

Les effets peuvent être chaînés, ce qui permet à une application d’utiliser simultanément plusieurs effets dans une image. Les graphiques d’effet peuvent prendre en charge plusieurs effets qui peuvent faire référence les uns aux autres. Lorsque vous décrivez votre effet, ajoutez simplement un effet comme entrée pour votre effet.

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’exemple ci-dessus décrit un effet composite arithmétique possédant deux entrées. La deuxième entrée possède un effet de saturation avec une propriété de saturation de 0,5.

Prise en charge de l’animation

Les propriétés d’effet prennent en charge l’animation ; lors de la compilation d’effet, vous pouvez spécifier les propriétés d’effet qui peuvent être animées et celles qui peuvent être « intégrées » sous forme de constantes. Les propriétés animables sont spécifiées par le biais de chaînes de la forme « nom d’effet.nom de propriété ». Ces propriétés peuvent être animées indépendamment sur plusieurs instanciations de l’effet.

Propriétés des effets constant et animé

Lors de la compilation, vous pouvez spécifier des propriétés d’effet dynamiques ou des propriétés d’effet « intégrées » sous forme de constantes. Les propriétés dynamiques sont spécifiées via des chaînes de la forme «< nom> de l’effet .< nom de> la propriété ». Les propriétés dynamiques peuvent être définies sur une valeur spécifique ou être animées à l’aide du système d’animations de composition.

Lorsque vous compilez la description d’effet ci-dessus, vous avez la possibilité d’intégrer la saturation de sorte qu’elle soit égale à 0,5, ou de la rendre dynamique et de la définir de manière dynamique ou en l’animant.

Compilation d’un effet avec la saturation intégrée :

var effectFactory = _compositor.CreateEffectFactory(graphicsEffect);

Compilation d’un effet avec la saturation dynamique :

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

La propriété de saturation de l’effet ci-dessus peut alors être définie sur une valeur statique ou être animée à l’aide d’animations de type Expression ou ScalarKeyFrame.

Vous pouvez créer un élément ScalarKeyFrame qui sera utilisé pour animer la propriété de saturation d’un effet comme suit :

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;

Démarrez l’animation sur la propriété de saturation de l’effet comme suit :

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

Plusieurs instances d’effet avec des propriétés indépendantes

En indiquant qu’un paramètre doit être dynamique lors de la compilation d’effet, le paramètre peut ensuite être modifié sur la base d’une instance par effet. Cela permet à deux éléments visuels d’utiliser le même effet tout en étant affichés avec des propriétés d’effet différentes.

Prise en main des effets de composition

Ce didacticiel de démarrage rapide vous montre comment utiliser certaines fonctionnalités de base des effets.

Installation de Visual Studio

Si vous n’avez pas installé une version prise en charge de Visual Studio, accédez à la page de téléchargements de Visual Studio ici.

Création d’un projet

Accédez à Fichier-Nouveau-Projet>>...
Sélectionnez Visual C#.
Créez une application vide (Windows universelle) (Visual Studio 2015).
Entrez le nom de projet de votre choix.
Cliquez sur OK.

Installation de Win2D

Win2D est publié en tant que package Nuget.org et doit être installé avant que vous ne puissiez utiliser des effets.

Il existe deux versions de package, l’une pour Windows 10 et l’autre pour Windows 8.1. Pour les effets de composition, vous allez utiliser la version de Windows 10.

Lancez le Gestionnaire de package NuGet en accédant à Outils → Gestionnaire de package NuGet → Gérer les packages NuGet pour la solution.
Recherchez Win2D et sélectionnez le package approprié pour votre version cible de Windows. Comme Windows.UI. Composition prend en charge Windows 10 (et non Windows 8.1), sélectionnez Win2D.uwp.
Acceptez le contrat de licence.
Cliquez sur Fermer.

Dans les étapes suivantes, nous allons utiliser les API de composition pour appliquer un effet de saturation à cette image de chat, qui supprimera toute la saturation. Dans ce modèle, l’effet est créé, puis appliqué à une image.

Image source

Définition des bases de votre composition

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

Création d’un pinceau CompositionSurface

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

Création, compilation et application d’effets

Créer l’effet graphique

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

Compiler l’effet et créer un pinceau d’effet

var effectFactory = _compositor.CreateEffectFactory(graphicsEffect);

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

Créer un SpriteVisual dans l’arborescence de composition et appliquer l’effet

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

Créez votre source d’image à charger.

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

Dimensionner et brosser la surface sur spriteVisual
```
brush.Surface = imageSource.Surface;
```
Exécutez votre application : vos résultats doivent être un chat désaturé :

Image désaturée