Поделиться через

Как отклонить элемент

  • Статья

В этом примере показано, как использовать SkewTransform для наклона элемента. Отклонение, которое также называется сдвигом, является преобразованием, растягивающим пространство координат неоднородно. Одним из типичных вариантов использования SkewTransform является имитация трехмерной глубины в 2D-объектах.

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

Используйте свойства AngleX и AngleY, чтобы указать угол разбиения оси x и оси 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>

В следующем примере на 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>

На следующем рисунке показаны различные отклонения, используемые в этом примере.

примеры SkewTransform
Три примера SkewTransform, иллюстрированные

Полный пример см. в разделе пример преобразования 2D.

См. также