Xamarin.Forms 圖形：路徑轉換

Transform定義如何將物件從一個座標空間轉換成Path另一個座標空間。 將轉換套用至 Path 物件時，它會變更物件在UI中呈現的方式。

轉換可以分類為四個一般分類：旋轉、縮放、扭曲和翻譯。 Xamarin.Forms 定義每個轉換類別的類別：

• RotateTransform，由指定的Angle旋轉 Path 。
• ScaleTransform，其會依指定的 ScaleX 和 ScaleY 數量來調整 Path 物件。
• SkewTransform，其會依指定的 AngleX 和 AngleY 數量扭曲 Path 物件。
• TranslateTransform，其會依指定的 X 和 Y 數量移動 Path 物件。

Xamarin.Forms 也提供下列類別來建立更複雜的轉換：

• 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個裝置獨立單位向下移動。

多個轉換

Xamarin.Forms 有兩個 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別為 的 ，其會取得識別矩陣。
• HasIdentity型 bool別為 的 ，指出矩陣是否為識別矩陣。
• M11型 double別為 的 ，表示矩陣第一列和第一欄的值。
• M12型 double別為 的 ，表示矩陣第一列和第二欄的值。
• M21型 double別為 ，表示矩陣第二列和第一欄的值。
• M22型 double別為 ，表示矩陣第二列和第二欄的值。
• OffsetX型 double別為 ，表示矩陣第三列和第一欄的值。
• OffsetY型 double別為 的 ，表示矩陣第三列和第二欄的值。

和 OffsetX OffsetY 屬性會命名為 ，因為它們會指定分別沿著 x 軸和 y 軸轉譯座標空間的數量。

此外，Matrix結構會公開一系列可用來操作矩陣值的方法，包括Append、 InvertMultiplyPrepend 和 等等。

下表顯示矩陣的結構 Xamarin.Forms ：

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、 RotateTransformScaleTransform和 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 維度中延展、扭曲和位移。

或者，這可以使用內建 Xamarin.Forms的類型轉換器的簡化形式撰寫：

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

相關連結

• Xamarin.Forms 形狀