路径转换

浏览示例

.NET Multi-platform App UI (.NET MAUI) Transform 定义如何将 Path 对象从一个坐标空间转换到另一个坐标空间。 对 Path 对象应用转换时，它会更改对象在 UI 中的呈现方式。

转换可分为四种常规分类：旋转、缩放、倾斜和平移。 .NET MAUI 为每种转换分类定义一个类：

• RotateTransform，可按指定的 Angle 旋转 Path。
• ScaleTransform，可按指定的 ScaleX 和 ScaleY 量值缩放 Path 对象。
• SkewTransform，可按指定的 AngleX 和 AngleY 量值倾斜 Path 对象。
• TranslateTransform，可按指定的 X 和 Y 量值移动 Path 对象。

为了创建更复杂的转换，.NET MAUI 还提供以下类：

• TransformGroup，表示由多个转换对象组成的复合转换。
• CompositeTransform，可将多个转换操作应用于一个 Path 对象。
• MatrixTransform，用于创建其他转换类不提供的自定义转换。

所有这些类都派生自定义类型为 Matrix 的 Value 属性的 Transform 类，该属性将当前转换表示为 Matrix 对象。 此属性由 BindableProperty 对象提供支持，这意味着它可以作为数据绑定的目标，并进行样式设置。 有关 Matrix 结构的更多信息，请参阅转换矩阵。

若要将转换应用于 Path，需创建转换类并将其设置为 Path.RenderTransform 属性的值。

旋转转换

旋转转换使 Path 对象围绕二维 x-y 坐标系中的指定点按顺时针方向旋转。

派生自 Transform 类的 RotateTransform 类定义以下属性：

• Angle，类型为 double，表示顺时针旋转的角度（以度为单位）。 此属性的默认值为 0.0。
• CenterX，类型为 double，表示旋转中心点的 x 坐标。 此属性的默认值为 0.0。
• CenterY，类型为 double，表示旋转中心点的 y 坐标。 此属性的默认值为 0.0。

这些属性由 BindableProperty 对象提供支持；也就是说，它们可以作为数据绑定的目标，并能进行样式设置。

CenterX 和 CenterY 属性指定 Path 对象围绕其旋转的点。 此中心点以转换对象的坐标空间表示。 默认情况下，会在 (0,0) 应用旋转，即 Path 对象的左上角。

以下示例展示了如何旋转 Path 对象：

<Path Stroke="Black"
      Aspect="Uniform"
      HorizontalOptions="Center"
      HeightRequest="100"
      WidthRequest="100"
      Data="M13.908992,16.207977L32.000049,16.207977 32.000049,31.999985 13.908992,30.109983z">
    <Path.RenderTransform>
        <RotateTransform CenterX="0"
                         CenterY="0"
                         Angle="45" />
    </Path.RenderTransform>
</Path>

在此示例中，Path 对象围绕其左上角旋转 45 度。

缩放转换

缩放转换可缩放二维 x-y 坐标系中的 Path 对象。

派生自 Transform 类的 ScaleTransform 类定义以下属性：

• ScaleX，类型为 double，表示 x 轴缩放系数。 此属性的默认值为1.0。
• ScaleY，类型为 double，表示 y 轴缩放系数。 此属性的默认值为1.0。
• CenterX，类型为 double，表示此转换中心点的 x 坐标。 此属性的默认值为 0.0。
• CenterY，类型为 double，表示此转换中心点的 y 坐标。 此属性的默认值为 0.0。

这些属性由 BindableProperty 对象提供支持；也就是说，它们可以作为数据绑定的目标，并能进行样式设置。

ScaleX 和 ScaleY 的值对缩放结果有巨大影响：

• 介于 0 和 1 之间的值会减小缩放对象的宽度和高度。
• 大于 1 的值会增加缩放对象的宽度和高度。
• 值等于 1 指示对象未缩放。
• 负值指示水平和垂直翻转缩放对象。
• 介于 0 和 -1 之间的值翻转缩放对象并减小其宽度和高度。
• 小于 -1 的值翻转对象并增加其宽度和高度。
• 值等于 -1 翻转缩放对象，但不更改其水平或垂直大小。

CenterX 和 CenterY 属性指定 Path 对象围绕其缩放的点。 此中心点以转换对象的坐标空间表示。 默认情况下，缩放会应用到 (0,0)，即 Path 对象的左上角。 这样做的效果是移动 Path 对象并使其看起来更大，因为在应用转换时会更改 Path 对象所在的坐标空间。

以下示例演示如何缩放 Path 对象：

<Path Stroke="Black"
      Aspect="Uniform"
      HorizontalOptions="Center"
      HeightRequest="100"
      WidthRequest="100"
      Data="M13.908992,16.207977L32.000049,16.207977 32.000049,31.999985 13.908992,30.109983z">
    <Path.RenderTransform>
        <ScaleTransform CenterX="0"
                        CenterY="0"
                        ScaleX="1.5"
                        ScaleY="1.5" />
    </Path.RenderTransform>
</Path>

在此示例中，Path 对象将缩放到 1.5 倍大小。

倾斜转换

倾斜转换将在 2D x-y 坐标系中倾斜 Path 对象，对于在 2D 对象中创建 3D 深度错觉非常有用。

从 Transform 类派生的 SkewTransform 类定义了以下属性：

• AngleX，类型为 double，表示 x 轴倾斜角，该角度从 y 轴逆时针方向测量得到（以度为单位）。 此属性的默认值为 0.0。
• AngleY，类型为 double，表示 y 轴倾斜角，该角度从 x 轴沿逆时针方向测量得到（以度为单位）。 此属性的默认值为 0.0。
• CenterX，类型为 double，表示转换中心的 x 坐标。 此属性的默认值为 0.0。
• CenterY，类型为 double，表示转换中心的 y 坐标。 此属性的默认值为 0.0。

这些属性由 BindableProperty 对象提供支持；也就是说，它们可以作为数据绑定的目标，并能进行样式设置。

若要预测扭曲转换的效果，请考虑 AngleX 相对于原始坐标系统扭曲 x 轴的值。 因此，当 AngleX 为 30 时，y 轴将沿原点旋转 30 度，并将 x 轴的值从该原点倾斜 30 度。 同样地，当 AngleY 为 30 时，Path 对象的 y 值将从原点倾斜 30 度。

注意

要在适当的位置倾斜 Path 对象，请将 CenterX 和 CenterY 属性设置为对象的中心点。

下面的示例演示如何倾斜 Path 对象：

<Path Stroke="Black"
      Aspect="Uniform"
      HorizontalOptions="Center"
      HeightRequest="100"
      WidthRequest="100"
      Data="M13.908992,16.207977L32.000049,16.207977 32.000049,31.999985 13.908992,30.109983z">
    <Path.RenderTransform>
        <SkewTransform CenterX="0"
                       CenterY="0"
                       AngleX="45"
                       AngleY="0" />
    </Path.RenderTransform>
</Path>

在此示例中，从中心点 (0,0) 向 Path 对象应用了 45 度的水平倾斜。

平移转换

平移转换在 2D x-y 坐标系中移动对象。

从 Transform 类派生的 TranslateTransform 类定义了以下属性：

• X，类型为 double，表示沿 x 轴移动的距离。 此属性的默认值为 0.0。
• Y，类型为 double，表示沿 y 轴移动的距离。 此属性的默认值为 0.0。

这些属性由 BindableProperty 对象提供支持；也就是说，它们可以作为数据绑定的目标，并能进行样式设置。

负 X 值将对象向左移动，而正值将对象向右移动。 负 Y 值将对象上移，而正值将对象下移。

下面的示例演示如何平移 Path 对象：

<Path Stroke="Black"
      Aspect="Uniform"
      HorizontalOptions="Center"
      HeightRequest="100"
      WidthRequest="100"
      Data="M13.908992,16.207977L32.000049,16.207977 32.000049,31.999985 13.908992,30.109983z">
    <Path.RenderTransform>
        <TranslateTransform X="50"
                            Y="50" />
    </Path.RenderTransform>
</Path>

在此示例中，Path 对象向右移动 50 个与设备无关的单位，向下移动 50 个与设备无关的单位。

多个转换

.NET MAUI 有两个类，支持将多个转换应用于 Path 对象。 它们是 TransformGroup 和 CompositeTransform。 TransformGroup 以任何所需的顺序执行转换，而 CompositeTransform 以特定的顺序执行转换。

转换组

转换组表示由多个 Transform 对象组成的复合转换。

