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>

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

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

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

在边缘周围模糊圆形图像

1 个答案: