模糊边缘的圆形图像

我正在创建一个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但既没有设法模糊圆图像或模糊仅围绕边缘/边界的图像。）

帮助理解。谢谢！

来源

2016-01-22 henrikh

Win2d会工作：创建两个包含图像的图层 - 模糊第一个图层，然后使用径向渐变蒙版（中心：可见，边缘：蒙版）在第二个图层上绘制第二个图层。 –

-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偏移的不透明蒙版以及BlurEffect的半径来修改模糊程度。

BlurEffect的半径会改变它的模糊程度，并且GradientStops的偏移量将改变模糊允许走多远。

来源

2016-01-22 11:40:47 Logan

此解决方案不适用于UWP，因为不存在不透明遮罩或影响。 –

模糊边缘的圆形图像

回答

相关问题