填充矩形的外部

时间:2013-07-18 10:28:51

标签: c# .net wpf fill rectangles

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

以下是一个例子:

enter image description here

矩形的外部是灰色的(低不透明度),矩形的填充是透明的。

4 个答案:

答案 0 :(得分:7)

您还可以使用半透明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>

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

答案 1 :(得分: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是一个Rect。

答案 2 :(得分:2)

您可以使用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>

答案 3 :(得分:1)

这是使用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>