WPF系列十一：图形控件RectangleGeometry

简介

RectangleGeometry 是 WPF (Windows Presentation Foundation) 中用于定义矩形几何形状的一个几何对象。RectangleGeometry 通常与 Path 控件一起使用来绘制矩形，并且可以用来创建具有圆角的矩形。

定义矩形 ：RectangleGeometry 主要用于描述一个矩形区域，可以通过设置矩形的位置和尺寸来定义。
参与绘制 ：虽然 RectangleGeometry 本身不直接绘制任何内容，但它作为 Path 元素的数据源，允许你通过 Path 来绘制矩形。
支持圆角 ：可以通过设置 RadiusX 和 RadiusY 属性来创建带有圆角的矩形。

属性

Rect ：指定矩形的位置（左上角坐标）和大小（宽度和高度）。这个属性接受一个 Rect 结构体，该结构体定义了矩形的边界框。
RadiusX 和 RadiusY ：这两个属性分别指定了矩形四个角的水平半径和垂直半径。当它们被设置为非零值时，矩形的角落会被圆滑处理。RadiusX 和 RadiusY 的最大值分别是矩形宽度的一半和高度的一半。如果设定了这些值，则矩形将拥有圆角。
Transform ：允许对 RectangleGeometry 应用变换，如旋转、缩放、平移等。这使得你可以轻松地调整矩形的位置或改变其外观而不必修改原始几何数据。
- TranslateTransform：用于移动（平移）对象。
- ScaleTransform：用于缩放对象。
- RotateTransform：用于旋转对象。
- SkewTransform：用于倾斜对象。
- MatrixTransform：使用矩阵来定义更复杂的变换。
- **TransformGroup:**组合变换。

示例

绘制一个带圆角的矩形

代码：

cs 复制代码

<Window x:Class="WPFDemo.Line.Views.RectangleGeometryWindow"
        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="RectangleGeometryWindow" Height="450" Width="800">
    <Grid>
        <!--定义一个带圆角的矩形-->
        <Path Stroke="Red" StrokeThickness="2" Fill="Yellow">
            <Path.Data>
                <RectangleGeometry Rect="300,150,200,100" RadiusX="20"  RadiusY="20"/>
            </Path.Data>
        </Path>
    </Grid>
</Window>

效果：

平移变换（TranslateTransform）

代码：

cs 复制代码

<Window x:Class="WPFDemo.Line.Views.RectangleGeometryWindow1"
        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="RectangleGeometryWindow1" Height="450" Width="800">
    <Grid>
        <!--定义一个带圆角的矩形-->
        <Path Stroke="Red" StrokeThickness="2" Fill="Yellow">
            <Path.Data>
                <RectangleGeometry Rect="300,150,200,100" RadiusX="20"  RadiusY="20"/>
            </Path.Data>
        </Path>

        <!--平移变换-->
        <Path Stroke="Blue" StrokeThickness="2" Fill="Green">
            <Path.Data>
                <RectangleGeometry Rect="300,150,200,100" RadiusX="20"  RadiusY="20">
                    <RectangleGeometry.Transform>
                        <TranslateTransform X="100" Y="0"/>
                    </RectangleGeometry.Transform>
                </RectangleGeometry>
            </Path.Data>
        </Path>
    </Grid>
</Window>

效果：

旋转变换（ScaleTransform）

代码：

cs 复制代码

<Window x:Class="WPFDemo.Line.Views.RectangleGeometryWindow2"
        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="RectangleGeometryWindow2" Height="450" Width="800">
    <Grid>
        <!--定义一个带圆角的矩形-->
        <Path Stroke="Red" StrokeThickness="2" Fill="Yellow">
            <Path.Data>
                <RectangleGeometry Rect="300,150,200,100" RadiusX="20"  RadiusY="20"/>
            </Path.Data>
        </Path>

        <!--旋转变换-->
        <Path Stroke="Blue" StrokeThickness="2" Fill="Green">
            <Path.Data>
                <RectangleGeometry Rect="300,150,200,100" RadiusX="20"  RadiusY="20">
                    <RectangleGeometry.Transform>
                        <RotateTransform CenterX="300" CenterY="100" Angle="90"/>
                    </RectangleGeometry.Transform>
                </RectangleGeometry>
            </Path.Data>
        </Path>
    </Grid>
</Window>

效果：

缩放变换（RotateTransform）

代码：

cs 复制代码

<Window x:Class="WPFDemo.Line.Views.RectangleGeometryWindow3"
        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="RectangleGeometryWindow3" Height="450" Width="800">
    <Grid>
        <!--定义一个带圆角的矩形-->
        <Path Stroke="Red" StrokeThickness="2" Fill="Yellow">
            <Path.Data>
                <RectangleGeometry Rect="300,150,200,100" RadiusX="20"  RadiusY="20"/>
            </Path.Data>
        </Path>

        <!--缩放变换-->
        <Path Stroke="Blue" StrokeThickness="2" Fill="Green">
            <Path.Data>
                <RectangleGeometry Rect="300,150,200,100" RadiusX="20"  RadiusY="20">
                    <RectangleGeometry.Transform>
                        <ScaleTransform ScaleX="0.8" ScaleY="0.8" />
                    </RectangleGeometry.Transform>
                </RectangleGeometry>
            </Path.Data>
        </Path>
    </Grid>
</Window>

效果：

组合变换（TransformGroup）

代码：

cs 复制代码

<Window x:Class="WPFDemo.Line.Views.RectangleGeometryWindow4"
        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="RectangleGeometryWindow4" Height="450" Width="800">
    <Grid>
        <Grid>
            <!--定义一个带圆角的矩形-->
            <Path Stroke="Red" StrokeThickness="2" Fill="Yellow">
                <Path.Data>
                    <RectangleGeometry Rect="300,150,200,100" RadiusX="20"  RadiusY="20"/>
                </Path.Data>
            </Path>

            <!--组合变换-->
            <Path Stroke="Blue" StrokeThickness="2" Fill="Green">
                <Path.Data>
                    <RectangleGeometry Rect="300,150,200,100" RadiusX="20"  RadiusY="20">
                        <RectangleGeometry.Transform>
                            <TransformGroup>
                                <TranslateTransform X="100" Y="0"/>
                                <RotateTransform CenterX="300" CenterY="100" Angle="90"/>
                                <ScaleTransform ScaleX="0.8" ScaleY="0.8" />
                            </TransformGroup>
                        </RectangleGeometry.Transform>
                    </RectangleGeometry>
                </Path.Data>
            </Path>
        </Grid>
    </Grid>
</Window>

效果：