模糊邊緣的圓形圖像

我正在創建一個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，因爲不存在不透明遮罩或影響。 –

模糊邊緣的圓形圖像

回答

相關問題