次の方法で共有

パスの変換

  • [アーティクル]

Browse sample. サンプルを参照する

.NET マルチプラットフォーム アプリ UI (.NET MAUI) Transform は、Path オブジェクトをある座標空間から別の座標空間に変換する方法を定義します。 変換が Path オブジェクトに適用されると、UI でのオブジェクトのレンダリング方法が変わります。

変換は一般的に、回転、スケーリング、傾斜、移動の 4 つに分類できます。 .NET MAUI では、次の各変換分類のクラスが定義されています。

  • RotateTransform は、指定された Angle で Path を回転します。
  • ScaleTransform は、指定された ScaleX と ScaleY の量で Path オブジェクトをスケーリングします。
  • SkewTransform は、指定された AngleX と AngleY の量で Path オブジェクトを傾斜させます。
  • TranslateTransform は、指定された X と Y の量で Path オブジェクトを移動します。

.NET MAUI は、より複雑な変換を作成できるように、次のクラスも提供しています。

  • TransformGroup は、複数の変換オブジェクトで構成される複合変換を表します。
  • CompositeTransform は、複数の変換操作を Path オブジェクトに適用します。
  • MatrixTransform は、他の変換クラスで提供されていないカスタム変換を作成します。

これらのクラスはすべて、Transform クラスから派生します。このクラスは、現在の変換を Matrix オブジェクトとして表す、Matrix 型の Value プロパティを定義します。 これらのプロパティは、BindableProperty オブジェクトが基になっています。つまり、データ バインディングの対象にして、スタイルを設定できます。 Matrix 構造体の詳細については、「変換マトリクス」をご覧ください。

変換を Path に適用するには、変換クラスを作成し、それを Path.RenderTransform プロパティの値として設定します。

回転変換

回転変換は、2 次元 x-y 座標系の指定された点を中心に Path オブジェクトを時計回りに回転します。

Transform クラスから派生した RotateTransform クラスは、次のプロパティを定義します。

  • double 型の Angle は、時計回りの回転の角度を度単位で表します。 このプロパティの既定値は 0.0 です。
  • double 型の CenterX は、回転の中心点の x 座標を表します。 このプロパティの既定値は 0.0 です。
  • double 型の CenterY は、回転の中心点の 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 度回転します。

スケール変換

スケール変換は、Path オブジェクトを 2 次元 x-y 座標系でスケーリングします。

Transform クラスから派生した ScaleTransform クラスは、次のプロパティを定義します。

  • double 型の ScaleX は、X 軸のスケール係数を表します。 このプロパティの既定値は 1.0 です。
  • double 型の ScaleY は、Y 軸のスケール係数を表します。 このプロパティの既定値は 1.0 です。
  • double 型の CenterX は、変換の中心点の x 座標を表します。 このプロパティの既定値は 0.0 です。
  • double 型の CenterY は、この変換の中心点の 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 倍のサイズにスケーリングされます。

傾斜変換

傾斜変換は、2 次元 x-y 座標系で Path オブジェクトを歪め、2 次元オブジェクトに 3 次元の奥行きの錯覚を作成するのに役立ちます。

Transform クラスから派生した SkewTransform クラスで、次のプロパティを定義します。

  • double 型の AngleX は、Y 軸から反時計回りに度単位で測定される X 軸の傾斜角度を表します。 このプロパティの既定値は 0.0 です。
  • double 型の AngleY は、X 軸から反時計回りに度単位で測定される Y 軸のスキュー角度を表します。 このプロパティの既定値は 0.0 です。
  • double 型の CenterX は、変換の中心点の x 座標を表します。 このプロパティの既定値は 0.0 です。
  • double 型の CenterY は、変換の中心点の y 座標を表します。 このプロパティの既定値は 0.0 です。

これらのプロパティは、BindableProperty オブジェクトが基になっています。つまり、これらは、データ バインディングの対象にすることができ、スタイルを設定できます。

傾斜変換の効果を予測する際は、AngleX によって元の座標系に対して x 軸の値が傾斜することを考慮します。 したがって、AngleX が 30 の場合、y 軸が原点を中心に 30 度回転し、x の値がその原点から 30 度傾斜します。 同様に、AngleY が 30 の場合、Path オブジェクトの y 値が原点から 30 度傾斜します。

Note

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) から水平方向に 45 度の傾斜を Path オブジェクトに適用します。

移動変換

移動変換は、2 次元 x-y 座標系でオブジェクトを移動します。

Transform クラスから派生した TranslateTransform クラスで、次のプロパティを定義します。

  • double 型の X は、X 軸に沿って移動する距離を表します。 このプロパティの既定値は 0.0 です。
  • double 型の Y は、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 オブジェクトに複数の変換を適用できる 2 つのクラスがあります。 それは TransformGroup と CompositeTransform です。 TransformGroup は任意の順序で変換を実行し、CompositeTransform は特定の順序で変換を実行します。

