WPF 擦掉顶部图像以显示下面的图像

Question

正如标题所暗示的，使用 WPF 我希望有一个场景，其中我有一个位图图像，另一个位图覆盖在它上面，并使用鼠标在顶部位图上“绘制”，以便它显示下面的位图.这就像用透明画笔画画一样简单吗？我试过这个没有用，但也许我错过了一些东西。

Answer 1

您可以使用VisualBrush 创建OpacityMask。这是一个将深绿色矩形替换为浅绿色矩形的代码示例。使用这种方法，两个矩形可以是任何元素，包括图像。

<Grid MouseMove="Grid_MouseMove">
    <Rectangle Fill="DarkGreen"/>
    <Rectangle Fill="LightGreen">
        <Rectangle.OpacityMask>
            <VisualBrush Stretch="None" AlignmentX="Left" AlignmentY="Top">
                <VisualBrush.Visual>
                    <Path Name="path" Stroke="Black" StrokeThickness="10"/>
                </VisualBrush.Visual>
            </VisualBrush>
        </Rectangle.OpacityMask>
    </Rectangle>
</Grid>

这里是代码隐藏：

private void Grid_MouseMove(object sender, MouseEventArgs e)
{
    if (e.LeftButton == MouseButtonState.Pressed)
    {
        var point = e.GetPosition(sender as Grid);
        if (lastPoint != nullPoint)
            AddSegment(lastPoint, point);
        lastPoint = point;
    }
    else
    {
        lastPoint = nullPoint;
    }
}

private void AddSegment(Point point1, Point point2)
{
    if (segments.Count == 0 || segments[segments.Count - 1].Point != point1)
        segments.Add(new LineSegment(point1, false));
    segments.Add(new LineSegment(point2, true));
    var figures = new PathFigureCollection();
    figures.Add(new PathFigure(new Point(), segments, false));
    var geometry = new PathGeometry();
    geometry.Figures = figures;
    path.Data = geometry;
}

List<LineSegment> segments = new List<LineSegment>();
private static readonly Point nullPoint = new Point(-1, -1);
Point lastPoint = nullPoint;