具有破碎阴影效果的路径答案

【问题标题】：Path with broken shadow effect具有破碎阴影效果的路径
【发布时间】：2010-12-23 13:41:48
【问题描述】：

我希望图像中足够清晰，我有一个带阴影效果的三角形，看起来不太好，似乎不知何故坏了。任何帮助将不胜感激。

（更新：矩形和路径必须分开）

XAML：

    <Grid Height="50" Width="60" >
    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="20" />
            <ColumnDefinition Width="*" />
        </Grid.ColumnDefinitions>
        <Rectangle Grid.Column="1" Stroke="Black" Fill="White">
            <Rectangle.Effect>
                <DropShadowEffect Opacity="0.5" ShadowDepth="4" BlurRadius="10" />
            </Rectangle.Effect>
        </Rectangle>
        <Path Fill="White" Stretch="Fill" Stroke="Black" HorizontalAlignment="Left" Margin="0,15,-1,15"
                        Data="M44.386378,164.8791 L22.983157,171.42119 44.713478,176.58567" Width="23.167">
            <Path.Effect>
                <DropShadowEffect BlurRadius="10" Opacity="0.5" ShadowDepth="4" />
            </Path.Effect>
        </Path>
    </Grid>
</Grid>

【问题讨论】：

标签： wpf xaml path effects shadow

【解决方案1】：

在你的三角形上：

删除边距
明确设置路径高度（“22”非常接近您所拥有的高度）。

这应该可以防止三角形的阴影被剪裁。

这是用于此的 xaml：

    <Grid Height="50" Width="60" >
<Grid>
    <Grid.ColumnDefinitions>
        <ColumnDefinition Width="20" />
        <ColumnDefinition Width="*" />
    </Grid.ColumnDefinitions>
    <Rectangle Grid.Column="1" Stroke="Black" Fill="White" >
        <Rectangle.Effect>
            <DropShadowEffect Opacity="0.5" ShadowDepth="4" BlurRadius="10" />
        </Rectangle.Effect>
    </Rectangle>
    <Path Fill="White" Stretch="Fill" Stroke="Black" HorizontalAlignment="Left" 
        Data="M44.386378,164.8791 L22.983157,171.42119 44.713478,176.58567" Width="23.167" Height="22">
        <Path.Effect>
            <DropShadowEffect BlurRadius="10" Opacity="0.5" ShadowDepth="4" />
        </Path.Effect>
    </Path>
</Grid>

【讨论】：

【解决方案2】：

问题是你有两个独立的元素，每个元素都有一个阴影。你不能指望他们的阴影很好地结合起来，“模糊”分别应用于每个元素。尝试将矩形和三角形组合成一条路径。例如

<Path Fill="White" Stretch="Fill" Stroke="Black" HorizontalAlignment="Left" Margin="0,15,-1,15"
        Data="M 0,0 L 100,0 L 100,400 L 0,400 L 0,300 L -50, 200 L 0, 100 L 0,0">
    <Path.Effect>
      <DropShadowEffect BlurRadius="10" Opacity="0.5" ShadowDepth="4" />
    </Path.Effect>
</Path>

【讨论】：

抱歉，我必须将它们分开，因为该框包含动态数据的真实情况数据。而且我不希望数据仅影响矩形的三角形宽度。