我想在WPF中绘制一个矩形(通过代码)并填充它的外部。
以下是一个例子:
矩形的外部是灰色的(低不透明度),矩形的填充是透明的。
答案 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>