从 Transform 类派生的 TransformGroup 类定义了 TransformCollection 类型的 Children 属性，该属性表示 Transform 对象的集合。 此属性由 BindableProperty 对象提供支持，这意味着它可以作为数据绑定的目标，并进行样式设置。

在使用 TransformGroup 类的复合转换中，转换的顺序非常重要。 例如，“先旋转再缩放后平移”与“先平移再旋转后缩放”得到的结果并不一样。 顺序很重要的一个原因是，像旋转和缩放这样的转换是相对于坐标系的原点执行的。 缩放以原点为中心的对象与缩放从原点移开的对象会产生不同的结果。 同样，旋转以原点为中心的对象产生的结果不同于旋转远离原点的对象所产生的结果。

下面的示例展示了如何使用 TransformGroup 类执行复合转换：

<Path Stroke="Black"
      Aspect="Uniform"
      HorizontalOptions="Center"
      HeightRequest="100"
      WidthRequest="100"
      Data="M13.908992,16.207977L32.000049,16.207977 32.000049,31.999985 13.908992,30.109983z">
    <Path.RenderTransform>
        <TransformGroup>
            <ScaleTransform ScaleX="1.5"
                            ScaleY="1.5" />
            <RotateTransform Angle="45" />
        </TransformGroup>
    </Path.RenderTransform>
</Path>

在此示例中，将 Path 对象缩放到其大小的 1.5 倍，然后旋转 45 度。

复合转换

复合转换可将多个转换应用于一个对象。

从 Transform 类派生的 CompositeTransform 类定义以下属性：

• CenterX，类型为 double，表示此转换中心点的 x 坐标。 此属性的默认值为 0.0。
• CenterY，类型为 double，表示此转换中心点的 y 坐标。 此属性的默认值为 0.0。
• ScaleX，类型为 double，表示 x 轴缩放系数。 此属性的默认值为1.0。
• ScaleY，类型为 double，表示 y 轴缩放系数。 此属性的默认值为1.0。
• SkewX，类型为 double，表示 x 轴倾斜角，该角度从 y 轴逆时针方向测量得到（以度数表示）。 此属性的默认值为 0.0。
• SkewY，类型为 double，表示 y 轴倾斜角，该角度从 x 轴逆时针方向测量得到（以度数表示）。 此属性的默认值为 0.0。
• Rotation，类型为 double，表示顺时针旋转的角度（以度数表示）。 此属性的默认值为 0.0。
• TranslateX，类型为 double，表示沿 x 轴移动的距离。 此属性的默认值为 0.0。
• TranslateY，类型为 double，表示沿 y 轴移动的距离。 此属性的默认值为 0.0。

这些属性由 BindableProperty 对象提供支持；也就是说，它们可以作为数据绑定的目标，并能进行样式设置。

CompositeTransform 按以下顺序应用转换：

1. 缩放（ScaleX 和 ScaleY）。
2. 倾斜（SkewX 和 SkewY）。
3. 旋转 (Rotation)。
4. 平移（TranslateX 和 TranslateY）。

如果要以不同的顺序对一个对象应用多个转换，则应创建 TransformGroup，并按预期顺序插入转换。

重要

CompositeTransform 对所有转换使用相同的中心点，即 CenterX 和 CenterY。 若要为每个转换指定不同的中心点，请使用 TransformGroup，

以下示例展示了如何使用 CompositeTransform 类执行复合转换：

<Path Stroke="Black"
      Aspect="Uniform"
      HorizontalOptions="Center"
      HeightRequest="100"
      WidthRequest="100"
      Data="M13.908992,16.207977L32.000049,16.207977 32.000049,31.999985 13.908992,30.109983z">
    <Path.RenderTransform>
        <CompositeTransform ScaleX="1.5"
                            ScaleY="1.5"
                            Rotation="45"
                            TranslateX="50"
                            TranslateY="50" />
    </Path.RenderTransform>
</Path>

在此示例中，将 Path 对象缩放到其大小的 1.5 倍，再旋转 45 度，然后平移 50 个设备无关单位。

转换矩阵

可以用在二维空间中执行转换的 3x3 仿射转换矩阵描述转换。 此 3x3 矩阵由 Matrix 结构表示，该结构是三行和三列 double 值的集合。

Matrix 结构定义以下属性：

