Path with broken shadow effect

别等时光非礼了梦想. 提交于 2020-01-16 02:01:07

问题


I hope that it is clear enough in the image, I have a triangle with shadow effect that doesn't look so good, seems to be broken somehow. Any help will be greatly appreciated.

(Update: the rectangle and the path have to be separated)

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>

回答1:


On your triangle:

  1. Remove the Margin
  2. Set the Path height explicitly ("22" is pretty close what you have there).

That should prevent the triangle's shadow from being clipped.

Here's the xaml for that:

    <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:


The problem is you have two separate elements each with a drop shadow. You cannot expect their shadows to join up nicely, the 'blur' is applied separately to each element. Try combining your rectangle and triangle into a single path. e.g.

<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>


来源:https://stackoverflow.com/questions/4519243/path-with-broken-shadow-effect

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!