wpf - 描画コンテキストのWPFクリア領域?

Question

したがって、DrawingContext と DrawingVisual を使用して透明な PNG を作成しています。

DrawingContext 内で、四角形を描画しました。

長方形の内側に円を「切り取り」たいと思います。どうすればいいですか？領域をクリアするための関数が描画コンテキストに見つかりませんでした。

Answer 1

CombinedGeometryを使用して、(毎回) 2 つのジオメトリを組み合わせることができます。いくつGeometryCombineModeかのロジックの組み合わせを指定できます。この場合、必要なのはGeometryCombineMode.Xor. Rect と Ellipse (円) の交点が切り取られます。これを示す簡単なコードを次に示します。

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);                    
}

をレンダリングする方法を知っていることを願っていますDrawingVisual。一部を使用RenderTargetBitmapして、ある種の BitmapSource にキャプチャすることができ、このビットマップを表示する多くの方法があります。

スクリーンショットは次のとおりです。

黒の領域は、色が透明であることを意味します。

複雑な画像 (描画されたテキストや画像など) を切り取りたい場合。CombinedGeometryをある種のOpacityMask(の型) に変えることができますBrush。これを に変えることができDrawingBrush、このブラシはメソッドOpacityMaskに渡すことができるものとして使用できます。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());
}

rectには、図面全体のサイズが必要であることに注意してください。次に、穴やその他の描画されたものを正確に配置します。

最後に、DrawingVisualには と呼ばれる便利なプロパティもありClipますGeometry。したがって、いくつかを準備CombinedGeometryしてプロパティに割り当てることができDrawingVisual.Clipます。

あなたがすでにあなたのものを持っているとしましょうDrawingVisual（テキスト、画像などを含むいくつかの描画されたもので...）。次のコードは、それに穴を開けます。

//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;