方法 : 要素を傾斜させる

[アーティクル]
08/09/2011

この例では、SkewTransform を使用して要素を傾斜させる方法を示します。傾斜とは、座標空間を不均等に伸縮させた変形のことで、シアとも呼ばれます。 SkewTransform の代表的な用途の 1 つとして、2-D オブジェクトでの 3-D 深度のシミュレートが挙げられます。

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

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

傾斜変形の結果を予測するには、AngleX によって、x 軸の値が元の座標系に対して相対的に傾斜すると考えます。つまり、AngleX が 30 の場合、y 軸が原点を中心に 30°回転し、x の値がその原点から 30°傾斜します。同様に、AngleY を 30 にすると、図形の y 値が原点から 30°傾斜します。座標系を x 方向または y 方向に 30°変換 (移動) した場合とは効果が異なる点に注意してください。

Rectangle に対して (0,0) を中心点とした水平方向 45°の傾斜を適用する例を次に示します。

使用例

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

Rectangle に対し、(25,25) を中心点として水平方向 45°の傾斜を適用する例を次に示します。

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

Rectangle に対し、(25,25) を中心点として垂直方向 45°の傾斜を適用する例を次に示します。

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

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

3 種類の SkewTransform の例を示した図

SkewTransform の例