Язык программирования C#9 и платформа .NET5 - Эндрю Троелсен

Применение графических трансформаций

В завершение обсуждения фигур будет рассмотрена тема трансформаций. Инфраструктура WPF поставляется с многочисленными классами, которые расширяют абстрактный базовый класс System.Winodws.Media.Transform. В табл. 26.5 кратко описаны основные классы, производные от Transform.

Трансформации могут применяться к любым объектам UIElement (например, к объектам производных от Shape классов, а также к элементам управления Button, TextBox и т.п.). Используя классы трансформаций, можно визуализировать графические данные под заданным углом, скашивать изображение на поверхности и растягивать, сжимать либо поворачивать целевой элемент разными способами.

На заметку! Хотя объекты трансформаций могут применяться повсеместно, вы сочтете их наиболее удобными при работе с анимацией WPF и специальными шаблонами элементов управления. Как будет показано далее в главе, анимацию WPF можно использовать для включения в специальный элемент управления визуальных подсказок, предназначенных конечному пользователю.

Назначать целевому объекту (Button, Path и т.д.) трансформацию (либо целый набор трансформаций) можно с помощью двух общих свойств, LayoutTransform и RenderTransform.

Свойство LayoutTransform удобно тем, что трансформация происходит перед визуализацией элементов в диспетчере компоновки и потому не влияет на операции Z-упорядочивания (т.е. трансформируемые данные изображений не перекрываются).

С другой стороны, трансформация из свойства RenderTransform инициируется после того, как элементы попали в свои контейнеры, поэтому вполне возможно, что элементы будут трансформированы с перекрытием друг друга в зависимости от того, как они организованы в контейнере.

Первый взгляд на трансформации

Вскоре вы добавите к проекту RenderingWithShapes некоторую трансформирующую логику. Чтобы увидеть объект трансформации в действии, откройте редактор Kaxaml, определите внутри корневого элемента Page или Window простой элемент StackPanel и установите свойство Orientation в Horizontal. Далее добавьте следующий элемент Rectangle, который будет нарисован под углом в 45 градусов с применением объекта RotateTransform:

<!-- Элемент Rectangle с трансформацией поворотом -->

<Rectangle Height ="100" Width ="40" Fill ="Red">

  <Rectangle.LayoutTransform>

    <RotateTransform Angle ="45"/>

  </Rectangle.LayoutTransform>

</Rectangle>

Здесь элемент Button скашивается на поверхности на 20 градусов посредством трансформации SkewTransform:

<!-- Элемент Button с трансформацией скашиванием -->

<Button Content ="Click Me!" Width="95" Height="40">

  <Button.LayoutTransform>

   <SkewTransform AngleX ="20" AngleY ="20"/>

  </Button.LayoutTransform>

</Button>

Для полноты картины ниже приведен элемент Ellipse, масштабированный на 20% с помощью трансформации ScaleTransform (обратите внимание на значения, установленные в свойствах Height и Width), а также элемент TextBox, к которому применена группа объектов трансформации:

<!-- Элемент Ellipse, масштабированный на 20% -->

<Ellipse Fill ="Blue" Width="5" Height="5">

  <Ellipse.LayoutTransform>

    <ScaleTransform ScaleX ="20" ScaleY ="20"/>

  </Ellipse.LayoutTransform>

</Ellipse>

<!-- Элемент TextBox, повернутый и скошенный -->

<TextBox Text ="Me Too!" Width="50" Height="40">

  <TextBox.LayoutTransform>

    <TransformGroup>

      <RotateTransform Angle ="45"/>

      <SkewTransform AngleX ="5" AngleY ="20"/>

    </TransformGroup>

  </TextBox.LayoutTransform>

</TextBox>

Следует отметить, что в случае применения трансформации выполнять какие-либо ручные вычисления для реагирования на проверку попадания, перемещение фокуса ввода и аналогичные действия не придется. Графический механизм WPF самостоятельно решает такие задачи. Например, на рис. 26.8 можно видеть, что элемент TextBox по-прежнему реагирует на клавиатурный ввод.

Трансформация данных Canvas

Теперь нужно внедрить в пример RenderingWithShapes логику трансформации. Помимо применения объектов трансформации к одиночному элементу (Rectangle, TextBox и т.д.) их можно также применять к диспетчеру компоновки, чтобы трансформировать все внутренние данные. Например, всю панель DockPanel главного окна можно было бы визуализировать под углом:

<DockPanel LastChildFill="True">

  <DockPanel.LayoutTransform>

    <RotateTransform Angle="45"/>

  </DockPanel.LayoutTransform>

  ...

</DockPanel>

В рассматриваемом примере это несколько чрезмерно, так что добавьте последнюю (менее радикальную) возможность, которая позволит пользователю зеркально отобразить целый контейнер Canvas и всю содержащуюся в нем графику. Начните с добавления в ToolBar финального элемента ToggleButton со следующим определением:

<ToggleButton Name="flipCanvas" Click="FlipCanvas_Click"

    Content="Flip Canvas!"/>

Внутри обработчика события Click для нового элемента ToggleButton создайте объект RotateTransform и подключите его к объекту Canvas через свойство LayoutTransform, если элемент ToggleButton отмечен. Если же элемент ToggleButton не отмечен, тогда удалите трансформацию, установив свойство LayoutTransform в null.

private void FlipCanvas_Click(object sender, RoutedEventArgs e)

{

  if (flipCanvas.IsChecked == true)

  {

    RotateTransform rotate = new RotateTransform(-180);

    canvasDrawingArea.LayoutTransform = rotate;

  }

  else

  {

    canvasDrawingArea.LayoutTransform = null;

  }

}

Запустите приложение и добавьте несколько графических фигур в область Canvas, следя за тем, чтобы они находились впритык к ее краям. После щелчка на новой кнопке обнаружится, что фигуры выходят за границы Canvas (рис. 26.9). Причина в том, что не был определен прямоугольник отсечения.

Исправить проблему легко. Вместо того чтобы вручную писать сложную логику отсечения, просто установите свойство ClipToBounds элемента Canvas в true, предотвратив визуализацию дочерних элементов вне границ родительского элемента. После запуска приложения можно заметить, что графические данные больше не покидают границы отведенной области.

<Canvas ClipToBounds = "True" ... >

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

Чтобы устранить проблему, примените тот же самый объект трансформации к рисуемой фигуре перед выполнением визуализации (через RenderTransform). Ниже показан основной фрагмент кода:

private void CanvasDrawingArea_MouseLeftButtonDown(object sender,

                                                   MouseButtonEventArgs e)

{

  // Для краткости код не показан.