WPF 控件专题 Clip属性详解

最新推荐文章于 2024-01-22 18:01:41 发布

^@^lemon tea^@^

最新推荐文章于 2024-01-22 18:01:41 发布

阅读量1.9k

点赞数 1

分类专栏： # WPF 控件专题文章标签： WPF控件专题Clip属性详解 WPF Clip属性详解

本文链接：https://blog.csdn.net/BYH371256/article/details/125258440

版权

WPF 控件专题专栏收录该内容

53 篇文章 93 订阅

订阅专栏

1、UIElement.Clip 属性介绍

官方释义：获取或设置用于定义元素内容轮廓的几何图形。简单的说就是用于剪裁区域大小的几何图形，默认值为 null Geometry。

组合裁剪可使用GeometryGroup，CombinedGeometry。

GeometryGroup：它表示由其他 Geometry 对象组成的复合几何图形；使用FillRule属性设置组合的方式，EvenOdd（穿透）、Nonzero（不穿透）。

CombinedGeometry ：表示由两个 Geometry 对象的组合定义的二维几何形状；使用 GeometryCombineMode设置组合的方式，叠加方式：Exclude、Intersect、Union、Xor。

Exclude：从第一个区域中除去第二个区域。如果给出两个几何图形 A 和 B，则从几何图形 A 的区域中除去几何图形 B 的区域，所产生的区域为 A-B。

Intersect：通过采用两个区域的交集合并两个区域。新的区域由两个几何图形之间的重叠区域组成。

Union：通过采用两个区域的并集合并两个区域。所生成的几何图形为几何图形 A + 几何图形 B。

Xor：将在第一个区域中但不在第二个区域中的区域与在第二个区域中但不在第一个区域中的区域进行合并。新的区域由 (A-B) + (B-A) 组成，其中 A 和 B 为几何图形。

**************************************************************************************************************

2、具体示例

示例一： Image 没有定义的剪辑区域的元素。由于未定义剪辑区域，因此将显示整个图像。

<Grid>
	<Image Source="./huahua.png" Stretch="Fill"  Height="300" Width="450">
</Grid>

没有剪辑区域的图像如下所示

示例二：在下一个示例中，将创建相同的图像，但具有定义的剪辑区域除外。仅显示该区域中 EllipseGeometry 图像的一部分。

<Image Source="./huahua.png" Stretch="Fill"  Height="300" Width="450">
	<Image.Clip>
		<EllipseGeometry  RadiusX="220" RadiusY="220" Center="220,150"/>
	</Image.Clip>
</Image>

效果图如下：

示例三：组合裁剪

<StackPanel Orientation="Horizontal" HorizontalAlignment="Stretch">
	<!--使用Nonzero：无穿透效果-->
	<Grid>
		<TextBlock Text="GeometryGroup 的 FillRule 为填充规则的意思，它有两个属性值，EvenOdd，Nonzero；EvenOdd（默认值）：具有穿透效果，Nonzero：无穿透效果"  
				   Width="350" Foreground="#dddddd" FontSize="17" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap"/>
		<Image Source="./huahua.png" Stretch="Fill"  Height="400" Width="400">
			<Image.Clip>
				<GeometryGroup FillRule="Nonzero">
					<RectangleGeometry Rect="0 0 400 400"/>
					<EllipseGeometry  RadiusX="200" RadiusY="200" Center="200,200"/>
				</GeometryGroup>
			</Image.Clip>
		</Image>
	</Grid>
	<!--使用EvenOdd：具有穿透效果-->
	<Grid>
		<TextBlock Text="GeometryGroup 的 FillRule 为填充规则的意思，它有两个属性值，EvenOdd，Nonzero；EvenOdd（默认值）：具有穿透效果，Nonzero：无穿透效果"  
				   Width="350" Foreground="#dddddd" FontSize="17" HorizontalAlignment="Center" VerticalAlignment="Center" TextWrapping="Wrap"/>
		<Image Margin="30 0" Source="./huahua.png" Stretch="Fill"  Height="400" Width="400">
			<Image.Clip>
				<GeometryGroup FillRule="EvenOdd">
					<RectangleGeometry Rect="0 0 400 400"/>
					<EllipseGeometry  RadiusX="200" RadiusY="200" Center="200,200"/>
				</GeometryGroup>
			</Image.Clip>
		</Image>
	</Grid>
</StackPanel>

效果图如下：左图是不穿透的效果；右侧图片时穿透的效果，可见公共部分穿透显示文本内容。

示例四：CombinedGeometry 组合裁剪的方式，使用Geometry1和Geometry2设置两个集合图形。

<Image Source="./huahua.png" Stretch="Fill"  Height="400" Width="400">
	<Image.Clip>
		<CombinedGeometry GeometryCombineMode="Intersect">
			<!--GeometryCombineMode：设置两个图像的组合方式-->
		    <CombinedGeometry.Geometry1>
			    <RectangleGeometry Rect="0,0,400,400"/>
		    </CombinedGeometry.Geometry1>
		    <CombinedGeometry.Geometry2>
				<EllipseGeometry RadiusX="240" RadiusY="240" Center="200,200"/>
			</CombinedGeometry.Geometry2>
		</CombinedGeometry>                
	</Image.Clip>
</Image>

效果图如下：