Efectos de composición

Artículo
07/05/2024

Las API de Windows.UI.Composition permiten aplicar efectos en tiempo real a imágenes e interfaz de usuario con propiedades de efecto animables. En esta introducción, se ejecutará la funcionalidad disponible que permite aplicar efectos a un objeto visual de composición.

Para admitir la coherencia de Plataforma universal de Windows (UWP) para los desarrolladores que describen efectos en sus aplicaciones, los efectos de composición aprovechan la interfaz IGraphicsEffect de Win2D para usar descripciones de efectos a través de la Namespace Microsoft.Graphics.Canvas.Effects.

Los efectos de pincel se usan para pintar áreas de una aplicación aplicando efectos a un conjunto de imágenes existentes. Las API de efecto de composición de Windows 10 se centran en objetos visuales de Sprite. SpriteVisual permite flexibilidad e interacción en la creación de colores, imágenes y efectos. SpriteVisual es un tipo visual de composición que puede rellenar un rectángulo 2D con un pincel. El objeto visual define los límites del rectángulo y el pincel define los píxeles utilizados para pintar el rectángulo.

Los pinceles de efecto se usan en objetos visuales de árbol de composición cuyo contenido procede de la salida de un gráfico de efectos. Los efectos pueden hacer referencia a superficies o texturas existentes, pero no a la salida de otros árboles de composición.

Los efectos también se pueden aplicar a UIElements XAML mediante un pincel de efectos con XamlCompositionBrushBase.

Características de efecto

Biblioteca de efectos

Actualmente, la composición admite los siguientes efectos:

Efecto	Descripción
Transformación affine 2D	Aplica una matriz de transformación de afín 2D a una imagen.
Composición aritmética	Combina dos imágenes mediante una ecuación flexible.
Efecto combinación	Crea un efecto de mezcla que combina dos imágenes. Composition proporciona 21 de los 26 modos de mezcla admitidos en Win2D.
Origen de color	Genera una imagen que contiene un color sólido.
Compuesto	Combina dos imágenes. Composition proporciona los 13 modos compuestos admitidos en Win2D.
Contraste	Aumenta o disminuye el contraste de una imagen.
Exposición	Aumenta o disminuye la exposición de una imagen.
Escala de grises	Convierte una imagen en gris monocromático.
Transferencia gamma	Modifica los colores de una imagen aplicando una función de transferencia gamma por canal.
Rotación de tono	Modifica el color de una imagen girando sus valores de matiz.
Invertir	Invierte los colores de una imagen.
Saturate	Modifica la saturación de una imagen.
Sepia	Convierte una imagen en tonos sepia.
Temperatura y tono	Ajusta la temperatura o el tono de una imagen.

Consulte el Namespace Microsoft.Graphics.Canvas.Effects de Win2D para obtener información más detallada. Los efectos no admitidos en la composición se indican como [NoComposition].

Efectos de encadenamiento

Los efectos se pueden encadenar, lo que permite a una aplicación usar simultáneamente varios efectos en una imagen. Los gráficos de efectos pueden admitir varios efectos que pueden hacer referencia a uno y otro. Al describir el efecto, basta con agregar un efecto como entrada al efecto.

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
}

En el ejemplo anterior se describe un efecto compuesto aritmético que tiene dos entradas. La segunda entrada tiene un efecto de saturación con una propiedad de saturación .5.

Compatibilidad con animaciones

Las propiedades de efecto admiten la animación, durante la compilación de efectos se puede especificar que las propiedades del efecto se pueden animar y que se pueden "hornear" como constantes. Las propiedades animables se especifican a través de cadenas de la forma "nombre de efecto.nombre de propiedad". Estas propiedades se pueden animar de forma independiente a través de varias instancias del efecto.

Propiedades constantes frente a efectos animados

Durante la compilación de efectos, puede especificar propiedades de efecto como dinámicas o como propiedades que se "hornean" como constantes. Las propiedades dinámicas se especifican a través de cadenas del formato "<nombre> del efecto.<nombre de> propiedad". Las propiedades dinámicas se pueden establecer en un valor específico o se pueden animar mediante el sistema de animación de composición.

Al compilar la descripción del efecto anterior, tiene la flexibilidad de hornear en saturación para ser igual a 0,5 o hacerlo dinámico y establecerlo dinámicamente o animarlo.

Compilar un efecto con saturación horneada en:

var effectFactory = _compositor.CreateEffectFactory(graphicsEffect);

Compilación de un efecto con saturación dinámica:

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

La propiedad de saturación del efecto anterior se puede establecer en un valor estático o animado mediante animaciones Expression o ScalarKeyFrame.

Puede crear un ScalarKeyFrame que se usará para animar la propiedad Saturación de un efecto similar al siguiente:

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;

Inicie la animación en la propiedad Saturación del efecto de la siguiente manera:

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

Instancias de varios efectos con propiedades independientes

Al especificar que un parámetro debe ser dinámico durante la compilación de efectos, el parámetro se puede cambiar a partir de una instancia por efecto. Esto permite que dos objetos visuales usen el mismo efecto, pero se represente con propiedades de efecto diferentes.

Introducción a los efectos de composición

En este tutorial de inicio rápido se muestra cómo usar algunas de las funcionalidades básicas de los efectos.

Instalando Visual Studio

Si no tiene instalada una versión compatible de Visual Studio, vaya a la página Descargas de Visual Studio aquí.

Creación de un nuevo proyecto

Vaya a Archivo-Nuevo-Proyecto>>...
Seleccione "Visual C#"
Crear una aplicación en blanco (Windows Universal)" (Visual Studio 2015)
Escriba un nombre de proyecto de su elección.
Haga clic en "Aceptar".

Instalación de Win2D

Win2D se publica como un paquete Nuget.org y debe instalarse para poder usar efectos.

Hay dos versiones de paquete, una para Windows 10 y otra para Windows 8.1. Para efectos de composición, usará la versión de Windows 10.

Inicie el Administrador de paquetes NuGet; para ello, vaya a Herramientas → NuGet Administrador de paquetes → Administrar paquetes NuGet para la solución.
Busque "Win2D" y seleccione el paquete adecuado para la versión de destino de Windows. Dado que Windows.UI. Composition admite Windows 10 (no 8.1), seleccione Win2D.uwp.
Aceptar el contrato de licencia
Haga clic en 'Cerrar'

En los pasos siguientes usaremos la API de composición para aplicar un efecto de saturación a esta imagen de gato que eliminará toda la saturación. En este modelo, se crea el efecto y, a continuación, se aplica a una imagen.

Imagen de origen

Establecimiento de los conceptos básicos de composición

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

Crear un pincel CompositionSurface

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

Crear, compilar y aplicar efectos

Creación del efecto de gráficos

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

Compile el efecto y cree el pincel del efecto

var effectFactory = _compositor.CreateEffectFactory(graphicsEffect);

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

Crear un SpriteVisual en el árbol de composición y aplicar el efecto

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

Cree el origen de la imagen que se va a cargar.

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

Tamaño y pincel de la superficie en spriteVisual
```
brush.Surface = imageSource.Surface;
```
Ejecutar la aplicación: los resultados deben ser un gato desaturado:

Imagen desaturada

Compartir a través de