WPF系列十二：图形控件CombinedGeometry

简介

CombinedGeometry 是 WPF (Windows Presentation Foundation) 中的一个几何对象，用于将两个几何图形组合成一个新的几何图形。它允许你通过不同的组合模式（如相交、并集、差集或异或）来创建复杂的形状。常与 Path 控件一起使用来绘制组合后的图形。

几何组合：可以将两个几何对象按照指定的方式进行组合，产生新的几何形状。
参与绘制 ：作为 Path 元素的数据源，用来绘制复杂图形。
与其他几何对象组合：能够进一步与其他几何对象结合，创建更复杂的图形设计。

属性

GeometryCombineMode ：定义了两个几何图形如何组合，有四种模式：
- Union：两个几何图形的并集，即合并所有区域。
- Intersect：两个几何图形的交集，只保留重叠部分。
- Xor：两个几何图形的异或，保留非重叠部分。
- Exclude：从第一个几何图形中排除第二个几何图形覆盖的区域。
Geometry1 和 Geometry2 ：分别表示要组合的第一个和第二个几何对象。它们可以是任何几何类型，例如 EllipseGeometry, RectangleGeometry, LineGeometry 等。
Transform：允许对 RectangleGeometry 应用变换，如旋转、缩放、平移等。这使得你可以轻松地调整矩形的位置或改变其外观而不必修改原始几何数据。
- TranslateTransform：用于移动（平移）对象。
- ScaleTransform：用于缩放对象。
- RotateTransform：用于旋转对象。
- SkewTransform：用于倾斜对象。
- MatrixTransform：使用矩阵来定义更复杂的变换。
- TransformGroup: 组合变换。

示例

组合矩形和椭圆绘制一个灯笼

代码：

cs 复制代码

<Window x:Class="WPFDemo.Line.Views.CombinedGeometry"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WPFDemo.Line.Views"
        mc:Ignorable="d"
        Title="CombinedGeometry" Height="450" Width="800">
    <Grid>
        <!--组合矩形和椭圆绘制一个灯笼-->
        <Path Stroke="Yellow" StrokeThickness="2" Fill="Red">
            <Path.Data>
                <CombinedGeometry GeometryCombineMode="Union">
                    <CombinedGeometry.Geometry1>
                        <EllipseGeometry  Center="400,200" RadiusX="200" RadiusY="100"/>
                    </CombinedGeometry.Geometry1>
                    <CombinedGeometry.Geometry2>
                        <RectangleGeometry  Rect="300,200,200,110"/>
                    </CombinedGeometry.Geometry2>
                </CombinedGeometry>
            </Path.Data>
        </Path>
    </Grid>
</Window>

效果：

平移变换（TranslateTransform）

代码：

cs 复制代码

<Window x:Class="WPFDemo.Line.Views.CombinedGeometry1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WPFDemo.Line.Views"
        mc:Ignorable="d"
        Title="CombinedGeometry1" Height="450" Width="800">
    <Grid>
        <!--组合矩形和椭圆绘制一个灯笼-->
        <Path Stroke="Yellow" StrokeThickness="2" Fill="Red">
            <Path.Data>
                <CombinedGeometry GeometryCombineMode="Union">
                    <CombinedGeometry.Geometry1>
                        <EllipseGeometry  Center="400,200" RadiusX="200" RadiusY="100"/>
                    </CombinedGeometry.Geometry1>
                    <CombinedGeometry.Geometry2>
                        <RectangleGeometry  Rect="300,200,200,110"/>
                    </CombinedGeometry.Geometry2>
                </CombinedGeometry>
            </Path.Data>
        </Path>

        <!--平移变换-->
        <Path Stroke="YellowGreen" StrokeThickness="2" Fill="PaleVioletRed">
            <Path.Data>
                <CombinedGeometry GeometryCombineMode="Union">
                    <CombinedGeometry.Geometry1>
                        <EllipseGeometry  Center="400,200" RadiusX="200" RadiusY="100"/>
                    </CombinedGeometry.Geometry1>
                    <CombinedGeometry.Geometry2>
                        <RectangleGeometry  Rect="300,200,200,110"/>
                    </CombinedGeometry.Geometry2>
                    <CombinedGeometry.Transform>
                        <TranslateTransform X="200" Y="0"/>
                    </CombinedGeometry.Transform>
                </CombinedGeometry>
            </Path.Data>
        </Path>
    </Grid>
</Window>

效果：

旋转变换（ScaleTransform）

代码：

cs 复制代码

