wpf路径的阴影

Question

那么我怎样才能在我的道路上产生一个内在的阴影。您可以在下面的示例中看到我能够在边框上创建它，但我不知道如何将它放到我的路径上。目标是使阴影出现在心脏的内部区域。

<Border Background="LightGray" BorderBrush="DarkGray" Width="40" Height="20"
           BorderThickness="0" ClipToBounds="True">
            <Border Background="Transparent" BorderBrush="Black" BorderThickness="1" Margin="-2">
                <Border.Effect>
                    <DropShadowEffect ShadowDepth="0" BlurRadius="5"/>
                </Border.Effect>
            </Border>
        </Border>

        <Path Stretch="Uniform" Width="50" Fill="Red" StrokeThickness="5" Data="M74,130C40,102.4,0,69.4,0,40.3C0,17.1,15.3,0,40,0 c21.3,0,32.4,14,34,18.1C75.6,14,86.7,0,108,0c24.7,0,40,17.1,40,40.3C148,69.4,108,102.4,74,130z">
        </Path>

Answer 1

您最好的方法是尝试了解ShaderEffect - 一种可以基于HLSL（高级着色器语言）实现的自定义效果。但这样做并不容易。一些简单的效果可以轻松完成，但对我来说这种效果并不那么容易。您可以尝试在HLSL 中搜索发光效果 - 并尝试修改它以产生内部阴影效果。

我想在这里介绍一下使用纯XAML的解决方法。但是，我们使用已弃用的效果OuterGlowBitmapEffect，您可以轻松找到Effect的免费库（具有相应的OuterGlowEffect）并使用该库而不是以下OuterGlowBitmapEffect码。应为Effect属性而不是Effect属性设置新的BitmapEffect。

以下是代码：

<Grid>
    <Grid.Resources>
        <PathGeometry x:Key="data" Figures="M74,130C40,102.4,0,69.4,0,40.3C0,17.1,15.3,0,40,0 c21.3,0,32.4,14,34,18.1C75.6,14,86.7,0,108,0c24.7,0,40,17.1,40,40.3C148,69.4,108,102.4,74,130z"/>
        <VisualBrush x:Key="heartGlow" Stretch="Uniform" ViewportUnits="RelativeToBoundingBox" Viewport="-0.25,-0.25,1.5,1.5">
            <VisualBrush.Visual>
                <Path Data="{StaticResource data}" Stroke="Gray" StrokeThickness="2">
                    <Path.BitmapEffect>
                        <OuterGlowBitmapEffect GlowColor="Gray" GlowSize="25" Opacity="1"/>
                    </Path.BitmapEffect>
                </Path>
            </VisualBrush.Visual>                
        </VisualBrush>
        <VisualBrush x:Key="heart" Stretch="Uniform">
            <VisualBrush.Visual>
                <Path Data="{StaticResource data}" Stroke="Transparent" StrokeThickness="1" Fill="Red">                        
                </Path>
            </VisualBrush.Visual>
        </VisualBrush>
    </Grid.Resources>
    <Border Background="{StaticResource heart}" Width="50">
        <Border Background="{StaticResource heartGlow}"  OpacityMask="{StaticResource heart}">                
        </Border>
    </Border>
</Grid>

你需要使用上面的整个Grid来渲染你想要的东西，它是某种复合元素。这里的想法是我们使用一个发光元素（OuterGlowBitmapEffect）来渲染一个普通元素（渲染精确的原始心脏）。发光部分有两面：内部发光和外部发光。内部发光将覆盖背后的背景并创造我们想要的效果。但是应该切断外部发光。我们使用OpacityMask来切断那部分并最终获得完美的结果。