UWP App realtime blur background, используя DX Compositor

Question

Итак, поддержка композиции UWP была ненадолго, я ищу способ сделать размытие элементов в режиме реального времени (живое размытие при перемещении или загрузке, а не статический снимок). До сих пор я искал ответы на stackoverflow и google, которые привели меня к использованию Lumia Imaging SDK Sample и Win2D. Ни один из них не достаточно хорош для поддержки размытия в реальном времени. Я знаю, что размытие в реальном времени возможно в композиции, потому что я видел демонстрации размытых видеороликов, и существует устаревший проект XAMLFx, который позволяет размыть практически все, используя DX в 8.1 приложениях.

Я не хочу использовать RenderTargetBitmap (хочу, чтобы мой поток пользовательского интерфейса был бесплатным). Как я могу сделать это, используя только состав API:

ContainerVisual rootVisual = GetVisual(this.Content); 
Compositor compositor = rootVisual.Compositor; 

// what next? 

Любая помощь очень ценится :)

Answer 1

Примечание: Эти функции (размытие и Backdrop кисти) требуют обновления Anniversary для ОС Windows 10. Вы в настоящее время можно получить предварительный просмотр SDK через программу для Windows Insider

Предпосылки

1. Ориентация на обновление 10-летней версии Windows
2. Основное понимание Visual Layer и то, как работает Visual Tree. Вы можете узнать больше here.

Кроме того, вы можете посмотреть на gist, который я написал here, что является быстрым способом начать работу с использованием API-интерфейса Composition в XAML-приложении. Это демо с использованием эффекта. Не только это, но также охватывает загрузку изображения с использованием API-интерфейса Composition (с пакетом, который я написал).

Начало работы

Есть два способа вы можете потребляющие эффект размытия в APIs композиции. Один из них является нормальным эффектом, который применяется к одной поверхности. Другой - использовать его как кисть «Backdrop», которая забирает весь контент и размывает его.

Чтобы использовать эффект размытия, вам необходимо использовать определение GaussianBlurEffect из Win2D. Это звучит примерно так:

GaussianBlurEffect blurEffect = new GaussianBlurEffect() 
{ 
    Name = "Blur", 
    BlurAmount = 0.0f, // You can place your blur amount here. 
    BorderMode = EffectBorderMode.Hard, 
    Optimization = EffectOptimization.Balanced, 
    Source = new CompositionEffectSourceParameter("source") 
}; 

Следующим шагом является создание эффекта завода:

var effectFactory = compositor.CreateEffectFactory(blurEffect, new[] {"Blur.BlurAmount"}); 

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

Следующий шаг зависит от того, как вы хотите, чтобы эффект работал.

Single Surface

Если вы хотите применить только к одной поверхности, вы должны сделать следующее:

var effectBrush = effectFactory.CreateBrush(); 
effectBrush.SetSourceParameter("source", someOtherSurfaceBrush); 
visual.Brush = effectBrush; 

Backdrop

Однако, если вы хотите размытие большого количества контента динамически, что за данным визуальным, вы бы сделали следующее:

var effectBrush = effectFactory.CreateBrush(); 
effectBrush.SetSourceParameter("source", compositor.CreateBackdropBrush()); 
visual.Brush = effectBrush; 

Обратите внимание, что это выглядит очень похоже на первый метод, но вместо того, чтобы давать ему кисть поверхности, вы даете ему BackdropBrush. Это займет контент за визуальным в реальном времени и подаст его в источник вашего эффекта. В этом случае все «за» визуальным будет размыто.

Performance

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

Показать еще!

Чтобы узнать больше, перейдите к нашей GitHub page! Мы создали пользовательский элемент управления XAML, который должен помочь вам here, и вы можете увидеть его в действии here. Вы также можете увидеть // сборку here.