変換グループ

変換グループは、複数の Transform オブジェクトで構成される複合変換を表します。

Transform クラスから派生した TransformGroup クラスで、Transform オブジェクトのコレクションを表す TransformCollection 型の Children プロパティを定義します。 これらのプロパティは、BindableProperty オブジェクトが基になっています。つまり、データ バインディングの対象にして、スタイルを設定できます。

変換の順序は、TransformGroup クラスを使用する複合変換で重要です。 たとえば、最初に回転し、拡大縮小してから、平行移動する場合と、最初に平行移動し、回転してから、拡大縮小する場合では、得られる結果が異なります。 順序が重要である理由の 1 つは、回転や拡大縮小などの変換が、座標系の原点に対して行われるということです。 原点を中心にして配置されているオブジェクトの拡大縮小と、原点から離れた位置に移動されたオブジェクトの拡大縮小では、異なる結果になります。 同様に、原点を中心にして配置されているオブジェクトの回転と、原点から離れた位置に移動されたオブジェクトの回転でも、異なる結果になります。

次の例は、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 クラスで、次のプロパティを定義します。

  • double 型の CenterX は、この変換の中心点の x 座標を表します。 このプロパティの既定値は 0.0 です。
  • double 型の CenterY は、この変換の中心点の y 座標を表します。 このプロパティの既定値は 0.0 です。
  • double 型の ScaleX は、X 軸のスケール係数を表します。 このプロパティの既定値は 1.0 です。
  • double 型の ScaleY は、Y 軸のスケール係数を表します。 このプロパティの既定値は 1.0 です。
  • double 型の SkewX は、Y 軸から反時計回りに度単位で測定される X 軸の傾斜角度を表します。 このプロパティの既定値は 0.0 です。
  • double 型の SkewY は、X 軸から反時計回りに度単位で測定される Y 軸の傾斜角度を表します。 このプロパティの既定値は 0.0 です。
  • double 型の Rotation は、時計回りの回転の角度を度単位で表します。 このプロパティの既定値は 0.0 です。
  • double 型の TranslateX は、x 軸に沿って移動する距離を表します。 このプロパティの既定値は 0.0 です。
  • double 型の TranslateY は、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 単位だけ移動します。

変換行列

変換は、2 次元空間で変換を実行する 3 x 3 アフィン変換行列で記述できます。 この 3 x 3 行列は、3 行と 3 列の double 値のコレクションである Matrix 構造体によって表されます。

Matrix 構造体は次のプロパティを定義します。

  • double 型の Determinant は、行列の行列式を取得します。
  • bool 型の HasInverse は、行列が可逆かどうかを示します。
  • Matrix 型の Identity は、単位行列を取得します。
  • bool 型の IsIdentity は、行列が単位行列であるかどうかを示します。
  • double 型の M11 は、行列の最初の行と最初の列の値を表します。
  • double 型の M12 は、行列の最初の行と 2 列目の値を表します。
  • 型 double の M21 は行列の 2 番目の行と最初の列の値を表します。
  • 型 double の M22 は行列の 2 番目の行と 2 番目の列の値を表します。
  • 型 double の OffsetX は行列の 3 番目の行と最初の列の値を表します。
  • 型 double の OffsetY は行列の 3 番目の行と 2 番目の列の値を表します。

OffsetX プロパティと OffsetY プロパティには、それぞれ x 軸と y 軸に沿って座標空間を移動する量を指定するため、そのような名前が付けられます。

さらに、Matrix 構造体は、行列の値を操作するために使用できる一連のメソッドを公開します。これにはAppend、Invert、Multiply、Prepend など、多くのメソッドが含まれます。

次のテーブルは、 .NET MAUI 行列の構造を示したものです。

M11

M12

0.0

M21

M22

0.0

OffsetX

OffsetY

1.0

Note

アフィン変換行列の最後の列は (0, 0, 1) に等しいため、最初の 2 列のメンバーのみを指定する必要があります。

行列の値を操作することで、Path オブジェクトを回転、スケーリング、傾斜、移動させることができます。 たとえば、OffsetX 値を 100 に変更すると、Path オブジェクトを x 軸に沿ってデバイスに依存しない 100 単位分移動できます。 M22 値を 3 に変更すると、Path オブジェクトの高さを現在の 3 倍に拡張できます。 両方の値を変更した場合は、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 プロパティは、M21、M11、M12、M22、OffsetX、OffsetY の 6 つのメンバーで構成されるコンマ区切りの文字列として指定されます。 この例では、メンバーはコンマ区切りですが、1 つ以上のスペースで区切ることもできます。

さらに、前の例は、RenderTransform プロパティの値と同じ 6 つのメンバーを指定することでさらに簡略化できます。

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