Share via

Общие сведения о классах Transform

  • Статья

Обновлен: Ноябрь 2007

В этом разделе описывается использование класса двухмерныйTransform для поворота, масштабирования, сдвига и наклона объектов FrameworkElement.

В этом разделе содержатся следующие подразделы.

  • Что такое Transform
  • Классы Transform
  • Общие свойства преобразований
  • Системы координат и преобразования
  • Преобразование FrameworkElement
  • Пример: Поворот элемента FrameworkElement на 45 градусов
  • Анимируемые преобразования
  • Возможности объектов Freezable
  • Связанные разделы

Что такое Transform

Transform определяет способ сопоставления или преобразования точек из одного координатного пространства в другое. Это сопоставление описано преобразованием Matrix, которое представляет собой коллекцию из трех строк с тремя столбцами, содержащую значения типа Double.

ms750596.alert_note(ru-ru,VS.90).gifПримечание.

Как и Microsoft, WPF (Windows Presentation Foundation) использует матрицы, основанные на строках. Векторы представляют собой строки, а не столбцы.

В следующей таблице показана структура матрицы WPF.

Матрица двумерного преобразования

M11

Значение по умолчанию: 1,0

M12

Значение по умолчанию: 0,0

0,0

M21

Значение по умолчанию: 0,0

M22

Значение по умолчанию: 1,0

0,0

OffsetX

Значение по умолчанию: 0,0

OffsetY

Значение по умолчанию: 0,0

1,0

Управляя значениями матрицы, можно поворачивать, масштабировать, наклонять и перемещать объект. Например, изменив значения в первом столбце третьей строки (значение OffsetX) на 100, можно переместить объект на 100 единиц вдоль оси X. Изменив значение во втором столбце второй строки на 3, можно растянуть объект в высоту в три раза от текущего размера. Если изменить оба значения, объект переместится на 100 единиц вдоль оси X и растянется в высоту с коэффициентом 3. Поскольку WPF (Windows Presentation Foundation) поддерживает только аффинные преобразования, значения в правом столбце всегда остаются равными 0, 0, 1. 

Не смотря на то, что WPF (Windows Presentation Foundation) дает возможность непосредственно управлять значениями матрицы, она также предоставляет несколько классов Transform, позволяющих преобразовывать объект, не зная структуры матрицы. Например, класс ScaleTransform позволяет масштабировать объект с помощью определения его свойств ScaleX и ScaleY вместо управления матрицей преобразования. Аналогично класс RotateTransform позволяет повернуть объект, просто задав его свойство Angle.

Классы Transform

WPF (Windows Presentation Foundation) предоставляет следующие классы двухмерныйTransform для общих операций преобразования:

Класс

Описание

Пример

Иллюстрация

RotateTransform

Поворачивает элемент на значение, заданное в Angle.

Практическое руководство. Вращение объекта

Иллюстрация вращения

ScaleTransform

Масштабирует элемент, используя коэффициенты, заданные в ScaleX и ScaleY.

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

Иллюстрация масштабирования

SkewTransform

Наклоняет элемент на коэффициенты, заданные в AngleX и AngleY.

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

Иллюстрация отклонения

TranslateTransform

Сдвигает элемент на расстояние, заданное в X и Y.

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

Иллюстрация изменения

Для совершения более сложных преобразований WPF (Windows Presentation Foundation) предоставляет следующие два класса:

Класс

Описание

Пример

TransformGroup

Группирует несколько объектов TransformGroup в один объект Transform, к которому затем можно применять преобразования свойств.

Практическое руководство. Применение нескольких преобразований к объекту

MatrixTransform

Создает настраиваемые преобразования, не предоставленные другими классами Transform. При использовании MatrixTransform происходит непосредственное управление матрицей.

Практическое руководство. Использование класса MatrixTransform для создания пользовательских преобразований

WPF (Windows Presentation Foundation) также предоставляет возможность трехмерный преобразований. Дополнительные сведения см. в описании класса Transform3D.

Общие свойства преобразований

Одним из способов преобразования объекта является объявление соответствующего типа Transform и применение его к свойству преобразования объекта. Для различных типов объектов существуют различные типы свойств преобразования. В следующей таблице перечислены несколько часто используемых типов WPF (Windows Presentation Foundation) и их свойства преобразования.

