Эффекты композиции

Статья
07/05/2024

API-интерфейсы Windows.UI.Composition позволяют применять эффекты в режиме реального времени к изображениям и пользовательскому интерфейсу с анимируемыми свойствами эффектов. В этом обзоре мы рассмотрим доступные функциональные возможности, которые позволяют применять эффекты к визуальному элементу композиции.

Для поддержки согласованности универсальная платформа Windows (UWP) для разработчиков, описывающих эффекты в своих приложениях, эффекты композиции используют интерфейс IGraphicsEffect Win2D для использования описания эффектов через пространство имен Microsoft.Graphics.Canvas.Effects.

Эффекты кисти используются для рисования областей приложения путем применения эффектов к набору существующих изображений. API эффектов композиции Windows 10 ориентированы на визуальные элементы Sprite. SpriteVisual обеспечивает гибкость и взаимодействие с цветом, изображением и эффектом. SpriteVisual — это визуальный тип композиции, который может заполнить прямоугольник 2D с помощью кисти. Визуальный элемент определяет границы прямоугольника, а кисть определяет пиксели, используемые для рисования прямоугольника.

Кисти эффектов используются для визуальных элементов дерева композиции, содержимое которого поступает из выходных данных графа эффектов. Эффекты могут ссылаться на существующие поверхности и текстуры, но не выходные данные других деревьев композиции.

Эффекты также можно применять к XAML UIElements с помощью кисти эффектов с xamlCompositionBrushBase.

Функции эффектов

Библиотека эффектов

В настоящее время композиция поддерживает следующие эффекты:

Действие	Description
2D-преобразование аффина	Применяет матрицу аффинного преобразования 2D к изображению.
Арифметический состав	Объединяет два изображения с помощью гибкого уравнения.
Эффект смешения	Создает эффект смешения, объединяющий два изображения. Состав предоставляет 21 из 26 режимов смешения, поддерживаемых в Win2D.
Источник цвета	Создает изображение, содержащее сплошный цвет.
Составной	Объединяет два изображения. Композиция предоставляет все 13 составных режимов , поддерживаемых в Win2D.
Контрастность	Увеличивает или уменьшает контрастность изображения.
Экспозиция	Увеличивает или уменьшает экспозицию изображения.
Оттенки серого	Преобразует изображение в монохромный серый.
Гамма-передача	Изменяет цвета изображения, применяя функцию гамма-передачи по каналу.
Поворот хью	Изменяет цвет изображения, вращая его значения оттенка.
Инвертировать	Инвертирует цвета изображения.
Saturate	Изменяет насыщенность изображения.
Сепия	Преобразует изображение в тон сепии.
Температура и оттенок	Настраивает температуру и (или) оттенок изображения.

Дополнительные сведения см. в пространстве имен Microsoft.Graphics.Canvas.Effects в Win2D. Эффекты, не поддерживаемые в композиции, отмечаются как [NoComposition].

Эффекты цепочки

Эффекты могут быть связаны, позволяя приложению одновременно использовать несколько эффектов на изображении. Графы эффектов могут поддерживать несколько эффектов, которые могут ссылаться на один и другой. При описании эффекта просто добавьте эффект в качестве входных данных в ваш эффект.

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
}

В приведенном выше примере описывается арифметический составной эффект, имеющий два входных данных. Второй вход имеет эффект насыщенности со свойством насыщенности .5.

Поддержка анимации

Свойства эффектов поддерживают анимацию, во время компиляции эффектов можно указать анимированные свойства эффекта, и которые могут быть "запечены" как константы. Анимируемые свойства указываются в строках формы "effect name.property name". Эти свойства могут быть анимированы независимо по нескольким экземплярам эффекта.

Константы и анимированные свойства эффектов

Во время компиляции эффектов можно указать свойства эффекта как динамические или как свойства, которые "запечены" в виде констант. Динамические свойства задаются в строках формы "<имя> эффекта".<имя> свойства". Динамические свойства можно задать определенное значение или анимировать с помощью системы анимации композиции.

При компиляции описанного выше описания эффекта у вас есть гибкость выпекания в насыщенности, чтобы быть равным 0,5 или сделать его динамическим и настроить его динамически или анимировать его.

Компиляция эффекта с насыщенностью, запеченной в:

var effectFactory = _compositor.CreateEffectFactory(graphicsEffect);

Компиляция эффекта с динамической насыщенностью:

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

Затем свойство насыщенности приведенного выше эффекта можно задать для статического значения или анимации с помощью анимации Expression или ScalarKeyFrame.

Вы можете создать СкалярKeyFrame, который будет использоваться для анимации свойства насыщенности эффекта следующим образом:

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;

Запустите анимацию для свойства насыщенности эффекта следующим образом:

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

Несколько экземпляров эффектов с независимыми свойствами

Указав, что параметр должен быть динамическим во время компиляции эффектов, параметр можно изменить на основе экземпляра каждого эффекта. Это позволяет двум визуальным элементам использовать один и тот же эффект, но отображаться с разными свойствами эффекта.

Начало работы с эффектами композиции

В этом кратком руководстве показано, как использовать некоторые основные возможности эффектов.

установке Visual Studio

Если у вас нет поддерживаемой версии Visual Studio, перейдите на страницу "Скачивание Visual Studio".

Создание нового проекта

Перейдите в файл ->New-Project>...
Выберите "Visual C#"
Создание пустого приложения (универсального приложения Windows) (Visual Studio 2015)
Введите имя проекта выбранного элемента
Нажмите кнопку "ОК"

Установка Win2D

Win2D выпускается как пакет Nuget.org и его необходимо установить, прежде чем использовать эффекты.

Существует две версии пакета, одна для Windows 10 и одна для Windows 8.1. Для эффектов композиции вы будете использовать версию Windows 10.

Запустите диспетчер пакетов NuGet, перейдя в раздел "Сервис" → NuGet диспетчер пакетов → управление пакетами NuGet для решения.
Найдите "Win2D" и выберите соответствующий пакет для целевой версии Windows. Так как Windows.UI. Композиция поддерживает Windows 10 (не 8.1), выберите Win2D.uwp.
Примите лицензионное соглашение
Нажмите кнопку "Закрыть"

В следующих нескольких шагах мы будем использовать API композиции для применения эффекта насыщенности к этому изображению кота, который приведет к удалению всех насыщенности. В этой модели создается эффект, а затем применяется к изображению.

Исходный образ

Настройка основных компонентов композиции

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

Создание кисти CompositionSurface

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

Создание, компиляция и применение эффектов

Создание графического эффекта

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

Компиляция эффекта и создание кисти эффекта

var effectFactory = _compositor.CreateEffectFactory(graphicsEffect);

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

Создайте SpriteVisual в дереве композиции и примените эффект

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

Создайте источник изображения для загрузки.

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

Размер и кисть поверхности в SpriteVisual
```
brush.Surface = imageSource.Surface;
```
Запустите приложение. Результаты должны быть денасыщенными котами:

Денасыщенное изображение

Поделиться через