<Window x:Class="WPFDemo.Line.Views.CombinedGeometry2"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WPFDemo.Line.Views"
        mc:Ignorable="d"
        Title="CombinedGeometry2" Height="450" Width="800">
    <Grid>
        <!--组合矩形和椭圆绘制一个灯笼-->
        <Path Stroke="Yellow" StrokeThickness="2" Fill="Red">
            <Path.Data>
                <CombinedGeometry GeometryCombineMode="Union">
                    <CombinedGeometry.Geometry1>
                        <EllipseGeometry  Center="400,200" RadiusX="200" RadiusY="100"/>
                    </CombinedGeometry.Geometry1>
                    <CombinedGeometry.Geometry2>
                        <RectangleGeometry  Rect="300,200,200,110"/>
                    </CombinedGeometry.Geometry2>
                </CombinedGeometry>
            </Path.Data>
        </Path>

        <!--旋转变换-->
        <Path Stroke="YellowGreen" StrokeThickness="2" Fill="PaleVioletRed">
            <Path.Data>
                <CombinedGeometry GeometryCombineMode="Union">
                    <CombinedGeometry.Geometry1>
                        <EllipseGeometry  Center="400,200" RadiusX="200" RadiusY="100"/>
                    </CombinedGeometry.Geometry1>
                    <CombinedGeometry.Geometry2>
                        <RectangleGeometry  Rect="300,200,200,110"/>
                    </CombinedGeometry.Geometry2>
                    <CombinedGeometry.Transform>
                        <RotateTransform CenterX="300" CenterY="100" Angle="90"/>
                    </CombinedGeometry.Transform>
                </CombinedGeometry>
            </Path.Data>
        </Path>
    </Grid>
</Window>

效果：

缩放变换（RotateTransform）

代码：

cs 复制代码

<Window x:Class="WPFDemo.Line.Views.CombinedGeometry3"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WPFDemo.Line.Views"
        mc:Ignorable="d"
        Title="CombinedGeometry3" Height="450" Width="800">
    <Grid>
        <!--组合矩形和椭圆绘制一个灯笼-->
        <Path Stroke="Yellow" StrokeThickness="2" Fill="Red">
            <Path.Data>
                <CombinedGeometry GeometryCombineMode="Union">
                    <CombinedGeometry.Geometry1>
                        <EllipseGeometry  Center="400,200" RadiusX="200" RadiusY="100"/>
                    </CombinedGeometry.Geometry1>
                    <CombinedGeometry.Geometry2>
                        <RectangleGeometry  Rect="300,200,200,110"/>
                    </CombinedGeometry.Geometry2>
                </CombinedGeometry>
            </Path.Data>
        </Path>

        <!--缩放变换-->
        <Path Stroke="YellowGreen" StrokeThickness="2" Fill="PaleVioletRed">
            <Path.Data>
                <CombinedGeometry GeometryCombineMode="Union">
                    <CombinedGeometry.Geometry1>
                        <EllipseGeometry  Center="400,200" RadiusX="200" RadiusY="100"/>
                    </CombinedGeometry.Geometry1>
                    <CombinedGeometry.Geometry2>
                        <RectangleGeometry  Rect="300,200,200,110"/>
                    </CombinedGeometry.Geometry2>
                    <CombinedGeometry.Transform>
                        <ScaleTransform ScaleX="0.8" ScaleY="0.8" />
                    </CombinedGeometry.Transform>
                </CombinedGeometry>
            </Path.Data>
        </Path>
    </Grid>
</Window>

效果：

组合变换（TransformGroup）

代码：

cs 复制代码

<Window x:Class="WPFDemo.Line.Views.CombinedGeometry4"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        xmlns:local="clr-namespace:WPFDemo.Line.Views"
        mc:Ignorable="d"
        Title="CombinedGeometry4" Height="450" Width="800">
    <Grid>
        <!--组合矩形和椭圆绘制一个灯笼-->
        <Path Stroke="Yellow" StrokeThickness="2" Fill="Red">
            <Path.Data>
                <CombinedGeometry GeometryCombineMode="Union">
                    <CombinedGeometry.Geometry1>
                        <EllipseGeometry  Center="400,200" RadiusX="200" RadiusY="100"/>
                    </CombinedGeometry.Geometry1>
                    <CombinedGeometry.Geometry2>
                        <RectangleGeometry  Rect="300,200,200,110"/>
                    </CombinedGeometry.Geometry2>
                </CombinedGeometry>
            </Path.Data>
        </Path>

        <!--组合变换-->
        <Path Stroke="YellowGreen" StrokeThickness="2" Fill="PaleVioletRed">
            <Path.Data>
                <CombinedGeometry GeometryCombineMode="Union">
                    <CombinedGeometry.Geometry1>
                        <EllipseGeometry  Center="400,200" RadiusX="200" RadiusY="100"/>
                    </CombinedGeometry.Geometry1>
                    <CombinedGeometry.Geometry2>
                        <RectangleGeometry  Rect="300,200,200,110"/>
                    </CombinedGeometry.Geometry2>
                    <CombinedGeometry.Transform>
                        <TransformGroup>
                            <TranslateTransform X="200" Y="0"/>
                            <RotateTransform CenterX="300" CenterY="100" Angle="90"/>
                            <ScaleTransform ScaleX="0.8" ScaleY="0.8" />
                        </TransformGroup>
                    </CombinedGeometry.Transform>
                </CombinedGeometry>
            </Path.Data>
        </Path>
    </Grid>
</Window>

效果：