Тип

Свойства преобразования

Brush

Transform, RelativeTransform

ContainerVisual

Transform

DrawingGroup

Transform

FrameworkElement

RenderTransform, LayoutTransform

Geometry

Transform

TextEffect

Transform

UIElement

RenderTransform

Системы координат и преобразования

При преобразовании объекта происходит не просто его преобразование, а преобразование пространства координат, в котором существует объект. По умолчанию преобразование центрируется в начале координат целевого объекта (0,0). Единственным исключением является TranslateTransform; TranslateTransform не имеет свойства центра, так как результат смещения не зависит от выбора центра смещения.

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

Прямоугольный элемент, повернутый на 45 градусов относительно точки (0,0)
FrameworkElement, повернутый на 45 градусов на (0, 0)

<Canvas Width="200" Height="200">
  <Rectangle 
    Canvas.Left="100" Canvas.Top="100"
    Width="50" Height="50" 
    Fill="RoyalBlue" Opacity="1.0">
    <Rectangle.RenderTransform>
      <RotateTransform Angle="45" />
    </Rectangle.RenderTransform>
  </Rectangle>
</Canvas>

По умолчанию элемент поворачивается относительно своего левого верхнего угла, (0, 0). Классы RotateTransform, ScaleTransform и SkewTransform предоставляют свойства CenterX и CenterY, позволяющие задать точку, относительно которой применяется преобразование.

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

Прямоугольный элемент, повернутый на 45 градусов относительно точки (25, 25)
Геометрическая фигура, повернутая на 45 градусов на (25, 25)

<Canvas Width="200" Height="200">
  <Rectangle 
    Canvas.Left="100" Canvas.Top="100"
    Width="50" Height="50" 
    Fill="RoyalBlue" Opacity="1.0">
    <Rectangle.RenderTransform>
      <RotateTransform Angle="45" CenterX="25" CenterY="25" />
    </Rectangle.RenderTransform>
  </Rectangle>
</Canvas>

Преобразование FrameworkElement

Чтобы применить преобразования к FrameworkElement, создайте Transform и примените его к одному из двух свойств, предоставленных классом FrameworkElement:

  • LayoutTransform – преобразование, применяемое перед проходом разметки. После применения преобразования система макета обрабатывает преобразованные размер и положение элемента.

  • RenderTransform – преобразование, которое изменяет положение элемента, но применяется после завершения прохода разметки. Используя свойства RenderTransform вместо свойства LayoutTransform, можно увеличить производительность системы.

Какое свойство следует использовать? Ввиду предоставляемого повышения производительности используйте свойство RenderTransform везде, где это возможно, особенно при использовании анимированных объектов Transform. При масштабировании, повороте или наклоне применяется свойство LayoutTransform. Также требуется, чтобы родитель изменяемого элемента изменил свой размер в соответствии с изменениями своего дочернего элемента. Обратите внимание, что при использовании совместно со свойством LayoutTransform объекты TranslateTransform не вызывают видимых изменений в элементах. Это происходит потому, что, в ходе преобразования, система макета возвращает преобразуемый элемент на его исходную позицию.

Дополнительные сведения о макетах Windows Presentation Foundation (WPF) см. в разделе общих сведений Система макета.

Пример: Поворот элемента FrameworkElement на 45 градусов

В следующем примере для поворота кнопки по часовой стрелке на 45 градусов используется RotateTransform. Кнопка располагается в StackPanel, имеющей еще 2 кнопки.

По умолчанию RotateTransform поворачивается относительно точки (0, 0). Поскольку в примере не задано значение для центра, кнопка поворачивается относительно точки (0, 0), то есть верхнего левого угла. RotateTransform применяется к свойству RenderTransform. На следующей иллюстрации показан результат выполнения преобразования.

Поворот по часовой стрелке на 45 градусов относительно левого верхнего угла
Преобразованная кнопка с использованием RenderTransform

