如何在透明矩形上绘制阴影? [英] How to draw a drop-shadow on a transparent rectangle?

问题描述

当我向矩形添加投影位图效果时，投影会考虑矩形的透明度(有意义).有没有办法在透明矩形上渲染阴影，好像"矩形是不透明的?即会出现一个带有阴影的矩形洞".

When I add a dropshadow bitmap effect to a rectangle, the dropshadow takes into account the transparency of the rectangle (makes sense). Is there a way to render a dropshadow on a transparent rectangle 'as if' the rectangle were opaque? ie what would appear is a rectangle-shaped 'hole', with a dropshadow.

这是带有阴影的透明矩形的 XAML - 没有显示任何内容:

Here is the XAML for a transparent rectangle with a dropshadow - nothing is displayed:

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

推荐答案

将其放入 Kaxaml.它使用 SystemDropShadowChrome 装饰器创建一个大小为 500x500 的透明矩形.投影的剪辑设置为排除矩形区域.

Drop this into Kaxaml. It creates a transparent Rectangle of size 500x500, with a SystemDropShadowChrome Decorator. The drop shadow's clip is set to exclude the Rectangle's region.

<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，然后每个 RectangleGeometry 的 RadiusX 和 RadiusY 到 10.

If you want your drop shadow to have rounded corners, then set the CornerRadius of the SystemDropShadowChrome to whatever (let's say 10), then Geometry1's Left and Top values to 10, then the RadiusX and RadiusY of each RectangleGeometry to 10.

这篇关于如何在透明矩形上绘制阴影?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！