6

所以 UWP 合成支持已经有一段时间了,我正在寻找一种方法来对元素进行实时模糊(移动或加载时的实时模糊,而不是静态快照)。到目前为止,我一直在查看有关 stackoverflow 和 google 的一些答案,这些答案引导我使用Lumia Imaging SDK Sample和 Win2D。它们都不足以支持实时模糊。我知道在合成中可以进行实时模糊,因为我看过模糊视频的演示,并且有一个过时的项目XAMLFx允许您在 8.1 应用程序上使用 DX 模糊几乎任何东西。

我不想使用RenderTargetBitmap(想让我的 UI 线程保持空闲)。我怎样才能通过仅使用组合 API 来做到这一点:

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

// what next?

任何帮助是极大的赞赏 :)

4

1 回答 1

17

注意:这些功能(模糊和背景画笔)需要 Windows 10 周年更新。您目前可以通过 Windows Insider Program 获得 SDK 的预览

先决条件

  1. 针对 Windows 10 周年更新
  2. 对可视层和可视树如何工作的基本了解。您可以在此处了解更多信息。

此外,您可以查看我在此处编写的要点,这是在 XAML 应用程序中使用组合 API 快速启动和运行的方法。它也使用效果进行演示。不仅如此,它还包括使用 Composition API(使用我编写的包)加载图像。

入门

您可以通过两种方式在合成 API 中使用模糊效果。一种是适用于单个表面的法线效果。另一种是将其用作“背景”画笔,将所有内容置于其后面并对其进行模糊处理。

要使用模糊效果,您需要使用 Win2D 中的 GaussianBlurEffect 定义。事情是这样的:

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,这将非常有用。

下一步取决于您希望效果如何工作。

单面

如果您希望它仅应用于单个表面,您可以执行以下操作:

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

背景

但是,如果您想动态模糊给定视觉效果背后的大量内容,您可以执行以下操作:

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

请注意,这看起来与第一种方法非常相似,但不是给它一个表面笔刷,而是给它一个 BackdropBrush。这将实时获取视觉背后的内容并将其馈送到您的效果源中。在这种情况下,视觉“背后”的任何东西都会变得模糊。

表现

如果您只是模糊单个图像,最好模糊单个表面。您应该尝试仅在真正需要时才使用 BackdropBrush。

给我看更多!

要查看更多信息,请访问我们的GitHub 页面!我们已经创建了一个自定义 XAML 控件,可以在这里为您提供帮助,您可以在此处查看它的实际效果。您还可以在此处查看 //build 演讲。

于 2016-04-06T04:59:44.770 回答