如何在透明矩形上绘制阴影？

当我将阴影位图效果添加到矩形时，阴影会考虑矩形的透明度（合理）。有没有办法在透明矩形上渲染阴影，就好像矩形是不透明的？即会出现一个矩形“洞”，并带有阴影。如何在透明矩形上绘制阴影？

这里是有阴影效果的透明矩形的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

如何在透明矩形上绘制阴影？

回答

相关问题