WPF Clear Region in drawing context?

You can use CombinedGeometry to combine 2 geometries (each time). It has a way to specify some logical combination. In this case, you need . The intersection of Rect and Ellipse (cirlce) will be cut. Here's some simple code to demonstrate this: GeometryCombineMode

GeometryCombineMode.Xor

DrawingVisual dv = new DrawingVisual();
using (var dc = dv.RenderOpen()) {                    
  var rect = new Rect(0, 0, 300, 200);        
  var cb = new CombinedGeometry(GeometryCombineMode.Xor, 
                                new RectangleGeometry(rect),
                               new EllipseGeometry(new Point(150, 100), 50, 50));
  dc.DrawGeometry(Brushes.Blue, null, cb);                    
}

      

        
        
        
      

    

Hope you know how to do it DrawingVisual

. You can use some RenderTargetBitmap

to capture it into some kind of bitmap source, and then you have many ways to show that bitmap.

Here's a screenshot:

A black area means the color is transparent.

When you want to cut out a complex image (like drawn text or an image). You can convert CombinedGeometry

to some kind of OpacityMask

(type Brush

). We can turn it into DrawingBrush

, and this brush can be used like OpacityMask

, which can be passed to a method DrawingContext.PushOpacityMask

:

DrawingVisual dv = new DrawingVisual();                
using (var dc = dv.RenderOpen()) {                    
  var rect = new Rect(0, 0, 300, 200);
  var cb = new CombinedGeometry(GeometryCombineMode.Xor, 
                                new RectangleGeometry(rect),
                               new EllipseGeometry(new Point(150, 100), 50, 50));
  var mask = new DrawingBrush(new GeometryDrawing(Brushes.Blue, null, cb));      
  dc.PushOpacityMask(mask);
  dc.DrawImage(someImage, rect);
  dc.DrawText(new FormattedText("Windows Presentation Foundation", 
                                 System.Globalization.CultureInfo.CurrentCulture, 
                                 System.Windows.FlowDirection.LeftToRight,
                                 new Typeface("Lucida Bright"), 30, Brushes.Red){ 
                                   MaxTextWidth = rect.Width, 
                                   MaxTextHeight = rect.Height, 
                                   TextAlignment = TextAlignment.Center
                                 }, new Point());
}

      

        
        
        
      

    

Please note: the size rect

must be the same as the whole picture. Then the positioning of the hole and other drawn material will be exactly as you want.

Finally, it DrawingVisual

also has a useful property called Clip

which is Geometry

. Therefore you can prepare CombinedGeometry

and assign it to a property DrawingVisual.Clip

.

Let's assume you already have one DrawingVisual

(with some graphics including text, images, ...). The following code punches a hole through it:

//prepare the geometry, which can be considered as the puncher.
var rect = new Rect(0, 0, 300, 200);
var cb = new CombinedGeometry(GeometryCombineMode.Xor, 
                              new RectangleGeometry(rect),
                             new EllipseGeometry(new Point(150, 100), 50, 50));
//punch the DrawingVisual
yourDrawingVisual.Clip = cb;