Effets de composition

Article
07/05/2024

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 exécuter la fonctionnalité disponible qui permet l’application d’effets à un visuel de composition.

Pour prendre en charge la cohérence 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 des descriptions d’effets via l’espace de noms Microsoft.Graphics.Canvas.Effects.

Les effets de pinceau sont utilisés pour peindre des zones d’une application en appliquant des effets à un ensemble d’images existantes. Les API d’effet de composition Windows 10 se concentrent sur les visuels Sprite. SpriteVisual permet une flexibilité et une interaction en couleur, en image et en création d’effet. SpriteVisual est un type visuel de composition qui peut remplir un rectangle 2D avec un pinceau. Le visuel définit les limites du rectangle et le pinceau définit les pixels utilisés pour peindre le rectangle.

Les pinceaux d’effet sont utilisés sur les 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 d’autres arborescences de composition.

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

Fonctionnalités d’effet

Bibliothèque d’effets

Actuellement, la composition prend 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 tous les 13 modes composites pris en charge dans Win2D.
Contraste	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 monochromatique.
Transfert gamma	Modifie les couleurs d’une image en appliquant une fonction de transfert gamma par canal.
Rotation de hue	Modifie la couleur d’une image en faisant pivoter ses valeurs de teinte.
Renverser	Inverse les couleurs d’une image.
Saturer	Modifie la saturation d’une image.
Sépia	Convertit une image en tonalités sépia.
Température et teinte	Ajuste la température et/ou la teinte d’une image.

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

Effets de chaînage

Les effets peuvent être chaînés, ce qui permet à une application d’utiliser simultanément plusieurs effets sur une image. Les graphiques d’effet peuvent prendre en charge plusieurs effets qui peuvent faire référence à l’un et à l’autre. Lorsque vous décrivez votre effet, ajoutez simplement un effet comme entrée à 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 qui a deux entrées. La deuxième entrée a un effet de saturation avec une propriété de saturation .5.

Prise en charge des animations

Les propriétés d’effet prennent en charge l’animation, pendant la compilation des effets, vous pouvez spécifier des propriétés d’effet animées et qui peuvent être « intégrées » en tant que constantes. Les propriétés animatables sont spécifiées par le biais de chaînes de la forme « effect name.property name ». Ces propriétés peuvent être animées indépendamment sur plusieurs instanciations de l’effet.

Propriétés des effets constants et animés

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

Lors de la compilation de la description de l’effet ci-dessus, vous avez la possibilité de cuire en saturation pour être égal à 0,5 ou le rendre dynamique et le définir dynamiquement ou l’animer.

Compilation d’un effet avec saturation dans :

var effectFactory = _compositor.CreateEffectFactory(graphicsEffect);

Compilation d’un effet avec 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 ensuite être définie sur une valeur statique ou animée à l’aide d’animations Expression ou ScalarKeyFrame.

Vous pouvez créer un ScalarKeyFrame qui sera utilisé pour animer la propriété 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é Saturation de l’effet comme suit :

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

Instances d’effet multiples avec des propriétés indépendantes

En spécifiant qu’un paramètre doit être dynamique pendant la compilation des effets, le paramètre peut ensuite être modifié sur une base d’instance par effet. Cela permet à deux visuels d’utiliser le même effet, mais d’être restitué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 des fonctionnalités de base des effets.

Installation de Visual Studio

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

Création d’un projet

Accédez à File-New-Project>>...
Sélectionnez « Visual C# »
Créer une application vide (Windows universelle) (Visual Studio 2015)
Entrez un 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 de pouvoir utiliser des effets.

Il existe deux versions de package, une pour Windows 10 et une 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 à Tools → NuGet Gestionnaire de package → 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. La composition prend en charge Windows 10 (et non 8.1), sélectionnez Win2D.uwp.
Accepter le contrat de licence
Cliquez sur « Fermer »

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

Image source

Définition de vos principes de base de la 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)

Taille et pinceau de 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

Partager via