WPF系列十二:图形控件CombinedGeometry

简介

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

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

属性

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

    • TranslateTransform:用于移动(平移)对象。
    • ScaleTransform:用于缩放对象。
    • RotateTransform:用于旋转对象。
    • SkewTransform:用于倾斜对象。
    • MatrixTransform:使用矩阵来定义更复杂的变换。
    • TransformGroup:   组合变换。

示例

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

代码:

<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)

代码:

<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)

代码:

<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)

代码:

<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)

代码:

<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>

效果:

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

吉量*

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值