• Determinant，类型为 double，用于获取矩阵的行列式。
• HasInverse，类型为 bool，用于指示矩阵是否不可逆。
• Identity，类型为 Matrix，用于获取标识矩阵。
• IsIdentity，类型为 bool，用于指示矩阵是否为标识矩阵。
• M11，类型为 double，表示矩阵的第一行和第一列的值。
• M12，类型为 double，表示矩阵的第一行和第二列的值。
• M21，类型为 double，表示矩阵的第二行和第一列的值。
• M22，类型为 double，表示矩阵的第二行和第二列的值。
• OffsetX，类型为 double，表示矩阵的第三行和第一列的值。
• OffsetY，类型为 double，表示矩阵的第三行和第二列的值。

之所以如此命名 OffsetX 和 OffsetY 属性，是因为它们分别指定沿 x 轴和 y 轴平移坐标空间的量。

此外，Matrix 结构还公开一系列可用于操作矩阵值的方法，包括 Append、Invert、Multiply、Prepend 等等。

下表显示了 .NET MAUI 矩阵的结构：

M11

M12

0.0

M21

M22

0.0

OffsetX

OffsetY

1.0

注意

仿射转换矩阵的最后一列等于 (0,0,1)，因此只需指定前两列中的成员。

通过操作矩阵值，可以旋转、缩放、倾斜和平移 Path 对象。 例如，如果将 OffsetX 值更改为 100，则可以使用它将 Path 对象沿 x 轴移动 100 个与设备无关的单位。 如果将 M22 值更改为 3，则可以使用它将 Path 对象拉伸到其当前高度的三倍。 如果同时更改这两个值，则将 Path 对象沿 x 轴移动 100 个与设备无关的单位，并将其高度拉伸至 3 倍。 此外，仿射转换矩阵还可以相乘以形成任意数量的线性转换，例如旋转和倾斜，然后再平移。

自定义转换

从 Transform 类派生的 MatrixTransform 类定义了 Matrix 类型的 Matrix 属性，该属性表示定义转换的矩阵。 此属性由 BindableProperty 对象提供支持，这意味着它可以作为数据绑定的目标，并进行样式设置。

可以用 TranslateTransform、ScaleTransform、RotateTransform 或 SkewTransform 对象描述的任何转换同样可以用 MatrixTransform 来描述。 但是，TranslateTransform、ScaleTransform、RotateTransform 和 SkewTransform 类比在 Matrix 中设置向量组件更容易概念化。 因此，MatrixTransform 类通常用于创建 RotateTransform、ScaleTransform、SkewTransform 或 TranslateTransform 类未提供的自定义转换。

下面的示例显示如何使用 MatrixTransform 转换 Path 对象：

<Path Stroke="Black"
      Aspect="Uniform"
      HorizontalOptions="Center"
      Data="M13.908992,16.207977L32.000049,16.207977 32.000049,31.999985 13.908992,30.109983z">
    <Path.RenderTransform>
        <MatrixTransform>
            <MatrixTransform.Matrix>
                <!-- M11 stretches, M12 skews -->
                <Matrix OffsetX="10"
                        OffsetY="100"
                        M11="1.5"
                        M12="1" />
            </MatrixTransform.Matrix>
        </MatrixTransform>
    </Path.RenderTransform>
</Path>

在此示例中，Path 对象在 X 和 Y 维度上都进行了拉伸、倾斜和偏移。

也可以使用.NET MAUI 中内置的类型转换器以简化的窗体编写此内容：

<Path Stroke="Black"
      Aspect="Uniform"
      HorizontalOptions="Center"
      Data="M13.908992,16.207977L32.000049,16.207977 32.000049,31.999985 13.908992,30.109983z">
    <Path.RenderTransform>
        <MatrixTransform Matrix="1.5,1,0,1,10,100" />
    </Path.RenderTransform>
</Path>

在此示例中，Matrix 属性被指定为以逗号分隔的字符串，该字符串由六个成员组成：M11, M12, M21, M22, OffsetX, OffsetY。 虽然在此示例中成员是以逗号分隔的，但它们也可以由一个或多个空格分隔。

此外，通过指定与 RenderTransform 属性的值相同的六个成员，可以进一步简化上一个示例：

<Path Stroke="Black"
      Aspect="Uniform"
      HorizontalOptions="Center"
      RenderTransform="1.5 1 0 1 10 100"
      Data="M13.908992,16.207977L32.000049,16.207977 32.000049,31.999985 13.908992,30.109983z" />