Практическое руководство. Отклонение элемента

  • Статья

В этом примере показано, как использовать SkewTransform, чтобы «отклонить» элемент. Отклонение (или срез) — это преобразование, которое неравномерно растягивает пространство координат. Одно из типичных применений SkewTransform - для моделирования объема для двумерных объектов.

Используйте свойства CenterX и CenterY, чтобы указать центральную точку для SkewTransform.

Используйте свойства AngleX и AngleY, чтобы указать угол отклонения оси Х и оси Y и отклонить текущую систему координат вдоль этих осей.

Чтобы спрогнозировать результат отклонения, учтите, что AngleX отклоняет значения оси X относительно исходной системы координат. Таким образом, для AngleX величиной 30 ось Y поворачивается на 30 градусов относительно начала координат. При этом значения на оси X сдвигаются на 30 градусов от начала координат. Аналогично, AngleY, равный 30, сдвигает значения на оси Y фигуры на 30 градусов от начала координат. Обратите внимание, что это не то же самое, что перенос (перемещение) системы координат на 30 градусов по осям X и Y.

В следующем примере применяется горизонтальное отклонение на 45 градусов к Rectangle относительно центральной точки (0, 0).

Пример

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

В следующем примере применяется горизонтальное отклонение на 45 градусов к Rectangle относительно центральной точки (25, 25).

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

В следующем примере применяется вертикальное отклонение на 45 градусов к Rectangle относительно центральной точки (25, 25).

<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
Показаны три примера SkewTransform

Полный пример см. на странице примера двумерного преобразования.

См. также