方法: 要素を傾斜させる

  • [アーティクル]

この例では、SkewTransform を使用して要素を傾斜させる方法を示します。 傾斜 (スキューと呼ばれることもあります) は、一様でない方法で座標空間を拡大する変換です。 SkewTransform の一般的な用途の 1 つは、2D オブジェクトで 3D の奥行をシミュレートすることです。

SkewTransform の中心点を指定するには、CenterX および CenterY プロパティを使用します。

x 軸と y 軸の傾斜角度を指定し、これらの軸に沿って現在の座標系を傾斜させるには、AngleX および AngleY プロパティを使用します。

傾斜変換の効果を予測する際は、AngleX によって元の座標系に対して x 軸の値が傾斜することを考慮します。 したがって、AngleX が 30 の場合、y 軸が原点を中心に 30 度回転し、x の値がその原点から 30 度傾斜します。 同様に、AngleY が 30 の場合、図形の y 値が原点から 30 度傾斜します。 これは、座標系の x または y での 30 度の平行移動 (移動) と同じ効果はないことに注意してください。

次の例では、中心点 (0, 0) から水平方向に 45 度の傾斜を Rectangle に適用します。

例

<Rectangle 
  Height="50" Width="50" Fill="#CCCCCCFF" 
  Stroke="Blue" StrokeThickness="2"
  Canvas.Left="100" Canvas.Top="100">
  <Rectangle.RenderTransform>

     <!-- Applies a horizontal skew of 45 degrees 
          from a center point of (0,0). -->             
    <SkewTransform CenterX="0" CenterY="0" AngleX="45" AngleY="0" />
  </Rectangle.RenderTransform>
</Rectangle>

次の例では、中心点 (25,25) から水平方向に 45 度の傾斜を Rectangle に適用します。

<Rectangle Height="50" Width="50" Fill="#CCCCCCFF"
  Canvas.Left="100" Canvas.Top="100" 
  Stroke="Blue" StrokeThickness="2">
  <Rectangle.RenderTransform>
  
     <!-- Applies a horizontal skew of 45 degrees 
          from a center point of (25,25). -->  
    <SkewTransform CenterX="25" CenterY="25" AngleX="45" AngleY="0" />
  </Rectangle.RenderTransform>
</Rectangle>

次の例では、中心点 (25,25) から垂直方向に 45 度の傾斜を Rectangle に適用します。

<Rectangle Height="50" Width="50" Fill="#CCCCCCFF" 
  Stroke="Blue" StrokeThickness="2"
  Canvas.Left="100" Canvas.Top="100">
  <Rectangle.RenderTransform>
  
     <!-- Applies a vertical skew of 45 degrees 
          from a center point of (25,25). -->             
    <SkewTransform CenterX="25" CenterY="25" AngleX="0" AngleY="45" />
  </Rectangle.RenderTransform>
</Rectangle>

次の図は、この例で使用されている各種の傾斜を示しています。

SkewTransform examples
説明した 3 つの SkewTransform の例

サンプル全体については、「2D 変換のサンプル」をご覧ください。

関連項目