模糊边缘周围的圆形图像

Question

我正在创建一个 Windows 10 移动 UWP 应用。我有一个圆形图像，我试图在边缘/边框周围淡化。图像后面有一个模糊的背景，我正在尝试创建一个外观，图像与模糊的背景一起消失。

圆/椭圆图片的XAML代码：

<Ellipse Height="145"
         Width="145"
         HorizontalAlignment="Center"
         VerticalAlignment="Bottom">
         <Ellipse.Fill>
            <ImageBrush ImageSource="ms-appx:///Assets/test/card_picture_test.jpg" Stretch="UniformToFill"/>
         </Ellipse.Fill>
</Ellipse>

尚未找到任何方法来模糊边框周围的图像。这可能吗？

（我曾尝试使用 Win2D 解决此问题，但没有设法模糊圆形图像或仅在边缘/边框周围模糊图像。）

帮助表示赞赏。谢谢！

Answer 1

我能够通过使用两个椭圆来实现您的目标。 一个在另一个上面，里面都有图片。

        <Grid>
            <Ellipse Width="500" Height="500">
                <Ellipse.Fill>
                    <ImageBrush ImageSource="forest.JPG" />
                </Ellipse.Fill>
            </Ellipse>
            <Ellipse Width="500" Height="500">
                <Ellipse.OpacityMask>
                    <RadialGradientBrush>
                        <GradientStop Color="#00000000" Offset="0"/>
                        <GradientStop Color="Black" Offset="1"/>
                    </RadialGradientBrush>
                </Ellipse.OpacityMask>
                <Ellipse.Fill>
                    <ImageBrush ImageSource="forest.JPG" />
                </Ellipse.Fill>
                <Ellipse.Effect>
                    <BlurEffect Radius="10"/>
                </Ellipse.Effect>
            </Ellipse>
        </Grid>

上面的椭圆是完全模糊的，下面是正常的。 从那里，我给顶部（模糊）椭圆一个 OpacityMask，使模糊椭圆的中心透明，从而显示非模糊椭圆图像。

现在您可以通过更改顶部 Ellipse 的 GradientStop Offset 的不透明度蒙版以及 BlurEffect 的半径来修改模糊程度。

BlurEffect 的半径将改变它的模糊程度，而 GradientStops 的偏移量将改变允许模糊的距离。