填充矩形的外部

Question

我想在WPF中绘制一个矩形（通过代码）并填充它的外部。

下面是一个例子：

矩形的周围是灰色的（具有低不透明度），并且矩形的填充是trasparent。

Answer 1

您也可以用半透明Path元件重叠图像使用一个CombinedGeometry它结合一个非常大的外部矩形具有内矩形：

<Grid> 
    <Image Name="image" Source="C:\Users\Public\Pictures\Sample Pictures\Koala.jpg"/> 
    <Path Fill="#AAFFFFFF"> 
     <Path.Data> 
      <CombinedGeometry GeometryCombineMode="Xor"> 
       <CombinedGeometry.Geometry1> 
        <RectangleGeometry Rect="0,0,10000,10000"/> 
       </CombinedGeometry.Geometry1> 
       <CombinedGeometry.Geometry2> 
        <RectangleGeometry x:Name="transparentRect" Rect="150,100,200,100"/> 
       </CombinedGeometry.Geometry2> 
      </CombinedGeometry> 
     </Path.Data> 
    </Path> 
</Grid> 

您现在将根据需要以编程方式调整transparentRect成员的Rect属性。

Answer 2

您可以使用OpacityMask和DrawingBrush的组合：

XAML：

<Grid Background="Gray"> 
    <Image Name="image"Source="..."> 
     <Image.OpacityMask> 
      <DrawingBrush x:Name="mask"/> 
     </Image.OpacityMask> 
    </Image> 
</Grid> 

代码隐藏：

private void UpdateOpactiyMask() 
    { 
     Point topLeft = new Point(); 
     Point bottomRight = new Point(image.ActualWidth, image.ActualHeight); 

     GeometryDrawing left = new GeometryDrawing(); 
     left.Brush = borderBrush; 
     left.Geometry = new RectangleGeometry(new Rect(topLeft, new Point(SelectedArea.Left, bottomRight.Y))); 

     GeometryDrawing right = new GeometryDrawing(); 
     right.Brush = borderBrush; 
     right.Geometry = new RectangleGeometry(new Rect(new Point(SelectedArea.Right, topLeft.Y), bottomRight)); 

     GeometryDrawing top = new GeometryDrawing(); 
     top.Brush = borderBrush; 
     top.Geometry = new RectangleGeometry(new Rect(new Point(SelectedArea.Left, topLeft.Y), new Point(SelectedArea.Right, SelectedArea.Top))); 

     GeometryDrawing bottom = new GeometryDrawing(); 
     bottom.Brush = borderBrush; 
     bottom.Geometry = new RectangleGeometry(new Rect(new Point(SelectedArea.Left, SelectedArea.Bottom), new Point(SelectedArea.Right, bottomRight.Y))); 

     GeometryDrawing center = new GeometryDrawing(); 
     center.Brush = selectionBrush; 
     center.Geometry = new RectangleGeometry(SelectedArea); 

     DrawingGroup drawing = new DrawingGroup(); 
     drawing.Children.Add(left); 
     drawing.Children.Add(right); 
     drawing.Children.Add(top); 
     drawing.Children.Add(bottom); 
     drawing.Children.Add(center); 

     mask.Drawing = drawing; 
    } 

SelectedArea是一个矩形。

Answer 3

可以使用UIElement.Clip属性：

<Window x:Class="So17720970_RectangularBoublik.MainWindow" 
     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
     SizeToContent="WidthAndHeight"> 
    <Grid Width="500" Height="500"> 
     <Image Source="http://i.stack.imgur.com/Py65S.jpg"/> <!-- image --> 
     <Rectangle Fill="#AA000000">       <!-- selection --> 
      <Rectangle.Clip> 
       <GeometryGroup FillRule="Nonzero">   <!-- selection clip: --> 
        <RectangleGeometry Rect="0 0 500 200"/> <!-- top --> 
        <RectangleGeometry Rect="0 0 100 500"/> <!-- left --> 
        <RectangleGeometry Rect="0 300 500 200"/> <!-- bottom --> 
        <RectangleGeometry Rect="400 0 100 500"/> <!-- right --> 
       </GeometryGroup> 
      </Rectangle.Clip> 
     </Rectangle> 
     <Rectangle StrokeThickness="1" Stroke="Black" StrokeDashArray="1 2" SnapsToDevicePixels="True" 
       Margin="100 200 100 200"/>     <!-- "ants" --> 
    </Grid> 
</Window> 

Answer 4

这是使用OpacityMask的解决方案的变体。而不是在代码中完成，它是在XAML中完成的。此外，它颠倒了逻辑：不是绘制4个边框，而是绘制2个矩形。最后，这个解决方案的重要特性是中央透明矩形的大小与图像大小（而不是绝对像素）有关。您不需要知道实际的图像大小或其拉伸/定位方式（对Stretch =“Uniform”尤其重要）。在这里，我将图像大小（maskRect）指定为1,1，并使用小数作为相对掩码大小和位置（transpRect）。你也可以指定图像尺寸为100,100，并使用掩码的百分比值（或者甚至使用实际的像素值）。

  <Grid Background="#FFF4F4F5" > 
      <Image Name="PhotoImage" Source="..."> 
       <Image.OpacityMask> 
        <DrawingBrush> 
         <DrawingBrush.Drawing> 
          <DrawingGroup> 
           <GeometryDrawing> 
            <GeometryDrawing.Geometry> 
             <RectangleGeometry x:Name="maskRect" Rect="0,0,1,1"/> 
            </GeometryDrawing.Geometry> 
            <GeometryDrawing.Brush> 
             <SolidColorBrush Color="#60000000" /> 
            </GeometryDrawing.Brush> 
           </GeometryDrawing> 
           <GeometryDrawing> 
            <GeometryDrawing.Geometry> 
             <RectangleGeometry x:Name="transpRect" Rect=".25,.20,.40,.40"/> 
            </GeometryDrawing.Geometry> 
            <GeometryDrawing.Brush> 
             <SolidColorBrush Color="Black" /> 
            </GeometryDrawing.Brush> 
           </GeometryDrawing> 
          </DrawingGroup> 
         </DrawingBrush.Drawing> 
        </DrawingBrush> 
       </Image.OpacityMask> 
      </Image> 
     </Grid>