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;