<Border Margin="30" 
  HorizontalAlignment="Left" VerticalAlignment="Top"
  BorderBrush="Black" BorderThickness="1" >
  <StackPanel Orientation="Vertical">
    <Button Content="A Button" Opacity="1" />
    <Button Content="Rotated Button">
      <Button.RenderTransform>
        <RotateTransform Angle="45" />
      </Button.RenderTransform>
    </Button>
    <Button Content="A Button" Opacity="1" />
  </StackPanel>
</Border>

В следующем примере также используется RotateTransform для поворота кнопки на 45 градусов по часовой стрелке, а также для RenderTransformOrigin кнопки задается значение (0,5, 0,5). Значение свойства RenderTransformOrigin зависит от размера кнопки. В результате, поворот выполняется относительно центра кнопки, а не ее верхнего левого угла. На следующей иллюстрации показан результат выполнения преобразования.

Поворот по часовой стрелке на 45 градусов относительно центра
Кнопка, преобразованная по центру

<Border Margin="30"   
  HorizontalAlignment="Left" VerticalAlignment="Top"
  BorderBrush="Black" BorderThickness="1">
  <StackPanel Orientation="Vertical">
    <Button Content="A Button" Opacity="1" />
    <Button Content="Rotated Button"
      RenderTransformOrigin="0.5,0.5">
      <Button.RenderTransform>
        <RotateTransform Angle="45" />
      </Button.RenderTransform>
    </Button>
    <Button Content="A Button" Opacity="1" />
  </StackPanel>
</Border>

В следующем примере для поворота кнопки используется свойство LayoutTransform вместо свойства RenderTransform. При этом преобразование влияет на макет кнопки, что запускает полный проход системы макета. В результате кнопка повернута и ее расположение изменено, поскольку изменился ее размер. На следующей иллюстрации показан результат выполнения преобразования.

Для поворота кнопки использовалось свойство LayoutTransform
Преобразованная кнопка с использованием LayoutTransform

<Border Margin="30"   
 HorizontalAlignment="Left" VerticalAlignment="Top"
 BorderBrush="Black" BorderThickness="1">
  <StackPanel Orientation="Vertical">

    <Button Content="A Button" Opacity="1" />   
    <Button Content="Rotated Button">
      <Button.LayoutTransform>
        <RotateTransform Angle="45"  />
      </Button.LayoutTransform>
    </Button>   
    <Button Content="A Button" Opacity="1" />
  </StackPanel>
</Border>

Анимируемые преобразования

Поскольку происходит наследование от класса Animatable, классы Transform должны быть анимированными. Чтобы анимировать Transform, примените анимацию совместимого типа к требуемому свойству.

В следующем примере используется Storyboard и DoubleAnimation с RotateTransform, чтобы заставить Button вращаться при нажатии.

<Page 
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  Title="Button Animated RotateTransform Example"
  Background="White" Margin="50">
  <StackPanel>



    <Button Content="A Button"
      RenderTransformOrigin="0.5,0.5">
      <Button.RenderTransform>
        <RotateTransform x:Name="AnimatedRotateTransform" Angle="0" />
      </Button.RenderTransform>
      <Button.Triggers>
        <EventTrigger RoutedEvent="Button.Click">
          <BeginStoryboard>
            <Storyboard>
              <DoubleAnimation 
                Storyboard.TargetName="AnimatedRotateTransform"
                Storyboard.TargetProperty="Angle" 
                To="360" Duration="0:0:1" FillBehavior="Stop" />
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
      </Button.Triggers>
    </Button>

  </StackPanel>
</Page>

Полный пример содержится в разделе Пример двумерных преобразований. Дополнительные сведения об анимации см. в разделе Общие сведения об эффектах анимации.

Возможности объектов Freezable

Поскольку класс наследуется от класса Freezable, класс Transform имеет несколько особенных возможностей: объекты класса Transform можно объявлять ресурсами, которые: могут совместно использоваться несколькими объектами; их можно сделать доступными только для чтения с целью улучшения производительности, клонирования для того, чтобы сделать их потокобезопасными. Дополнительные сведения о различных возможностях, предоставляемых объектами Freezable, см. в разделе Общие сведения об объектах класса Freezable.

См. также

Задачи

Пример двумерных преобразований

Ссылки

Transform

Matrix

Другие ресурсы

Разделы руководства, посвященные преобразованиям