Share via

Xamarin.Forms 図形: パスの変換

  • [アーティクル]

Transform は、Path オブジェクトをある座標空間から別の座標空間に変換する方法を定義します。 変換が Path オブジェクトに適用されると、UI でのオブジェクトのレンダリング方法が変わります。

変換は、回転、拡大縮小、傾斜、平行移動の 4 つの一般的な分類に分類できます。 Xamarin.Forms は、次の各変換分類のクラスを定義します。

  • RotateTransform。指定された Angle で Path を回転します。
  • ScaleTransform。指定された ScaleX と ScaleY で Path オブジェクトを拡大縮小します。
  • SkewTransform。指定された AngleX と AngleY で Path オブジェクトを傾斜させます。
  • TranslateTransform。指定された X と Y で Path オブジェクトを移動します。

Xamarin.Forms には、より複雑な変換を作成するための次のクラスも用意されています。

  • 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 オブジェクトを所定の位置に傾斜させるには、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>

次の例では、中心点 (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 単位分下に移動します。

複数の変換

Xamarin.Forms には、Path オブジェクトへの複数の変換の適用をサポートする 2 つのクラスがあります。 それは TransformGroup と CompositeTransform です。 TransformGroup は任意の順序で変換を実行し、CompositeTransform は特定の順序で変換を実行します。

変換グループ

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

Transform クラスから派生した TransformGroup クラスは、TransformCollection 型の Children プロパティを定義します。このプロパティは Transform オブジェクトのコレクションを表します。 このプロパティは、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 次元空間で変換を行う 3x3 アフィン変換行列の観点から説明できます。 この 3x3 行列は、Matrix 構造体で表されます。これは、3 行 3 列の double 値のコレクションです。

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

  • double 型の Determinant は、行列の行列式を取得します。
  • bool 型の HasInverse は、行列が可逆かどうかを示します。
  • Matrix 型の Identity は、単位行列を取得します。
  • bool 型の HasIdentity は、行列が単位行列かどうかを示します。
  • 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 など、行列値の操作に使用できる一連のメソッドを公開しています。

次の表は、Xamarin.Forms マトリックスの構造を示したものです。

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 次元の両方で引き伸ばされ、傾斜し、オフセットされます。

または、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、M21、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" />