路徑轉換

流覽範例

.NET 多平臺應用程式 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，它會建立其他轉換類別未提供的自定義轉換。

所有這些類別都是衍生自 Transform 類別，該類別會 Value 定義 型 Matrix別 的屬性，該屬性代表目前轉換做為 Matrix 物件。 這個屬性是由 BindableProperty 物件所支援，這表示它可以是數據系結的目標，並設定樣式。 如需結構的詳細資訊 Matrix ，請參閱 轉換矩陣。

若要將轉換套用至 Path，您可以建立轉換類別，並將它設定為 屬性的值 Path.RenderTransform 。

旋轉轉換

旋轉轉換會 Path 順時針旋轉 2D x-y 座標系統中指定點的物件。

RotateTransform衍生自 類別的 Transform 類別會定義下列屬性：

• Angle型 double別為 的 ，代表順時針旋轉的角度，以度為單位。 此屬性的預設值為 0.0。
• CenterX型 double別為 的 ，表示旋轉中心點的 X 座標。 此屬性的預設值為 0.0。
• CenterY型 double別為 的 ，代表旋轉中心點的 Y 座標。 此屬性的預設值為 0.0。

這些屬性是由 BindableProperty 物件所支援，這表示這些屬性可以是數據系結的目標，並設定樣式。

CenterX和 CenterY 屬性會指定物件旋轉的Path點。 這個中心點會以已轉換之物件的座標空間表示。 根據預設，旋轉會套用至物件左上角 Path 的 （0,0）。

下列範例示範如何旋轉 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 度。

調整轉換

縮放轉換會 Path 縮放 2D x-y 座標系統中的物件。

ScaleTransform衍生自 類別的 Transform 類別會定義下列屬性：

• ScaleX型別為 double的 ，表示 X 軸縮放比例。 此屬性的預設值為 1.0。
• ScaleY型別為 double的 ，表示 Y 軸縮放比例。 此屬性的預設值為 1.0。
• CenterX型 double別為 的 ，表示這個轉換中心點的 X 座標。 此屬性的預設值為 0.0。
• CenterY型 double別為 的 ，表示這個轉換中心點的 Y 座標。 此屬性的預設值為 0.0。

這些屬性是由 BindableProperty 物件所支援，這表示這些屬性可以是數據系結的目標，並設定樣式。

和 的值ScaleXScaleY會對產生的縮放產生巨大影響：

• 介於 0 和 1 之間的值會減少縮放物件的寬度和高度。
• 大於 1 的值會增加縮放物件的寬度和高度。
• 值為 1 表示物件未縮放。
• 負值會水準和垂直翻轉小數字數物件。
• 介於 0 和 -1 之間的值會翻轉縮放物件，並降低其寬度和高度。
• 小於 -1 的值會翻轉物件，並增加其寬度和高度。
• -1 的值會翻轉縮放物件，但不會變更其水準或垂直大小。

CenterX和 CenterY 屬性會指定物件縮放的Path點。 這個中心點會以已轉換之物件的座標空間表示。 根據預設，縮放會套用至 物件左上角 Path 的 （0,0）。 這會影響移動 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 倍。

扭曲轉換

扭曲轉換會扭曲 Path 2D x-y 座標系統中的對象，並且有助於在 2D 物件中建立 3D 深度的錯覺。

SkewTransform衍生自 類別的 Transform 類別會定義下列屬性：

• 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 度。 同樣地，30 的 會 AngleY 從原點扭曲物件的 y 值 Path 30 度。

注意

若要就地扭曲Path物件，請將 和 CenterY 屬性設定CenterX為物件的中心點。

下列範例示範如何扭曲 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>

在此範例中，水平誤差為 45 度，會套用至 Path 物件，從中心點 （0,0）。

翻譯轉換

平移轉換會移動 2D x-y 座標系統中的物件。

TranslateTransform衍生自 類別的 Transform 類別會定義下列屬性：

• 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 物件組成的復合轉換。

衍生 TransformGroup 自 類別的 Transform 類別會定義 Children 型 TransformCollection別 的屬性，代表 物件的集合 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 度。

複合轉換

複合轉換會將多個轉換套用至 物件。

CompositeTransform衍生自 類別的 Transform 類別會定義下列屬性：

• 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 個裝置獨立單位轉譯。

轉換矩陣

在 2D 空間中執行轉換的 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，您可以使用它沿著 X 軸移動 Path 與裝置無關的 100 個單位。 如果您將 M22 值變更為 3，您可以使用該值將物件延展 Path 至目前高度的三倍。 如果您變更這兩個值，則會沿著 X 軸移動 Path 物件 100 個裝置獨立單位，並將其高度縮放為 3。 此外，相合轉換矩陣可以乘以形成任意數目的線性轉換，例如旋轉和扭曲，後面接著轉譯。

自訂轉換

衍生 MatrixTransform 自 類別的 Transform 類別會定義 Matrix 型 Matrix 別 的屬性，代表定義轉換的矩陣。 這個屬性是由 BindableProperty 物件所支援，這表示它可以是資料系結的目標，並設定樣式。

您可以使用 、、 ScaleTransform 或 物件來描述 TranslateTransform 的任何轉換，都可以由 一般描述 MatrixTransform 。 SkewTransform RotateTransform 不過， TranslateTransform 、 RotateTransform ScaleTransform 和 SkewTransform 類別比在 中 Matrix 設定向量元件更容易概念化。 因此，類別 MatrixTransform 通常用來建立 、 ScaleTransform 、 SkewTransform 或 TranslateTransform 類別未提供的 RotateTransform 自訂轉換。

下列範例示範如何使用 來轉換 Path 物件 MatrixTransform ：

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