WPF中的不透明蒙版 - 不包括形状

时间:2014-01-23 19:29:35

标签: wpf pathgeometry opacitymask

我正在创建一种各种类型的PDF查看器,如果用户将光标移动到当前幻灯片(在外部文件中定义)的多个感兴趣区域之一上,则幻灯片的其余部分将变暗,突出该区域。

目前,这些感兴趣的领域是路径形状,使用Geometry.Parse()方法使用外部文件中提供的信息创建并存储在List<List<Path>>中。

此着色的当前XAML如下:

    <Image Name="SlideImage" HorizontalAlignment="Left" VerticalAlignment="Top">
        <Image.OpacityMask>
            <DrawingBrush Opacity="0.4">
                <DrawingBrush.Drawing>
                    <GeometryDrawing x:Name="ShadeGeometry">
                        <GeometryDrawing.Brush>
                            <RadialGradientBrush>
                                <RadialGradientBrush.GradientStops>
                                    <GradientStop Offset="0" Color="Transparent"/>
                                    <GradientStop Offset="1" Color="Black"/>
                                </RadialGradientBrush.GradientStops>
                            </RadialGradientBrush>
                        </GeometryDrawing.Brush>
                        <GeometryDrawing.Pen>
                            <Pen Thickness="0.1" Brush="Black"/>
                        </GeometryDrawing.Pen>
                    </GeometryDrawing>
                </DrawingBrush.Drawing>
            </DrawingBrush>
        </Image.OpacityMask>
 <Image>

使用以下方法更改绘图的几何图形:

public void ShadeCommand(ref GeometryDrawing ShadeGeometry, int page, int shape)
{
    if (page < commands.Count && shape < commands[page].Count)
    {
        ShadeGeometry.Geometry = Geometry.Parse(
            "M 0,0 " + "H " + resolution.X + " V " + resolution.Y +
            " H 0 V 0 L " + commands[page][shape].Substring(2) + " Z");
    }
    else
    {
        ShadeGeometry.Geometry = null;  //Geometry.Empty
    }
}

这将绘制一个围绕图像区域的形状,然后返回到起始点之前的给定形状。

这种方法的问题在于它会产生非常奇怪的外观形状,不透明蒙版的渐变似乎会使某个区域变白而不会使其余部分变暗。

我并不太关心从黑暗逐渐转变为形状,只要我能找到一个可以使形状周围区域变暗但仍然显示下方滑动的解决方案,我会很高兴。提前谢谢。

1 个答案:

答案 0 :(得分:2)

使用半透明的黑色Path元素覆盖图像可能更容易,该元素使用CombinedGeometry,其中包含足够大的RectangleGeometry和排除的PathGeometry

像这样:

<Grid>
    <Image Source="C:\Users\Public\Pictures\Sample Pictures\Koala.jpg" Stretch="None"/>
    <Path Fill="Black" Opacity="0.5"> 
        <Path.Data>
            <CombinedGeometry GeometryCombineMode="Exclude">
                <CombinedGeometry.Geometry1>
                    <RectangleGeometry Rect="0,0,10000,10000"/>
                </CombinedGeometry.Geometry1>
                <CombinedGeometry.Geometry2>
                    <PathGeometry Figures="M 280,375 l100,-50 100,50 -100,50z"/>
                </CombinedGeometry.Geometry2>
            </CombinedGeometry>
        </Path.Data>
    </Path>
</Grid>

您现在可以在CombinedGeometry.Geometry2中以编程方式调整PathGeometry(或者可能是StreamGeometry)。