如何使用 DX Compositor 模糊部分图像？

Question

如何使用 DX 合成器在 UWP 应用程序中模糊图像的矩形部分 (Windows.UI.Xaml.Controls.Image)？

Answer 1

XAML

<Grid>
    <Image Name="image" Width="100" Height="200" />
    <Grid Name="rectangle" Widht="100" Height="100" />
</Grid>

C#

var blurEffect = new GaussianBlurEffect {
    Name = "Blur",
    BlurAmount = 2f,
    Source = new CompositionEffectSourceParameter("source"),
};

var visual = ElementCompositionPreview.GetElementVisual(rectangle);
var compositor = visual.Compositor;
var effectFactory = compositor.CreateEffectFactory(blurEffect, new[] { "Blur.BlurAmount" });
var effectBrush = effectFactory.CreateBrush();
effectBrush.SetSourceParameter("source", compositor.CreateBackdropBrush());

var blurSprite = compositor.CreateSpriteVisual();
blurSprite.Size = new Vector2((float)rectangle.Width, (float)rectangle.Height);
blurSprite.Brush = effectBrush;
blurSprite.Offset = new Vector3(0, (float)((image.Height - rectangle.Height) / 2), 0);

ElementCompositionPreview.SetElementChildVisual(image, blurSprite);

如何使用 DX Compositor 模糊部分图像？

How to use a DX Compositor to blur part of the image?

c#

win-universal-app

composition

uwp-xaml