如何在透明矩形上繪製陰影？

當我將陰影位圖效果添加到矩形時，陰影會考慮矩形的透明度（合理）。有沒有辦法在透明矩形上渲染陰影，就好像矩形是不透明的？即會出現一個矩形「洞」，並帶有陰影。如何在透明矩形上繪製陰影？

這裏是有陰影效果的透明矩形的XAML - 不顯示任何內容：

<Rectangle Fill="Transparent" Margin="10" Width="100" Height="100"> 
    <Rectangle.BitmapEffect> 
    <DropShadowBitmapEffect/> 
    </Rectangle.BitmapEffect> 
</Rectangle>

來源

2010-02-19 mackenir

將此放入Kaxaml。它使用SystemDropShadowChrome裝飾器創建一個尺寸爲500x500的透明Rectangle。陰影的剪輯設置爲排除矩形的區域。

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:theme="clr-namespace:Microsoft.Windows.Themes;assembly=PresentationFramework.Aero" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> 
    <Canvas> 
     <theme:SystemDropShadowChrome Margin="0,0,5,5"> 
      <Rectangle Width="500" Height="500" Fill="transparent"/> 
      <theme:SystemDropShadowChrome.Clip> 
       <CombinedGeometry GeometryCombineMode="Exclude"> 
        <CombinedGeometry.Geometry1> 
         <RectangleGeometry Rect="0,0,505,505"/> 
        </CombinedGeometry.Geometry1> 
        <CombinedGeometry.Geometry2> 
         <RectangleGeometry Rect="0,0,500,500"/> 
        </CombinedGeometry.Geometry2> 
       </CombinedGeometry> 
      </theme:SystemDropShadowChrome.Clip> 
     </theme:SystemDropShadowChrome> 
    </Canvas> 
</Page>

如果你希望你的陰影有圓角，然後設置SystemDropShadowChrome到任何的CornerRadius（比方說10），然後Geometry1的Left和Top值10，那麼RadiusX和RadiusY每個RectangleGeometry至10.

來源

2010-02-19 21:18:20 moswald

它的工作原理！雖然看起來好像你並不需要在陰影中包含透明的Rectangle（或任何對象）。我唯一的問題是可以用於動態調整大小的內容嗎？ – Domokun 2011-10-14 04:38:26

我很樂意看到更好的解決方案，但這裏是我最常做的（當心：令人毛骨悚然的代碼先）。

將矩形換成三四個矩形，並使用筆觸顏色進行播放，使其在變爲原始矩形時變得更深和更暗。下面是代碼：

<Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> 
    <Grid> 
     <Rectangle 
     Width="106" 
     Height="106" 
     Stroke="#10000000" 
     StrokeThickness="1"/> 
     <Rectangle 
     Width="104" 
     Height="104" 
     Stroke="#5C000000" 
     StrokeThickness="1"/> 
     <Rectangle 
     Width="102" 
     Height="102" 
     Stroke="#AC000000" 
     StrokeThickness="1"/> 
     <Rectangle 
     Width="100" 
     Height="100" 
     Fill="Transparent" 
     Stroke="#FF000000" 
     StrokeThickness="1"> 
     </Rectangle> 
    </Grid> 
</Page>

這給了你：

alt text http://img521.imageshack.us/img521/7664/shadowo.jpg

另一種方法是有邊界 - 這是更好，因爲你沒有指定尺寸，當你把他們內部網。

而最好的方法（從未見過實現雖然）：自定義像素着色器，這使得你想要的。

來源

2010-02-19 10:58:53 Anvaka

還有另一個黑客，我實現了一次創建一個'模糊的矩形'，而不使用BitmapEffects：創建一個3x3網格，在每個「邊」單元格中使用漸變填充矩形。角落細胞充滿徑向梯度。其他細胞與線性漸變。雖然有點不合適，但是在使用投影技術對其進行動畫製作時避免了令人討厭的鋸齒效果。 – mackenir 2010-02-19 12:26:42

也許'解決方案'是創建一個剪輯路徑，以顯示陰影區域，並剪出矩形本身... – mackenir 2010-02-19 12:27:45

那麼，這裏是一個冗長的方式來實現矩形的「陰影」，而不使用位圖效果。在這種情況下，「陰影矩形」的中心被着色，但它可以被設置爲透明以給你一個「暈輪」風格的投影（即等於一路 - 不抵消）

<UserControl x:Class="RectShadow" 
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:System="clr-namespace:System;assembly=mscorlib"> 
    <UserControl.Resources> 
     <System:Double x:Key="CornerSize">5</System:Double> 
     <Color x:Key="ShadowColor">#60000000</Color> 
     <Color x:Key="TransparentColor">#00000000</Color> 
    </UserControl.Resources> 
    <Grid> 
     <Grid.RowDefinitions> 
      <RowDefinition Height="auto"/> 
      <RowDefinition/> 
      <RowDefinition Height="auto"/> 
     </Grid.RowDefinitions> 
     <Grid.ColumnDefinitions> 
      <ColumnDefinition Width="auto"/> 
      <ColumnDefinition/> 
      <ColumnDefinition Width="auto"/> 
     </Grid.ColumnDefinitions> 

     <Rectangle Width="{StaticResource CornerSize}" Height="{StaticResource CornerSize}"> 
      <Rectangle.Fill> 
       <RadialGradientBrush Center="1,1" GradientOrigin="1,1" RadiusX="1" RadiusY="1"> 
        <GradientStop Color="{StaticResource ShadowColor}"/> 
        <GradientStop Offset="1" Color="{StaticResource TransparentColor}"/> 
       </RadialGradientBrush> 
      </Rectangle.Fill> 
     </Rectangle> 

     <Rectangle Grid.Row="2" Grid.Column="2" Width="{StaticResource CornerSize}" Height="{StaticResource CornerSize}"> 
      <Rectangle.Fill> 
       <RadialGradientBrush Center="0,0" GradientOrigin="0,0" RadiusX="1" RadiusY="1"> 
        <GradientStop Color="{StaticResource ShadowColor}"/> 
        <GradientStop Offset="1" Color="{StaticResource TransparentColor}"/> 
       </RadialGradientBrush> 
      </Rectangle.Fill> 
     </Rectangle> 

     <Rectangle Grid.Row="0" Grid.Column="2" Width="{StaticResource CornerSize}" Height="{StaticResource CornerSize}"> 
      <Rectangle.Fill> 
       <RadialGradientBrush Center="0,1" GradientOrigin="0,1" RadiusX="1" RadiusY="1"> 
        <GradientStop Color="{StaticResource ShadowColor}"/> 
        <GradientStop Offset="1" Color="{StaticResource TransparentColor}"/> 
       </RadialGradientBrush> 
      </Rectangle.Fill> 
     </Rectangle> 

     <Rectangle Grid.Row="2" Grid.Column="0" Width="{StaticResource CornerSize}" Height="{StaticResource CornerSize}"> 
      <Rectangle.Fill> 
       <RadialGradientBrush Center="1,0" GradientOrigin="1,0" RadiusX="1" RadiusY="1"> 
        <GradientStop Color="{StaticResource ShadowColor}"/> 
        <GradientStop Offset="1" Color="{StaticResource TransparentColor}"/> 
       </RadialGradientBrush> 
      </Rectangle.Fill> 
     </Rectangle> 

     <Rectangle Grid.Column="1"> 
      <Rectangle.Fill> 
       <LinearGradientBrush EndPoint="0,1"> 
        <GradientStop Offset="1" Color="{StaticResource ShadowColor}"/> 
        <GradientStop Color="{StaticResource TransparentColor}"/> 
       </LinearGradientBrush> 
      </Rectangle.Fill> 
     </Rectangle> 


     <Rectangle Grid.Column="1" Grid.Row="2"> 
      <Rectangle.Fill> 
       <LinearGradientBrush EndPoint="0,1"> 
        <GradientStop Color="{StaticResource ShadowColor}"/> 
        <GradientStop Offset="1" Color="{StaticResource TransparentColor}"/> 
       </LinearGradientBrush> 
      </Rectangle.Fill> 
     </Rectangle> 

     <Rectangle Grid.Row="1"> 
      <Rectangle.Fill> 
       <LinearGradientBrush EndPoint="1,0"> 
        <GradientStop Offset="1" Color="{StaticResource ShadowColor}"/> 
        <GradientStop Color="{StaticResource TransparentColor}"/> 
       </LinearGradientBrush> 
      </Rectangle.Fill> 
     </Rectangle> 

     <Rectangle Grid.Row="1" Grid.Column="2"> 
      <Rectangle.Fill> 
       <LinearGradientBrush EndPoint="1,0"> 
        <GradientStop Color="{StaticResource ShadowColor}"/> 
        <GradientStop Offset="1" Color="{StaticResource TransparentColor}"/> 
       </LinearGradientBrush> 
      </Rectangle.Fill> 
     </Rectangle> 

     <Rectangle Grid.Row="1" Grid.Column="1"> 
      <Rectangle.Fill> 
       <SolidColorBrush Color="{StaticResource ShadowColor}"/> 
      </Rectangle.Fill> 
     </Rectangle> 
    </Grid> 
</UserControl>

來源

2010-02-19 12:33:51 mackenir

將矩形包裹在邊框中。併爲邊框添加陰影。你會得到同樣的效果。

來源

2011-10-13 11:40:59 holden321

如何在透明矩形上繪製陰影？

回答

相關問題