Основы XAML

Трансформации

Разбить на страницы
Показывать лекцию целиком

Введение в трансформации.

Пакет Microsoft Expression Blend содержит визуальные средства для трансформации объектов (рис. 6.1):

(рис 6.1) Трансформация объектов в Microsoft Expression Blend

Группа инструментов "Transform" – отличный помощник при изучении трансформаций. В XAML – графике подерживаются следующие трансформации:

  • TranslateTransform (трансляция, перенос) – перемещение объекта к новым координатам X и Y.
  • RotateTransform ( вращение) – поворот на заданный угол Angle.
  • ScaleTransform ( масштабирование) – изменение геометрических размеров объекта при помощи кратных величин ScaleX и\или ScaleY.
  • SkewTransform ( искажение) – смещение объекта вдоль горизонтальной и\или вертикальной оси, задаваемое с помощью углов AngleX и AngleY.
  • MatrixTransform (M11, M12, M21, M22, OffsetX, OffsetY) – задание параметров трансформации в виде матрицы.
    •

    Команды аддитивны, то есть при последовательном применении нескольких команд результат будет представлять собой сумму отдельных преобразований.

    TranslateTransform

    Команда TranslateTransform представляет собой перенос начала системы отсчета в новую точку с заданными координатами. Рассмотрим следующий фрагмент кода:

    <Rectangle Canvas.Left="25" 
Canvas.Top="25" Width="50" 
Height="25"  Fill="skyblue" 
Stroke="red" StrokeThickness="2"/>
  
  <Rectangle Canvas.Left="25" 
  Canvas.Top="25" Width="50" 
  Height="25"  Fill="palegreen" 
  Stroke="red" StrokeThickness="2" >
    <Rectangle.RenderTransform>    
      <TranslateTransform X="100" 
      Y="75"/>    
    </Rectangle.RenderTransform>
  </Rectangle>

    Координаты обоих прямоугольников и их геометрические размеры совпадают. Следовательно, на рисунке второй прямоугольник должен был бы наложится на первый. Но для второго прямоугольника была применена команда TranslateTransform и теперь начало его собственной системы координат располагается в точке 100, 75 (рис. 6.2):

    (рис 6.2) Применение команды TranslateTransform

    Трансформация применяется к фигуре при помощи специального тега RenderTransform. В табл. 6.1 приводятся примеры использования этой команды.

    Команда TranslateTransform
    № Код Вид в браузере
    6.1.1 
    <Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="200" Height="150"
Background="White"
x:Name="Page">
<Rectangle Canvas.Left="25" 
Canvas.Top="25" Width="50" 
Height="25"  Fill="skyblue" 
Stroke="red" StrokeThickness="2"/>
  
  <Rectangle Canvas.Left="25" 
Canvas.Top="25" Width="50" 
Height="25"  Fill="palegreen" 
Stroke="red" StrokeThickness="2" 
RenderTransformOrigin="0.5,0.5">
  <Rectangle.RenderTransform>    
    <TranslateTransform X="100" 
Y="75"/>    
  </Rectangle.RenderTransform>
</Rectangle>
  
</Canvas>
    Описание
    Перенос фигуры в точку с координатами 100, 75. Как обычно, координаты отсчитываются от верхнего левого угла прямоугольника. Однако специальный атрибут ) позволяет установить центральную точку, относительно которой будет осуществляться преобразование. Она определяется в кратных долях от геометрических размерах объекта. Понятно, что в случае команды трансляции эффект практически не будет заметен.
    № Код Вид в браузере
    6.1.2 
    <Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="200" Height="150"
Background="White"
x:Name="Page">
<Rectangle Canvas.Left="25" 
Canvas.Top="25" Width="50" 
Height="25"  Fill="skyblue" 
Stroke="red" StrokeThickness="2"/>
  
  <Canvas Width="180" 
Height="80" Canvas.Left="10" 
Canvas.Top="10">
  <Rectangle Canvas.Left="25" 
Canvas.Top="25" Width="50" 
Height="25"  Fill="palegreen" 
Stroke="red" StrokeThickness="2" />
  <Canvas.RenderTransform>    
    <TranslateTransform X="100" 
Y="75"/>    
  </Canvas.RenderTransform>
  </Canvas>
</Canvas>
    Описание
    Применение команды TranslateTransform для элемента Canvas. Внутри группы расположен один элемент
    № Код Вид в браузере
    6.1.3 
    <Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="200" Height="100"
Background="White"
x:Name="Page">
  
  <TextBlock
  FontFamily="Arial"
  FontSize="24"
  FontWeight="Bold" 
  Foreground="Green"
  Canvas.Left="10"
  Canvas.Top="30"
  Text="Translate"></TextBlock>
  
<TextBlock
  FontFamily="Arial"
  FontSize="24"
  FontWeight="Bold" 
  Foreground="Green"
  Canvas.Left="10"
  Canvas.Top="30"
  Text="Translate">
  <TextBlock.RenderTransform>
    <TranslateTransform X="30" 
Y="30" />
  </TextBlock.RenderTransform>
</TextBlock>


</Canvas>
    Описание
    Трансформация текста
    № Код Вид в браузере
    6.1.4 
    <Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="200" Height="100"
Background="White"
x:Name="Page">
  
  <TextBlock
  FontFamily="Arial"
  FontSize="40"
  FontWeight="Bold" 
  Foreground="Gray"
  Canvas.Left="10"
  Canvas.Top="30"
  Text="Translate">
  <TextBlock.RenderTransform>
    <TranslateTransform X="2" 
Y="2" />
  </TextBlock.RenderTransform>
</TextBlock>

  <TextBlock
  FontFamily="Arial"
  FontSize="40"
  FontWeight="Bold" 
  Foreground="Green"
  Canvas.Left="10"
  Canvas.Top="30"
  Text="Translate"></TextBlock>
  


</Canvas>
    Описание
    Трансформация текста – получение эффекта тени

    RotateTransform

    Команда RotateTransform поворачивает систему координат относительно точки отсчета на задаваемый угол (рис. 6.3):

    (рис 6.3) Применение команды RotateTransform

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

    Команды RotateTransform и TranslateTransform
    № Код Вид в браузере
    6.2.1 
    <Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="210" Height="210"
Background="White"
x:Name="Page">
<!--Исходная фигура-->
<Rectangle Canvas.Left="105" 
Canvas.Top="4" Width="100" 
Height="50"  Fill="yellow" 
Stroke="red" StrokeThickness="4"/>
<Rectangle Canvas.Left="105" 
Canvas.Top="4" Width="50" 
Height="25"  Fill="green" 
Stroke="red" StrokeThickness="4" />

  <!--Повернутая фигура-->  
  <Canvas Width="210" 
Height="210" Canvas.Left="0" 
Canvas.Top="0">
  <Rectangle Canvas.Left="105" 
Canvas.Top="4" Width="100" 
Height="50"  Fill="yellow" S
troke="red" StrokeThickness="4"/>
  <Rectangle Canvas.Left="105" 
Canvas.Top="4" Width="50" 
Height="25"  Fill="green" 
Stroke="red" StrokeThickness="4" />

  <Canvas.RenderTransform>    
    <RotateTransform Angle="45"/>    
  </Canvas.RenderTransform>
  </Canvas>
</Canvas>
    Описание
    Поворот системы координат на 45 градусов. Фигура поворачивается и смещается
    № Код Вид в браузере
    6.2.2 
    <Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="210" Height="210"
Background="White"
x:Name="Page">
<!--Исходная фигура-->
<Rectangle Canvas.Left="105" 
Canvas.Top="4" Width="100" 
Height="50"  Fill="yellow" 
Stroke="red" StrokeThickness="4"/>
<Rectangle Canvas.Left="105" 
Canvas.Top="4" Width="50" 
Height="25"  Fill="green" 
Stroke="red" StrokeThickness="4" />

  <!--Повернутая фигура-->  
  <Canvas Width="0" 
Height="0" Canvas.Left="0" 
Canvas.Top="0">
  <Rectangle Canvas.Left="105" 
Canvas.Top="4" Width="100" 
Height="50"  Fill="yellow" 
Stroke="red" StrokeThickness="4"/>
  <Rectangle Canvas.Left="105" 
Canvas.Top="4" Width="50" 
Height="25"  Fill="green" 
Stroke="red" StrokeThickness="4" />
 <Canvas.RenderTransform>
  <TransformGroup>
    <RotateTransform Angle="45"/>
    <TranslateTransform X="33.5" 
Y="-73"/>

    </TransformGroup>
  </Canvas.RenderTransform>  

</Canvas>
</Canvas>
    Описание
    Для получения поворота фигуры вокруг своей оси после поворота начало отсчета было перенесено при помощи отдельных команд (рис 6.4) Опорная точка для поворачиваемой фигуры в Microsoft Expression Blend
    № Код Вид в браузере
    6.2.3 
    <Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="200" Height="100"
Background="White"
x:Name="Page">
<TextBlock Text="Поворот" 
FontSize="16" Foreground="Blue" 
Canvas.Left="50" Canvas.Top="10">
  <TextBlock.RenderTransform>
    <RotateTransform Angle="45" />
  </TextBlock.RenderTransform>
</TextBlock>
</Canvas>
    Описание
    Поворот текста
    № Код Вид в браузере
    6.2.4 
    <Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="210" Height="210"
Background="White"
x:Name="Page">
<!--Исходная фигура-->
<Rectangle Canvas.Left="105" 
Canvas.Top="4" Width="100" 
Height="50"  Fill="yellow" 
Stroke="red" StrokeThickness="4"/>
<Rectangle Canvas.Left="105" 
Canvas.Top="4" Width="50" 
Height="25"  Fill="green" 
Stroke="red" StrokeThickness="4" />

  <!--Повернутая фигура-->  
  <Canvas Width="210" 
Height="210" Canvas.Left="0" 
Canvas.Top="0">
  <Rectangle Canvas.Left="105" 
Canvas.Top="4" Width="100" 
Height="50"  Fill="yellow" 
Stroke="red" StrokeThickness="4"/>
  <Rectangle Canvas.Left="105" 
Canvas.Top="4" Width="50" 
Height="25"  Fill="green" 
Stroke="red" StrokeThickness="4" />

  <Canvas.RenderTransform>    
    <RotateTransform Angle="45" 
CenterX="107" CenterY="0" />
    </Canvas.RenderTransform>
  </Canvas>
</Canvas>
    Описание

    Здесь мы не стали применять команду TranslateTransform для переноса фигуры. Дело в том, что синтаксис самой команды RotateTransform поддерживает атрибуты CenterX и CenterY. Задавая их координаты можно определить точку, относительно которой происходит преобразование. Переключившись в режим дизайна видим расположение преобразованной фигуры и контуры элемента Canvas (рис. 6.5):

    (рис 6.5) Конутры элемента Canvas при задании опорной точки с помощью атрибутов CenterX и CenterY

    Атрибуты CenterX, CenterY применяются также в командах ScaleTransform и SkewTransform. Хотя в большинстве случаев, смещение трансформируемой фигуры, определяемое с помощью TranslateTransform кажется более наглядным, применение этих атрибутов делает запись графики более лаконичной

    ScaleTransform

    Команда ScaleTransform позволяет масштабировать объект с указанием кратности вдоль горизонтальной и вертикальной осей (рис. 6.6):

    (рис 6.6) Применение команды ScaleTransform

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

    ScaleTransform ScaleX="2"

    Результатом станет увеличение фигуры в два раза только в горизонтальном направлении. В табл. 6.3 приведены примеры использования этой команды.

    Команда ScaleTransform
    № Код Вид в браузере
    6.3.1 
    <Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="200" Height="100"
Background="White"
x:Name="Page">
<Rectangle Canvas.Left="25" 
Canvas.Top="25" Width="50" 
Height="25"  Fill="skyblue" 
Stroke="red" StrokeThickness="2"/>
  
  <Rectangle Canvas.Left="25" 
Canvas.Top="25" Width="50" 
Height="25"  Fill="palegreen" 
Stroke="red" StrokeThickness="2" 
Opacity="0.3" >
  <Rectangle.RenderTransform>    
    <ScaleTransform ScaleX="2" 
ScaleY="2" />  
  </Rectangle.RenderTransform>
</Rectangle>
  
</Canvas>
    Описание
    Увеличение фигуры в два раза по горизонтали и вертикали. Отсчет осуществляется относительно верхней левой точки. Задав полупрозрачность, замечаем, что площадь фигуры увеличилась ровно в четыре раза
    № Код Вид в браузере
    6.3.2 
    <Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="200" Height="100"
Background="White"
x:Name="Page">
<Rectangle Canvas.Left="25" 
Canvas.Top="25" Width="50" 
Height="25"  Fill="skyblue" 
Stroke="red" StrokeThickness="2"/>
  
<Rectangle Canvas.Left="25" 
Canvas.Top="50" Width="50" 
Height="25"  Fill="palegreen" 
Stroke="red" StrokeThickness="2" >
  <Rectangle.RenderTransform>    
    <ScaleTransform ScaleX="1" 
ScaleY="1" />  
  </Rectangle.RenderTransform>
</Rectangle>
  
</Canvas>
    Описание
    Применение команды ScaleTransform с масштабом, равным 1, не изменяет размеров прямоугольника (Для сопоставления прямоугольники смещены Canvas.Top ="25" и Canvas.Top ="50"
    № Код Вид в браузере
    6.3.3 
    <Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="200" Height="100"
Background="White"
x:Name="Page">
<Rectangle Canvas.Left="25" 
Canvas.Top="25" Width="50" 
Height="25"  Fill="skyblue"
 Stroke="red" StrokeThickness="2"/>
  
<Rectangle Canvas.Left="25" 
Canvas.Top="50" Width="50" 
Height="25"  Fill="palegreen" 
Stroke="red" StrokeThickness="2" >
  <Rectangle.RenderTransform>    
    <ScaleTransform ScaleX="2" 
ScaleY="1"  />  
  </Rectangle.RenderTransform>
</Rectangle>
  
</Canvas>
    Описание
    Увеличение прямоугольника в два раза по горизонтали
    № Код Вид в браузере
    6.3.4 
    <Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="200" Height="150"
Background="White"
x:Name="Page">
<Rectangle Canvas.Left="25" 
Canvas.Top="25" Width="50" 
Height="25"  Fill="skyblue" 
Stroke="red" StrokeThickness="2"/>
  
<Rectangle Canvas.Left="25" 
Canvas.Top="50" Width="50" 
Height="25"  Fill="palegreen" 
Stroke="red" StrokeThickness="2" >
  <Rectangle.RenderTransform>    
    <ScaleTransform ScaleX="1" 
ScaleY="2"  />  
  </Rectangle.RenderTransform>
</Rectangle>
  
</Canvas>
    Описание
    Увеличение прямоугольника в два раза по вертикали
    № Код Вид в браузере
    6.3.5 
    <Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="200" Height="150"
Background="White"
x:Name="Page">
<Rectangle Canvas.Left="25" 
Canvas.Top="25" Width="50" 
Height="25"  Fill="skyblue" 
Stroke="red" StrokeThickness="2"/>
  
<Rectangle Canvas.Left="25" 
Canvas.Top="50" Width="50" 
Height="25"  Fill="palegreen" 
Stroke="red" StrokeThickness="2" >
  <Rectangle.RenderTransform>    
    <ScaleTransform ScaleX="2" 
ScaleY="2"  />  
  </Rectangle.RenderTransform>
</Rectangle>
  
</Canvas>
    Описание
    Увеличение прямоугольника в два раза по горизонтали и вертикали
    № Код Вид в браузере
    6.3.6 
    <Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="200" Height="150"
Background="White"
x:Name="Page">
<Rectangle Canvas.Left="25" 
Canvas.Top="25" Width="50" 
Height="25"  Fill="skyblue" 
Stroke="red" StrokeThickness="2"/>
  
<Rectangle Canvas.Left="25" 
Canvas.Top="50" Width="50" 
Height="25"  Fill="palegreen" 
Stroke="red" StrokeThickness="2" >
 <Rectangle.RenderTransform>    
   <ScaleTransform ScaleX="2"   />  
  </Rectangle.RenderTransform>
</Rectangle>
  
</Canvas>
    Описание
    Увеличение прямоугольника в два раза по горизонтали без указания второго параметра
    № Код Вид в браузере
    6.3.7 
    <Canvas  
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="200" Height="150"
Background="White"
x:Name="Page">
<Rectangle Canvas.Left="25" 
Canvas.Top="25" Width="50" 
Height="25"  Fill="skyblue" 
Stroke="red" StrokeThickness="2"/>
  
  <Canvas Width="200" 
Height="150" Canvas.Left="0" 
Canvas.Top="0">
  <Rectangle Canvas.Left="25" 
Canvas.Top="25" Width="50" 
Height="25"  Fill="palegreen" 
Stroke="red" StrokeThickness="2" />
  <Canvas.RenderTransform>    
    <ScaleTransform ScaleX="2" 
ScaleY="1.5"  />    
  </Canvas.RenderTransform>
  </Canvas>
</Canvas>
    Описание
    Применение команды scale для трансформации группы, заключенной в элементе Canvas
    № Код Описание
    6.3.8 
    <Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="420" Height="220"
Background="White"
x:Name="Page">
<TextBlock
Canvas.Left="50" 
Canvas.Top="50"
  FontFamily="Arial"
  FontSize="30"
  Foreground="Red"
  Text="Текст" 
  />

<TextBlock
Canvas.Left="150" 
Canvas.Top="50"
  FontFamily="Arial"
  FontSize="30"
  Foreground="Red"
  Text="Текст" >
  <TextBlock.RenderTransform>
    <ScaleTransform ScaleX="3" 
ScaleY="1" />
  </TextBlock.RenderTransform>
</TextBlock>

<TextBlock
Canvas.Left="50" 
Canvas.Top="100"
  FontFamily="Arial"
  FontSize="30"
  Foreground="Red"
  Text="Текст" >
  <TextBlock.RenderTransform>
    <ScaleTransform ScaleX="1" 
ScaleY="3" />
  </TextBlock.RenderTransform>
</TextBlock>

<TextBlock
Canvas.Left="150" 
Canvas.Top="100"
  FontFamily="Arial"
  FontSize="30"
  Foreground="Red"
  Text="Текст" >
  <TextBlock.RenderTransform>
    <ScaleTransform ScaleX="
3" ScaleY="3" />
  </TextBlock.RenderTransform>
</TextBlock>
</Canvas>
    		 Масштабирование текста
    Вид в браузере
    № Код Вид в браузере
    6.3.9 
    <Canvas  
<Canvas  
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="200" Height="150"
Background="White"
x:Name="Page">
<Rectangle Canvas.Left="25" 
Canvas.Top="25" Width="50" 
Height="25"  Fill="skyblue" 
Stroke="red" StrokeThickness="2"/>
  
  <Canvas Width="200" 
Height="150" Canvas.Left="0" 
Canvas.Top="0">
  <Rectangle Canvas.Left="25" 
Canvas.Top="25" Width="50" 
Height="25"  Fill="palegreen" 
Stroke="red" StrokeThickness="2"
 Opacity="0.5" />
  <Canvas.RenderTransform>    
    <ScaleTransform ScaleX="2" 
ScaleY="2" CenterX="25" 
CenterY="13"  />    
  </Canvas.RenderTransform>
  </Canvas>
</Canvas>
    Описание
    Для смещения трансформированной фигуры мы применяли задание значений Canvas.Left и Canvas.Top. Такой же эффект получается при использовании атрибутов CenterX и CenterY

    Отражение объектов

    Отражение объектов – одна из наиболее часто встречающихся задач при работе с любой графикой. Сочетания команд ScaleTransform и TranslateTransform позволяет легко получать нужный результат (рис. 6.7):

    (рис 6.7) Отражение объекта при помощи команд ScaleTransform и TranslateTransform

    Исходная фигура находится в правой нижней части рисунка. При подстановке координат в команды их можно варьировать в некоторых пределах для получения определенного эффекта, например "перекрытия". Исходное изображение можно заменить отражением, если указывать смещение на длину и высоту фигуры (рис. 6.8):

    (рис 6.8) Замещение исходного изображения отражением

    В табл. 6.4приводится различные варианты отражения объекта.

    Отражение фигуры при помощи команд ScaleTransform и TranslateTransform
    № Код Вид в браузере
    6.4.1 
    <Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="210" Height="110"
Background="White"
x:Name="Page">
<!--Исходная фигура (Нижняя правая)-->
<Canvas Width="210" 
Height="110" Canvas.Left="0" 
Canvas.Top="0">
<Rectangle Canvas.Left="105" 
Canvas.Top="55" Width="100" 
Height="50"  Fill="yellow" 
Stroke="red" StrokeThickness="4"/>
<Rectangle Canvas.Left="105" 
Canvas.Top="55" Width="50" 
Height="25"  Fill="green" 
Stroke="red" StrokeThickness="4" />

  <Canvas.RenderTransform>    
  <TransformGroup>
    <TranslateTransform X="0" 
Y="0"/>  
    <ScaleTransform ScaleX="1" 
ScaleY="1" />  
  </TransformGroup>
  </Canvas.RenderTransform>
  </Canvas>
  
</Canvas>
    Описание
    Исходная фигура. Применение команд ScaleTransform и TranslateTransform с указанными параметрами не изменяет масштаба и расположения
    № Код Вид в браузере
    6.4.2 
    <Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="210" Height="110"
Background="White"
x:Name="Page">

<!--Нижняя левая фигура -->
<Canvas Width="210" 
Height="110" Canvas.Left="0" 
Canvas.Top="0">
<Rectangle Canvas.Left="105" 
Canvas.Top="55" Width="100" 
Height="50"  Fill="yellow" 
Stroke="red" StrokeThickness="4"/>
<Rectangle Canvas.Left="105" 
Canvas.Top="55" Width="50" 
Height="25"  Fill="green" 
Stroke="red" StrokeThickness="4" />

  <Canvas.RenderTransform>    
  <TransformGroup>
    <TranslateTransform X="-210" 
Y="0"/>  
    <ScaleTransform ScaleX="-1" 
ScaleY="1" />  
  </TransformGroup>
  </Canvas.RenderTransform>
  </Canvas>
  
  
</Canvas>
    Описание
    Отражение фигуры справа налево со смещением на ширину
    № Код Вид в браузере
    6.4.3 
    <Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="210" Height="110"
Background="White"
x:Name="Page">
  
<!--Верхняя правая фигура -->
<Canvas Width="210"
 Height="110" Canvas.Left="0" 
Canvas.Top="0">
<Rectangle Canvas.Left="105" 
Canvas.Top="55" Width="100" 
Height="50"  Fill="yellow" 
Stroke="red" StrokeThickness="4"/>
<Rectangle Canvas.Left="105" 
Canvas.Top="55" Width="50" 
Height="25"  Fill="green" 
Stroke="red" StrokeThickness="4" />

  <Canvas.RenderTransform>    
  <TransformGroup>
    <TranslateTransform X="0" 
Y="-110"/>  
    <ScaleTransform ScaleX="1" 
ScaleY="-1" />  
  </TransformGroup>
  </Canvas.RenderTransform>
  </Canvas>

  
</Canvas>
    Описание
    Отражение фигуры снизу вверх со смещением на высоту
    № Код Вид в браузере
    6.4.4 
    <Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="210" Height="110"
Background="White"
x:Name="Page">
  

<!--Верхняя левая фигура -->
 <Canvas Width="210" Height="110" 
Canvas.Left="0" Canvas.Top="0">
 <Rectangle Canvas.Left="105" 
Canvas.Top="55" 
Width="100" Height="50"  
Fill="yellow" 
Stroke="red" StrokeThickness="4"/>
 <Rectangle Canvas.Left="105" 
Canvas.Top="55" Width="50" 
Height="25"  Fill="green" 
Stroke="red" StrokeThickness="4" />

    <Canvas.RenderTransform>    
    <TransformGroup>
      <TranslateTransform X="-210" 
Y="-110"/>  
      <ScaleTransform ScaleX="-1" 
ScaleY="-1" />  
    </TransformGroup>
    </Canvas.RenderTransform>
    </Canvas>
  
</Canvas>
    Описание
    Отражение фигуры справа налево и снизу вверх со смещением на ширину и высоту
    № Код Вид в браузере
    6.4.5 
    <Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="210" Height="110"
Background="White"
x:Name="Page">
<!--Исходная фигура (Нижняя правая)-->
<Canvas Width="210" Height="110" 
Canvas.Left="0" Canvas.Top="0">
<Rectangle Canvas.Left="105" 
Canvas.Top="55" Width="100" 
Height="50"  Fill="yellow" 
Stroke="red" StrokeThickness="4"/>
<Rectangle Canvas.Left="105" 
Canvas.Top="55" Width="50" 
Height="25"  Fill="green" 
Stroke="red" StrokeThickness="4" />

  <Canvas.RenderTransform>    
  <TransformGroup>
    <TranslateTransform X="0"
 Y="0"/>  
    <ScaleTransform ScaleX="1" 
ScaleY="1" />  
  </TransformGroup>
  </Canvas.RenderTransform>
  </Canvas>
<!--Нижняя левая фигура -->
<Canvas Width="210" Height="110"
 Canvas.Left="0" Canvas.Top="0">
<Rectangle Canvas.Left="105" 
Canvas.Top="55" Width="100" 
Height="50"  Fill="yellow" 
Stroke="red" StrokeThickness="4"/>
<Rectangle Canvas.Left="105" 
Canvas.Top="55" Width="50" 
Height="25"  Fill="green" 
Stroke="red" StrokeThickness="4" />

  <Canvas.RenderTransform>    
  <TransformGroup>
    <TranslateTransform X="-210"
 Y="0"/>  
    <ScaleTransform ScaleX="-1" 
ScaleY="1" />  
  </TransformGroup>
  </Canvas.RenderTransform>
  </Canvas>
<!--Верхняя правая фигура -->
<Canvas Width="210" 
Height="110" Canvas.Left="0" 
Canvas.Top="0">
<Rectangle Canvas.Left="105"
 Canvas.Top="55" Width="100" 
Height="50"  Fill="yellow" 
Stroke="red" StrokeThickness="4"/>
<Rectangle Canvas.Left="105" 
Canvas.Top="55" Width="50" 
Height="25"  Fill="green" 
Stroke="red" StrokeThickness="4" />

  <Canvas.RenderTransform>    
  <TransformGroup>
    <TranslateTransform X="0" 
Y="-110"/>  
    <ScaleTransform ScaleX="1" 
ScaleY="-1" />  
  </TransformGroup>
  </Canvas.RenderTransform>
  </Canvas>
<!--Верхняя левая фигура -->
  <Canvas Width="210" 
Height="110" Canvas.Left="0" 
Canvas.Top="0">
<Rectangle Canvas.Left="105" 
Canvas.Top="55" Width="100" 
Height="50"  Fill="yellow" 
Stroke="red" StrokeThickness="4"/>
<Rectangle Canvas.Left="105" 
Canvas.Top="55" Width="50" 
Height="25"  Fill="green" 
Stroke="red" StrokeThickness="4" />

  <Canvas.RenderTransform>    
  <TransformGroup>
    <TranslateTransform X="-210" 
Y="-110"/>  
    <ScaleTransform ScaleX="-1" 
ScaleY="-1" />  
  </TransformGroup>
  </Canvas.RenderTransform>
  </Canvas>
  
</Canvas>
    Описание
    Исходная фигура и три отражения
    № Код Вид в браузере
    6.4.6 
    <Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="220" Height="120"
Background="White"
x:Name="Page">

<!--Справа налево-->
<Canvas Width="220"
 Height="120" Canvas.Left="0" 
Canvas.Top="0" >
<Rectangle Canvas.Left="105" 
Canvas.Top="55" Width="100" 
Height="50"  Fill="yellow" 
Stroke="red" StrokeThickness="4"/>
<Rectangle Canvas.Left="105" 
Canvas.Top="55" Width="50" 
Height="25"  Fill="green" 
Stroke="red" StrokeThickness="4" />

  <Canvas.RenderTransform>    
  <TransformGroup>
    <TranslateTransform X="-310" 
Y="0"/>  
    <ScaleTransform ScaleX="-1" 
ScaleY="1" />  
  </TransformGroup>
  </Canvas.RenderTransform>
  </Canvas>
<!--Вспомогательная рамка вокруг рисунка-->

<Rectangle Canvas.Left="100" 
Canvas.Top="50" Width="110" 
Height="60"  Fill="Transparent" 
Stroke="blue" StrokeThickness="2"/>

</Canvas>
    Описание
    Отражение фигуры справа налево с замещением исходной фигуры
    № Код Вид в браузере
    6.4.7 
    <Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="220" Height="120"
Background="White"
x:Name="Page">

<!--Снизу вверх-->
<Canvas Width="220" 
Height="120" Canvas.Left="0" 
Canvas.Top="0" >
<Rectangle Canvas.Left="105" 
Canvas.Top="55" Width="100" 
Height="50"  Fill="yellow" 
Stroke="red" StrokeThickness="4"/>
<Rectangle Canvas.Left="105" 
Canvas.Top="55" Width="50" 
Height="25"  Fill="green" 
Stroke="red" StrokeThickness="4" />

  <Canvas.RenderTransform>    
  <TransformGroup>
    <TranslateTransform X="0"
 Y="-160"/>  
    <ScaleTransform ScaleX="1"
 ScaleY="-1" />  
  </TransformGroup>
  </Canvas.RenderTransform>
  </Canvas>

<!--Вспомогательная рамка вокруг рисунка-->

<Rectangle Canvas.Left="100" 
Canvas.Top="50" Width="110" 
Height="60"  Fill="Transparent"
 Stroke="blue" StrokeThickness="2"/>
</Canvas>
    Описание
    Отражение фигуры снизу вверх с замещением исходной фигуры.
    № Код Вид в браузере
    6.4.8 
    <Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="220" Height="120"
Background="White"
x:Name="Page">

<!--Снизу вверх и справа налево-->
<Canvas Width="220" 
Height="120" Canvas.Left="0"
 Canvas.Top="0" >
<Rectangle Canvas.Left="105" 
Canvas.Top="55" Width="100" 
Height="50"  Fill="yellow" 
Stroke="red" StrokeThickness="4"/>
<Rectangle Canvas.Left="105" 
Canvas.Top="55" Width="50" Height="25" 
 Fill="green" Stroke="red" StrokeThickness="4" />

  <Canvas.RenderTransform>    
  <TransformGroup>
    <TranslateTransform X="-310" 
Y="-160"/>  
    <ScaleTransform ScaleX="-1" 
ScaleY="-1" />  
  </TransformGroup>
  </Canvas.RenderTransform>
  </Canvas>

<!--Вспомогательная рамка вокруг рисунка-->

<Rectangle Canvas.Left="100" 
Canvas.Top="50" Width="110" 
Height="60"  Fill="Transparent" 
Stroke="blue" StrokeThickness="2"/>

</Canvas>
    Описание
    Отражение фигуры справа налево и снизу вверх с замещением исходной фигуры
    № Код Вид в браузере
    6.4.9 
    <Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="220" Height="120"
Background="White"
x:Name="Page">
<!--Исходная фигура-->
<Canvas Width="220" Height="120" 
Canvas.Left="0" Canvas.Top="0">
<Rectangle Canvas.Left="105" Canvas.Top="55" 
Width="100" Height="50"  Fill="yellow" 
Stroke="red" StrokeThickness="4"/>
<Rectangle Canvas.Left="105" Canvas.Top="55" 
Width="50" Height="25"  Fill="green" 
Stroke="red" StrokeThickness="4" />

  <Canvas.RenderTransform>    
  <TransformGroup>
    <TranslateTransform X="0" 
Y="0"/>  
    <ScaleTransform ScaleX="1" 
ScaleY="1" />  
  </TransformGroup>
  </Canvas.RenderTransform>
  </Canvas>
  
<!--Снизу вверх и справа налево-->
  <Canvas Width="220" 
Height="120" Canvas.Left="0" 
Canvas.Top="0" Opacity="0.6">
<Rectangle Canvas.Left="105" 
Canvas.Top="55" Width="100"
 Height="50"  Fill="yellow" 
Stroke="red" StrokeThickness="4"/>
<Rectangle Canvas.Left="105" 
Canvas.Top="55" Width="50" 
Height="25"  Fill="green" 
Stroke="red" StrokeThickness="4" />

  <Canvas.RenderTransform>    
  <TransformGroup>
    <TranslateTransform X="-310" 
Y="-160"/>  
  <ScaleTransform ScaleX="-1" 
ScaleY="-1" />  
  </TransformGroup>
  </Canvas.RenderTransform>
  </Canvas>

<!--Вспомогательная рамка вокруг рисунка-->

<Rectangle Canvas.Left="100" 
Canvas.Top="50" Width="110" 
Height="60"  Fill="Transparent" 
Stroke="blue" StrokeThickness="2"/>
</Canvas>
    Описание
    При расположении фигуры бывает довольно трудно подобрать нужные координаты. Задачу можно упростить, если оставить исходный объект, а позиционирование осуществлять с полупрозрачной фигурой

    SkewTransform

    Команда SkewTransform предназначена для искажения формы фигуры в направлении горизонтальной ( AngleX ) и вертикальной осей ( AngleY ) (рис. 6.9):

    (рис 6.9) Команды SkewTransform с атрибутами AngleX и AngleY

    Применение пары аргументов AngleX и AngleY приводит к одновременному искажению фигуры вдоль обеих осей. При использовании команды SkewTransform с атрибутом AngleX абсциссы фигуры остаются прежними, а ординаты автоматически вычисляются по формуле Y*tg(n) где n – значение угла в градусах, принимаемое конструктором. Аналогично, применение команды SkewTransform с атрибутом AngleY оставляет прежними ординаты, изменяя абсциссы по формуле X*tg(n). В табл. 6.5приводятся примеры использования этой команды.

    Команда SkewTransform
    № Код Вид в браузере
    6.5.1 
    <Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="200" Height="200"
Background="White"
x:Name="Page">
<!--Исходная фигура-->
<Rectangle Canvas.Left="10" 
Canvas.Top="10" Width="100" 
Height="50"  Fill="yellow"
 Stroke="red" StrokeThickness="4"/>
<Rectangle Canvas.Left="10" 
Canvas.Top="10" Width="50" 
Height="25"  Fill="green" 
Stroke="red" StrokeThickness="4" />

<!--Трансформированная фигура -->
<Canvas Width="200" 
Height="200" Canvas.Left="0" 
Canvas.Top="0">
<Rectangle Canvas.Left="10" 
Canvas.Top="10" Width="100"
 Height="50"  Fill="yellow" 
Stroke="red" StrokeThickness="4"/>
<Rectangle Canvas.Left="10" 
Canvas.Top="10" Width="50" 
Height="25"  Fill="green" 
Stroke="red" StrokeThickness="4" />

  <Canvas.RenderTransform>    
    <SkewTransform AngleX="45" />  
  </Canvas.RenderTransform>
  </Canvas>
</Canvas>
    Описание
    Искажение фигуры в горизонтальном направлении. Заметно смещение верхней левой точки объекта относительно исходной фигуры.
    № Код Вид в браузере
    6.5.2 
    <Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="200" Height="200"
Background="White"
x:Name="Page">
<!--Исходная фигура-->
<Rectangle Canvas.Left="10" 
Canvas.Top="10" Width="100" 
Height="50"  Fill="yellow" 
Stroke="red" StrokeThickness="4"/>
<Rectangle Canvas.Left="10" 
Canvas.Top="10" Width="50" 
Height="25"  Fill="green" 
Stroke="red" StrokeThickness="4" />

<!--Трансформированная фигура -->
<Canvas Width="200" Height="200" 
Canvas.Left="0" Canvas.Top="0">
<Rectangle Canvas.Left="10" 
Canvas.Top="10" Width="100" 
Height="50"  Fill="yellow" 
Stroke="red" StrokeThickness="4"/>
<Rectangle Canvas.Left="10" 
Canvas.Top="10" Width="50" 
Height="25"  Fill="green" 
Stroke="red" StrokeThickness="4" />

  <Canvas.RenderTransform>  
  <TransformGroup>  
    <SkewTransform AngleX="45" />  
    <TranslateTransform X="-10" 
Y="0"/>  
  </TransformGroup>  
  </Canvas.RenderTransform>
  </Canvas>
</Canvas>
    Описание
    Искажение фигуры в горизонтальном направлении с компенсацией смещения при помощи команды TranslateTransform
    № Код Вид в браузере
    6.5.3 
    <Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="200" Height="200"
Background="White"
x:Name="Page">
<!--Исходная фигура-->
<Rectangle Canvas.Left="10" 
Canvas.Top="10" Width="100" 
Height="50"  Fill="yellow" 
Stroke="red" StrokeThickness="4"/>
<Rectangle Canvas.Left="10" 
Canvas.Top="10" Width="50" 
Height="25"  Fill="green" 
Stroke="red" StrokeThickness="4" />

<!--Трансформированная фигура -->
<Canvas Width="200" 
Height="200" Canvas.Left="0"
 Canvas.Top="0">
<Rectangle Canvas.Left="10" 
Canvas.Top="10" Width="100" 
Height="50"  Fill="yellow" 
Stroke="red" StrokeThickness="4"/>
<Rectangle Canvas.Left="10" 
Canvas.Top="10" Width="50" 
Height="25"  Fill="green"
 Stroke="red" StrokeThickness="4" />

  <Canvas.RenderTransform>  
  <TransformGroup>  
    <SkewTransform AngleX="235" />  
    <TranslateTransform X="-10" 
Y="0"/>  
  </TransformGroup>  
  </Canvas.RenderTransform>
  </Canvas>
</Canvas>
    Описание
    Искажение фигуры в горизонтальном направлении при угле 235 градусов (180+45). Заметно смещение верхней левой точки объекта относительно исходной фигуры
    № Код Вид в браузере
    6.5.4 
    <Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="200" Height="200"
Background="White"
x:Name="Page">
<!--Исходная фигура-->
<Rectangle Canvas.Left="10" 
Canvas.Top="10" Width="100" 
Height="50"  Fill="yellow" 
Stroke="red" StrokeThickness="4"/>
<Rectangle Canvas.Left="10" 
Canvas.Top="10" Width="50" 
Height="25"  Fill="green" 
Stroke="red" StrokeThickness="4" />

<!--Трансформированная фигура -->
<Canvas Width="200" Height="200" 
Canvas.Left="0" Canvas.Top="0">
<Rectangle Canvas.Left="10" 
Canvas.Top="10" Width="100" 
Height="50"  Fill="yellow" 
Stroke="red" StrokeThickness="4"/>
<Rectangle Canvas.Left="10" 
Canvas.Top="10" Width="50" 
Height="25"  Fill="green" 
Stroke="red" StrokeThickness="4" />

  <Canvas.RenderTransform>  
  <TransformGroup>  
    <SkewTransform AngleX="235" />  
    <TranslateTransform X="-14" 
Y="0"/>  
  </TransformGroup>  
  </Canvas.RenderTransform>
  </Canvas>
</Canvas>
    Описание
    Искажение фигуры в горизонтальном направлении при угле 235 градусов (180+45) с компенсацией смещения при помощи команды TranslateTransform
    № Код Вид в браузере
    6.5.5 
    <Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="200" Height="200"
Background="White"
x:Name="Page">
<!--Исходная фигура-->
<Rectangle Canvas.Left="10" 
Canvas.Top="10" Width="100" 
Height="50"  Fill="yellow" 
Stroke="red" StrokeThickness="4"/>
<Rectangle Canvas.Left="10" 
Canvas.Top="10" Width="50" 
Height="25"  Fill="green" 
Stroke="red" StrokeThickness="4" />

<!--Трансформированная фигура -->
<Canvas Width="200" Height="200" 
Canvas.Left="0" Canvas.Top="0">
<Rectangle Canvas.Left="10" 
Canvas.Top="10" Width="100" 
Height="50"  Fill="yellow" 
Stroke="red" StrokeThickness="4"/>
<Rectangle Canvas.Left="10" 
Canvas.Top="10" Width="50" 
Height="25"  Fill="green" 
Stroke="red" StrokeThickness="4" />

  <Canvas.RenderTransform>  
  <TransformGroup>  
    <SkewTransform AngleY="45" />  
    <TranslateTransform X="0" 
Y="0"/>  
  </TransformGroup>  
  </Canvas.RenderTransform>
  </Canvas>
</Canvas>
    Описание
    Искажение фигуры в вертикальном направлении. Заметно смещение верхней левой точки объекта относительно исходной фигуры
    № Код Вид в браузере
    6.5.6 
    <Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="200" Height="200"
Background="White"
x:Name="Page">
<!--Исходная фигура-->
<Rectangle Canvas.Left="10" 
Canvas.Top="10" Width="100" 
Height="50"  Fill="yellow" 
Stroke="red" StrokeThickness="4"/>
<Rectangle Canvas.Left="10" 
Canvas.Top="10" Width="50" 
Height="25"  Fill="green" 
Stroke="red" StrokeThickness="4" />

<!--Трансформированная фигура -->
<Canvas Width="200" 
Height="200" Canvas.Left="0" 
Canvas.Top="0">
<Rectangle Canvas.Left="10" 
Canvas.Top="10" Width="100" 
Height="50"  Fill="yellow" 
Stroke="red" StrokeThickness="4"/>
<Rectangle Canvas.Left="10" 
Canvas.Top="10" Width="50" 
Height="25"  Fill="green" 
Stroke="red" StrokeThickness="4" />

  <Canvas.RenderTransform>  
  <TransformGroup>  
    <SkewTransform AngleY="45" />  
    <TranslateTransform X="0" 
Y="-10"/>  
  </TransformGroup>  
  </Canvas.RenderTransform>
  </Canvas>
</Canvas>
    Описание
    Искажение фигуры в горизонтальном направлении. Компенсация смещения
    № Код Описание
    6.5.7 
    <Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="420" Height="220"
Background="White"
x:Name="Page">
<TextBlock
Canvas.Left="50" 
Canvas.Top="50"
  FontFamily="Arial"
  FontSize="30"
  Foreground="Red"
  Text="Текст" 
  />

<TextBlock
Canvas.Left="150" 
Canvas.Top="50"
  FontFamily="Arial"
  FontSize="30"
  Foreground="Red"
  Text="Текст" >
  <TextBlock.RenderTransform>
 <SkewTransform AngleX="45" />  
  </TextBlock.RenderTransform>
</TextBlock>

<TextBlock
Canvas.Left="50" 
Canvas.Top="100"
  FontFamily="Arial"
  FontSize="30"
  Foreground="Red"
  Text="Текст" >
  <TextBlock.RenderTransform>
 <SkewTransform AngleY="45" />  
  </TextBlock.RenderTransform>
</TextBlock>

<TextBlock
Canvas.Left="150" 
Canvas.Top="100"
  FontFamily="Arial"
  FontSize="30"
  Foreground="Red"
  Text="Текст" >
  <TextBlock.RenderTransform>
 <SkewTransform AngleX="20" 
AngleY="20"  />  
  </TextBlock.RenderTransform>
</TextBlock>
</Canvas>
    		 Искажение текста
    Вид в браузере
    № Код Вид в браузере
    6.5.8 
    <Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="200" Height="200"
Background="White"
x:Name="Page">
<!--Исходная фигура-->
<Rectangle Canvas.Left="10" 
Canvas.Top="10" Width="100" 
Height="50"  Fill="yellow" 
Stroke="red" StrokeThickness="4"/>
<Rectangle Canvas.Left="10" 
Canvas.Top="10" Width="50" 
Height="25"  Fill="green" 
Stroke="red" StrokeThickness="4" />

<!--Трансформированная фигура -->
<Canvas Width="0" Height="0" 
Canvas.Left="0" Canvas.Top="0">
<Rectangle Canvas.Left="10"
 Canvas.Top="10" Width="100" 
Height="50"  Fill="yellow" 
Stroke="red" StrokeThickness="4"/>
<Rectangle Canvas.Left="10" 
Canvas.Top="10" Width="50" 
Height="25"  Fill="green" 
Stroke="red" StrokeThickness="4" />

  <Canvas.RenderTransform>    
    <SkewTransform CenterX="0" 
CenterY="10" AngleX="45" />  
  </Canvas.RenderTransform>
  </Canvas>
</Canvas>
    Описание
    Искажение фигуры в горизонтальном направлении. Компенсация смещения с помощью атрибутов CenterX и CenterY
    № Код Вид в браузере
    6.5.9 
    <Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="200" Height="200"
Background="White"
x:Name="Page">
<!--Исходная фигура-->
<Rectangle Canvas.Left="10" 
Canvas.Top="10" Width="100" 
Height="50"  Fill="yellow" 
Stroke="red" StrokeThickness="4"/>
<Rectangle Canvas.Left="10" 
Canvas.Top="10" Width="50" 
Height="25"  Fill="green" 
Stroke="red" StrokeThickness="4" />

<!--Трансформированная фигура -->
<Canvas Width="0" Height="0" 
Canvas.Left="0" Canvas.Top="0">
<Rectangle Canvas.Left="10" Canvas.Top="10" 
Width="100" Height="50"  

Fill="yellow" Stroke="red" 
StrokeThickness="4"/>
<Rectangle Canvas.Left="10"
 Canvas.Top="10" Width="50" 
Height="25"  Fill="green" 
Stroke="red" StrokeThickness="4" />

  <Canvas.RenderTransform>    
    <SkewTransform CenterX="10" 
CenterY="0" AngleY="45" />  
  </Canvas.RenderTransform>
  </Canvas>
</Canvas>
    Описание
    Искажение фигуры в вертикальном направлении. Компенсация смещения с помощью атрибутов CenterX и CenterY
    № Код Вид в браузере
    6.5.10 
    <Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="200" Height="200"
Background="White"
x:Name="Page">
<!--Исходная фигура-->
<Rectangle Canvas.Left="10" 
Canvas.Top="10" Width="100" 
Height="50"  Fill="yellow" 
Stroke="red" StrokeThickness="4"/>
<Rectangle Canvas.Left="10" 
Canvas.Top="10" Width="50" 
Height="25"  Fill="green" 
Stroke="red" StrokeThickness="4" />

<!--Трансформированная фигура -->
<Canvas Width="0" Height="0" 
Canvas.Left="0" Canvas.Top="0">
<Rectangle Canvas.Left="10" 
Canvas.Top="10" Width="100" 
Height="50"  Fill="yellow" 
Stroke="red" StrokeThickness="4"/>
<Rectangle Canvas.Left="10" 
Canvas.Top="10" Width="50" 
Height="25"  Fill="green" 
Stroke="red" StrokeThickness="4" />

  <Canvas.RenderTransform>    
  <SkewTransform CenterX="10" 
CenterY="10" AngleX="25"
 AngleY="25" />  
  </Canvas.RenderTransform>
  </Canvas>
</Canvas>
    Описание
    Искажение фигуры в обоих направлениях. Компенсация смещения с помощью атрибутов CenterX и CenterY

    MatrixTransform

    Трансформация MatrixTransform представляет собой способ компактной записи серии преобразований. Графически эта команда не содержит собственных изменений объекта. Она лишь выражает применение одной или нескольких команд типа RotateTransform, SkewTransform, ScaleTransform и TranslateTransform. Математически, все преобразования могут быть выражены в виде матрицы третьего порядка следующим образом:

    $$$$\begin{vmatrix} M_{11}M_{12} 0\\ M_{21}M_{22}0\\ OffsetXOffsetY1 \end{vmatrix}$$ $$

    Команда будет выглядеть так:

    (M11, M12, M21, M22, OffsetX, OffsetY)

    Каждое из преобразований представляется своей матрицей и соответствующей командой MatrixTransform.

    Команда TranslateTransform:

    $$$$\begin{vmatrix} 100\\ 010\\ dxdy1 \end{vmatrix}$$ $$
    Matrix="1 0 0 1 dx dy"

    Команда RotateTransform:

    $$$$\begin{vmatrix} cos(a)sin(a)0\\ -sin(a)cos(a)0\\ 001 \end{vmatrix}$$ $$
    Matrix=" cos(a) sin(a) –sin(a) cos(a) 0 0"

    Команда ScaleTransform:

    $$$$\begin{vmatrix} sx00\\ 0sy0\\ 001 \end{vmatrix}$$ $$
    Matrix=" sx 0 0 sy 0 0"

    Команда SkewTransform (AngleX):

    $$$$\begin{vmatrix} 100\\ tg(a)10\\ 001 \end{vmatrix}$$ $$
    Matrix="1 0 tg(a) 1 0 0"

    Команда SkewTransform (AngleY):

    $$$$\begin{vmatrix} 1tg(a)0\\ 010\\ 001 \end{vmatrix}$$ $$
    Matrix="1 tg(a) 0 1 0 0"

    Практически, для перехода к новой форме записи нужно просто взять исходные параметры команды и аккуратно их подставить в нужные позиции. Для команд RotateTransform, SkewTransform (AngleX) и SkewTransform (AngleY) дополнительно следует вычислить тригонометрические функции углов. В табл. 6.6 приводятся примеры использования этой записи.

    Команда MatrixTransform
    № Код Вид в браузере
    6.6.1 
    <Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="200" Height="150"
Background="White"
x:Name="Page">
<Rectangle Canvas.Left="25" 
Canvas.Top="25" Width="50" 
Height="25"  Fill="skyblue" 
Stroke="red" StrokeThickness="2"/>
  
<Rectangle Canvas.Left="25" 
Canvas.Top="25" Width="50" 
Height="25"  Fill="palegreen" 
Stroke="red" StrokeThickness="2"
 RenderTransformOrigin="0.5,0.5">
  <Rectangle.RenderTransform>    
        
  <MatrixTransform Matrix="1 0 0 1 100 75"/>
    <!--<TranslateTransform X="100" 
Y="75"/>-->
  </Rectangle.RenderTransform>
</Rectangle>
  
</Canvas>
    Описание
    Запись команды TranslateTransform в форме MatrixTransform
    № Код Вид в браузере
    6.6.2 
    <Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="200" Height="150"
Background="White"
x:Name="Page">
<Rectangle Canvas.Left="25" 
Canvas.Top="25" Width="50" 
Height="25"  Fill="skyblue" 
Stroke="red" StrokeThickness="2"/>
  
<Rectangle Canvas.Left="25" 
Canvas.Top="25" Width="50" 
Height="25"  Fill="palegreen" 
Stroke="red" StrokeThickness="2" 
RenderTransformOrigin="0.5,0.5">
  <Rectangle.RenderTransform>    
  <MatrixTransform x:Name="my
MatrixTransform">
           <MatrixTransform.Matrix >
    <Matrix M11="1" 
M12="0" M21="0" M22="1"  
OffsetX="100" OffsetY="75"/>
    <!--<TranslateTransform X="100" 
Y="75"/>-->
     </MatrixTransform.Matrix>
         </MatrixTransform>
  </Rectangle.RenderTransform>
</Rectangle>
  
</Canvas>
    Описание
    Задание атрибута x:Name позволяет обращаться к преобразованию программным способом. Кроме того, здесь, в отличие от предыдущего примера используется запись в виде тегов
    № Код Вид в браузере
    6.6.3 
    <Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="200" Height="100"
Background="White"
x:Name="Page">
<Rectangle Canvas.Left="25" 
Canvas.Top="25" Width="50" 
Height="25"  Fill="skyblue" 
Stroke="red" StrokeThickness="2"/>
  
<Rectangle Canvas.Left="25" 
Canvas.Top="50" Width="50" 
Height="25"  Fill="palegreen" 
Stroke="red" StrokeThickness="2" 
RenderTransformOrigin="0.5,0.5">
  <Rectangle.RenderTransform>    
        
   <MatrixTransform Matrix="2 0 0 1 0 0"/>
   <!--<ScaleTransform ScaleX="2" 
ScaleY="1"  />  -->
  </Rectangle.RenderTransform>
</Rectangle>
  
</Canvas>
    Описание
    Запись команды ScaleTransform в форме MatrixTransform. Заметно смещение фигуры по сравнению с результатом, получаемым применением команды ScaleTransform
    № Код Вид в браузере
    6.6.4 
    <Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="200" Height="100"
Background="White"
x:Name="Page">
<Rectangle Canvas.Left="25" 
Canvas.Top="25" Width="50" Height="25"  
Fill="skyblue" Stroke="red" 
StrokeThickness="2"/>
  
<Rectangle Canvas.Left="25" 
Canvas.Top="50" Width="50" 
Height="25"  Fill="palegreen" 
Stroke="red" StrokeThickness="2" 
RenderTransformOrigin="0.5,0.5">
  <Rectangle.RenderTransform>    
          
    <MatrixTransform Matrix="2 0 0 1 25 0"/>
    <!--<ScaleTransform ScaleX="2" 
ScaleY="1"  />  -->
  </Rectangle.RenderTransform>
</Rectangle>
  
</Canvas>
    Описание
    Запись команды ScaleTransform в форме MatrixTransform. Для компенсации смещения указывается величина смещения, равная 25. Фактически, две последние цифры в значении атрибута Matrix – это смещение по горизонтали и вертикали
    № Код Вид в браузере
    6.6.5 
    <Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="200" Height="100"
Background="White"
x:Name="Page">
<Rectangle Canvas.Left="25" 
Canvas.Top="25" Width="50" 
Height="25"  Fill="skyblue" 
Stroke="red" StrokeThickness="2"/>
  
<Rectangle Canvas.Left="25" 
Canvas.Top="50" Width="50" 
Height="25"  Fill="palegreen" 
Stroke="red" StrokeThickness="2" 
RenderTransformOrigin="0.5,0.5">
  <Rectangle.RenderTransform>    
          
    <MatrixTransform x:Name="
myMatrixTransform">
           <MatrixTransform.Matrix >
    <Matrix M11="2" M12="0" 
M21="0" M22="1"  OffsetX="25" 
OffsetY="0"/>
    <!--<ScaleTransform ScaleX="2" 
ScaleY="1"  />  -->
     </MatrixTransform.Matrix>
         </MatrixTransform>    
  </Rectangle.RenderTransform>
</Rectangle>
  
</Canvas>
    Описание
    Запись команды ScaleTransform в форме MatrixTransform. Matrix превращается в тег, для которого указываются набор атрибутов. Здесь явно видно, что OffsetX и OffsetY определяют трансляцию (перенос) фигуры
    № Код Вид в браузере
    6.6.6 
    <Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="210" Height="210"
Background="White"
x:Name="Page">
<!--Исходная фигура-->
<Rectangle Canvas.Left="105" 
Canvas.Top="4" Width="100" 
Height="50"  Fill="yellow" 
Stroke="red" StrokeThickness="4"/>
<Rectangle Canvas.Left="105" 
Canvas.Top="4" Width="50"
 Height="25"  Fill="green" 
Stroke="red" StrokeThickness="4" />

<!--Повернутая фигура-->  
<Canvas Width="210" Height="210" 
Canvas.Left="0" Canvas.Top="0">
<Rectangle Canvas.Left="105" 
Canvas.Top="4" Width="100" 
Height="50"  Fill="yellow" 
Stroke="red" StrokeThickness="4"/>
<Rectangle Canvas.Left="105" 
Canvas.Top="4" Width="50"
 Height="25"  Fill="green" 
Stroke="red" StrokeThickness="4" />

  <Canvas.RenderTransform>
    <MatrixTransform Matrix="0.7071 
0.7071 -0.7071 0.7071 0 0"/>    
    <!--<RotateTransform 
Angle="45"/>-->    
  </Canvas.RenderTransform>
  </Canvas>
</Canvas>
    Описание
    Запись команды RotateTransform в форме MatrixTransform
    № Код Вид в браузере
    6.6.7 
    <Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="200" Height="200"
Background="White"
x:Name="Page">
<!--Исходная фигура-->
<Rectangle Canvas.Left="10" 
Canvas.Top="10" Width="100" 
Height="50"  Fill="yellow" 
Stroke="red" StrokeThickness="4"/>
<Rectangle Canvas.Left="10" Canvas.Top="10" 
Width="50" Height="25"  Fill="green" 
Stroke="red" StrokeThickness="4" />

<!--Трансформированная фигура -->
<Canvas Width="200" Height="200" 
Canvas.Left="0" Canvas.Top="0">
<Rectangle Canvas.Left="10" 
Canvas.Top="10" Width="100" 
Height="50"  Fill="yellow"
 Stroke="red" StrokeThickness="4"/>
<Rectangle Canvas.Left="10" 
Canvas.Top="10" Width="50" 
Height="25"  Fill="green" 
Stroke="red" StrokeThickness="4" />

  <Canvas.RenderTransform>    
  <MatrixTransform Matrix="1 0 1 1 0 0"/>  
    <!--<SkewTransform AngleX=
"45" />  -->
  </Canvas.RenderTransform>
  </Canvas>
</Canvas>
    Описание
    Запись команды SkewTransform в форме MatrixTransform. tg(45)=1
    № Код Вид в браузере
    6.6.8 
    <Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="200" Height="200"
Background="White"
x:Name="Page">
<!--Исходная фигура-->
<Rectangle Canvas.Left="10" 
Canvas.Top="10" Width="100" 
Height="50"  Fill="yellow" 
Stroke="red" StrokeThickness="4"/>
<Rectangle Canvas.Left="10" 
Canvas.Top="10" Width="50" 
Height="25"  Fill="green" 
Stroke="red" StrokeThickness="4" />

<!--Трансформированная фигура -->
<Canvas Width="200" Height="200" 
Canvas.Left="0" Canvas.Top="0">
<Rectangle Canvas.Left="10" 
Canvas.Top="10" Width="100" 
Height="50"  Fill="yellow" 
Stroke="red" StrokeThickness="4"/>
<Rectangle Canvas.Left="10" 
Canvas.Top="10" Width="50" 
Height="25"  Fill="green" 
Stroke="red" StrokeThickness="4" />

  <Canvas.RenderTransform>  
  <TransformGroup>  
  <MatrixTransform Matrix="1 1 0 1 0 0"/>  
    <!--<SkewTransform AngleY="45" />-->      
  </TransformGroup>  
  </Canvas.RenderTransform>
  </Canvas>
</Canvas>
    Описание
    Запись команды SkewTransform в форме MatrixTransform. tg(45)=1

    Мы разобрали запись в виде матрицы отдельных команд. Немного более сложно обстоят дела с записей нескольких команд, например, TranslateTransform и SkewTransform в виде одной матрицы. Результирующая матрица представляет собой произведение отдельных матриц. Рассмотрим для начала произведение матриц, содержащих по две строки и два столбца:

    $$$$ \begin{vmatrix} a_{11}a_{12}\\ a_{21}a_{22} \end{vmatrix}* \begin{vmatrix} b_{11}b_{12}\\ b_{21}b_{22} \end{vmatrix}= \begin{vmatrix} a_{11}*b_{11}+a_{12}*b_{21}a_{11}*b_{12}+a_{12}*b_{22}\\ a_{21}*b_{11}+a_{22}*b_{21}a_{21}*b_{12}+a_{22}*b_{22} \end{vmatrix}$$ $$

    Обратите внимание на индексы – индекс 12, к примеру, означает, что элемент b12 находится в первой строке и втором столбце. Результирующая матрица получается сложением и умножением отдельных элементов по следующей схеме (рис. 6.10):

    (рис 6.10) Умножение матриц второго порядка

    Аналогичным образом осуществляется умножение матриц третьего порядка:

    $$$$ \begin{vmatrix} a_{11}a_{12}a_{13\\ a_{21}a_{22}a_{23}\\ a_{31}a_{32}a_{33} \end{vmatrix}* \begin{vmatrix} b_{11}b_{12}b_{13}\\ b_{21}b_{22}b_{23}\\ b_{31}b_{32}b_{33} \end{vmatrix}=\\= \begin{vmatrix} a_{11}*b_{11}+a_{12}*b_{21}+a_{13}*b_{31}a_{11}*b_{12}+a_{12}*b_{22}+a_{13}*b_{32}a_{11}*b_{13}+a_{12}*b_{23}+a_{13}*b_{33}\\ a_{21}*b_{11}+a_{22}*b_{21}+a_{23}*b_{31}a_{21}*b_{12}+a_{22}*b_{22}+a_{23}*b_{32}a_{21}*b_{13}+a_{22}*b_{23}+a_{23}*b_{33}\\ a_{31}*b_{11}+a_{32}*b_{21}+a_{33}*b_{31}a_{31}*b_{12}+a_{32}*b_{22}+a_{33}*b_{32}a_{31}*b_{13}+a_{32}*b_{23}+a_{33}*b_{33} \end{vmatrix}$$ $$

    Для отдельного элемента результирующей матрицы, находящегося во второй строке первого столбца можно выделить схему (рис. 6.11):

    (рис 6.11) Умножение матриц третьего порядка

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

    Таблица 6.7 Команда MatrixTransform для нескольких преобразований
    № Код Вид в браузере
    6.7.1 
    <Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="200" Height="200"
Background="White"
x:Name="Page">
<!--Исходная фигура-->
<Rectangle Canvas.Left="10" 
Canvas.Top="10" Width="100" 
Height="50"  Fill="yellow" 
Stroke="red" StrokeThickness="4"/>
<Rectangle Canvas.Left="10" 
Canvas.Top="10" Width="50" 
Height="25"  Fill="green" 
Stroke="red" StrokeThickness="4" />

<!--Трансформированная фигура -->
<Canvas Width="200" Height="200"
 Canvas.Left="0" Canvas.Top="0">
<Rectangle Canvas.Left="10" 
Canvas.Top="10" Width="100" 
Height="50"  Fill="yellow" 
Stroke="red" StrokeThickness="4"/>
<Rectangle Canvas.Left="10" 
Canvas.Top="10" Width="50" 
Height="25"  Fill="green" 
Stroke="red" StrokeThickness="4" />

  <Canvas.RenderTransform>  
  
  <MatrixTransform Matrix="1 0 1 1 -10 0"/>
   <!--<SkewTransform AngleX="45" />  
   <TranslateTransform X="-10" 
Y="0"/>  -->

  
  </Canvas.RenderTransform>
  </Canvas>
</Canvas>
    Описание

    Преобразование состоит из двух команд. Запишем их отдельные матрицы:

    TranslateTransform X="-10" Y="0":

    $$$$\begin{vmatrix} 100\\ 010\\ -1001 \end{vmatrix}$$ $$

    SkewTransform AngleX="45":

    $$$$\begin{vmatrix} 100\\ 110\\ 001 \end{vmatrix}$$ $$

    Вычисляем произведение матриц:

    $$$$ \begin{vmatrix} 100\\ 010\\ -1001 \end{vmatrix}* \begin{vmatrix} 100\\ 110\\ 001 \end{vmatrix}=\\= \begin{vmatrix} 1*1+0*1+0*01*0+0*1+0*01*0+0*0+0*1\\ 0*1+1*1+0*00*0+1*1+0*00*0+1*0+0*1\\ -10*1+0*1+1*0-10*0+0*1+1*0-10*0+0*0+1*1 \end{vmatrix}=\\= $$\begin{vmatrix} 100\\ 110\\ -1001 \end{vmatrix}$$ $$

    tg(45)=1

    Результирующая команда: Matrix="1 0 1 1 -10 0"

    Запись серии команд в виде матрицы позволяет сократить запись и, следовательно, уменьшить размер XAML – документа.

    Вычисление матриц может показаться сложно задачей, существенно затрудняющей создание пользовательского интерфейса приложения. Однако для перемножения матриц в C# уже есть встроенные методы и классы. Типичный фрагмент кода для получения результирующей матрицы записывается достаточно лаконично:

    private void multiplicationExample()
{

    Matrix matrix1 = new Matrix(5, 10, 15, 20, 25, 30);
    Matrix matrix2 = new Matrix(2, 4, 6, 8, 10, 12);

    // matrixResult is equal to (70,100,150,220,240,352) 
    Matrix matrixResult = Matrix.Multiply(matrix1, matrix2);

    // matrixResult2 is also
    // equal to (70,100,150,220,240,352) 
    Matrix matrixResult2 = matrix1 * matrix2;

}

    Готовая матрица может быть связана с графическим объектом на стадии выполнения кода.

    Вычисление матриц в программе Mathcad

    Для вычисления матриц может применяться еще одно средство, позволяющее весьма наглядно понять логику работы. Пакет ) – мощное средство для решения широкого класса вычислительных задач, содержит удобные инструменты для работы с матрицами. После установки и запуска программы можно сразу приступать к вычислениям. В главном меню выбираем "Insert – Matrix" ( или нажимаем Ctrl+M) (рис. 6.12):

    (рис 6.12) Вставка матрицы

    В появившемся диалоговом окне выбираем матрицы размером 3х3 (рис.6.13 ):

    (рис 6.13) Определение размера матрицы

    В документе появляется шаблон, в который можно вводить числа (рис. 6.14):

    (рис 6.14) Шаблон матрицы

    После завершения ввода вводим знак равенства "=" и программа автоматически отображает результирующую матрицу (рис. 6.15):

    (рис 6.15) Готовые матрицы

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

    Страницы:

    Введение в трансформации.

    Пакет Microsoft Expression Blend содержит визуальные средства для трансформации объектов (рис. 6.1):

    (рис 6.1) Трансформация объектов в Microsoft Expression Blend

    Группа инструментов "Transform" – отличный помощник при изучении трансформаций. В XAML – графике подерживаются следующие трансформации:

  • TranslateTransform (трансляция, перенос) – перемещение объекта к новым координатам X и Y.
  • RotateTransform ( вращение) – поворот на заданный угол Angle.
  • ScaleTransform ( масштабирование) – изменение геометрических размеров объекта при помощи кратных величин ScaleX и\или ScaleY.
  • SkewTransform ( искажение) – смещение объекта вдоль горизонтальной и\или вертикальной оси, задаваемое с помощью углов AngleX и AngleY.
  • MatrixTransform (M11, M12, M21, M22, OffsetX, OffsetY) – задание параметров трансформации в виде матрицы.
    •

    Команды аддитивны, то есть при последовательном применении нескольких команд результат будет представлять собой сумму отдельных преобразований.

    TranslateTransform

    Команда TranslateTransform представляет собой перенос начала системы отсчета в новую точку с заданными координатами. Рассмотрим следующий фрагмент кода:

    <Rectangle Canvas.Left="25" 
Canvas.Top="25" Width="50" 
Height="25"  Fill="skyblue" 
Stroke="red" StrokeThickness="2"/>
  
  <Rectangle Canvas.Left="25" 
  Canvas.Top="25" Width="50" 
  Height="25"  Fill="palegreen" 
  Stroke="red" StrokeThickness="2" >
    <Rectangle.RenderTransform>    
      <TranslateTransform X="100" 
      Y="75"/>    
    </Rectangle.RenderTransform>
  </Rectangle>

    Координаты обоих прямоугольников и их геометрические размеры совпадают. Следовательно, на рисунке второй прямоугольник должен был бы наложится на первый. Но для второго прямоугольника была применена команда TranslateTransform и теперь начало его собственной системы координат располагается в точке 100, 75 (рис. 6.2):

    (рис 6.2) Применение команды TranslateTransform

    Трансформация применяется к фигуре при помощи специального тега RenderTransform. В табл. 6.1 приводятся примеры использования этой команды.

    Команда TranslateTransform
    № Код Вид в браузере
    6.1.1 
    <Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="200" Height="150"
Background="White"
x:Name="Page">
<Rectangle Canvas.Left="25" 
Canvas.Top="25" Width="50" 
Height="25"  Fill="skyblue" 
Stroke="red" StrokeThickness="2"/>
  
  <Rectangle Canvas.Left="25" 
Canvas.Top="25" Width="50" 
Height="25"  Fill="palegreen" 
Stroke="red" StrokeThickness="2" 
RenderTransformOrigin="0.5,0.5">
  <Rectangle.RenderTransform>    
    <TranslateTransform X="100" 
Y="75"/>    
  </Rectangle.RenderTransform>
</Rectangle>
  
</Canvas>
    Описание
    Перенос фигуры в точку с координатами 100, 75. Как обычно, координаты отсчитываются от верхнего левого угла прямоугольника. Однако специальный атрибут ) позволяет установить центральную точку, относительно которой будет осуществляться преобразование. Она определяется в кратных долях от геометрических размерах объекта. Понятно, что в случае команды трансляции эффект практически не будет заметен.
    № Код Вид в браузере
    6.1.2 
    <Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="200" Height="150"
Background="White"
x:Name="Page">
<Rectangle Canvas.Left="25" 
Canvas.Top="25" Width="50" 
Height="25"  Fill="skyblue" 
Stroke="red" StrokeThickness="2"/>
  
  <Canvas Width="180" 
Height="80" Canvas.Left="10" 
Canvas.Top="10">
  <Rectangle Canvas.Left="25" 
Canvas.Top="25" Width="50" 
Height="25"  Fill="palegreen" 
Stroke="red" StrokeThickness="2" />
  <Canvas.RenderTransform>    
    <TranslateTransform X="100" 
Y="75"/>    
  </Canvas.RenderTransform>
  </Canvas>
</Canvas>
    Описание
    Применение команды TranslateTransform для элемента Canvas. Внутри группы расположен один элемент
    № Код Вид в браузере
    6.1.3 
    <Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="200" Height="100"
Background="White"
x:Name="Page">
  
  <TextBlock
  FontFamily="Arial"
  FontSize="24"
  FontWeight="Bold" 
  Foreground="Green"
  Canvas.Left="10"
  Canvas.Top="30"
  Text="Translate"></TextBlock>
  
<TextBlock
  FontFamily="Arial"
  FontSize="24"
  FontWeight="Bold" 
  Foreground="Green"
  Canvas.Left="10"
  Canvas.Top="30"
  Text="Translate">
  <TextBlock.RenderTransform>
    <TranslateTransform X="30" 
Y="30" />
  </TextBlock.RenderTransform>
</TextBlock>


</Canvas>
    Описание
    Трансформация текста
    № Код Вид в браузере
    6.1.4 
    <Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="200" Height="100"
Background="White"
x:Name="Page">
  
  <TextBlock
  FontFamily="Arial"
  FontSize="40"
  FontWeight="Bold" 
  Foreground="Gray"
  Canvas.Left="10"
  Canvas.Top="30"
  Text="Translate">
  <TextBlock.RenderTransform>
    <TranslateTransform X="2" 
Y="2" />
  </TextBlock.RenderTransform>
</TextBlock>

  <TextBlock
  FontFamily="Arial"
  FontSize="40"
  FontWeight="Bold" 
  Foreground="Green"
  Canvas.Left="10"
  Canvas.Top="30"
  Text="Translate"></TextBlock>
  


</Canvas>
    Описание
    Трансформация текста – получение эффекта тени

    RotateTransform

    Команда RotateTransform поворачивает систему координат относительно точки отсчета на задаваемый угол (рис. 6.3):

    (рис 6.3) Применение команды RotateTransform

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

    Команды RotateTransform и TranslateTransform
    № Код Вид в браузере
    6.2.1 
    <Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="210" Height="210"
Background="White"
x:Name="Page">
<!--Исходная фигура-->
<Rectangle Canvas.Left="105" 
Canvas.Top="4" Width="100" 
Height="50"  Fill="yellow" 
Stroke="red" StrokeThickness="4"/>
<Rectangle Canvas.Left="105" 
Canvas.Top="4" Width="50" 
Height="25"  Fill="green" 
Stroke="red" StrokeThickness="4" />

  <!--Повернутая фигура-->  
  <Canvas Width="210" 
Height="210" Canvas.Left="0" 
Canvas.Top="0">
  <Rectangle Canvas.Left="105" 
Canvas.Top="4" Width="100" 
Height="50"  Fill="yellow" S
troke="red" StrokeThickness="4"/>
  <Rectangle Canvas.Left="105" 
Canvas.Top="4" Width="50" 
Height="25"  Fill="green" 
Stroke="red" StrokeThickness="4" />

  <Canvas.RenderTransform>    
    <RotateTransform Angle="45"/>    
  </Canvas.RenderTransform>
  </Canvas>
</Canvas>
    Описание
    Поворот системы координат на 45 градусов. Фигура поворачивается и смещается
    № Код Вид в браузере
    6.2.2 
    <Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="210" Height="210"
Background="White"
x:Name="Page">
<!--Исходная фигура-->
<Rectangle Canvas.Left="105" 
Canvas.Top="4" Width="100" 
Height="50"  Fill="yellow" 
Stroke="red" StrokeThickness="4"/>
<Rectangle Canvas.Left="105" 
Canvas.Top="4" Width="50" 
Height="25"  Fill="green" 
Stroke="red" StrokeThickness="4" />

  <!--Повернутая фигура-->  
  <Canvas Width="0" 
Height="0" Canvas.Left="0" 
Canvas.Top="0">
  <Rectangle Canvas.Left="105" 
Canvas.Top="4" Width="100" 
Height="50"  Fill="yellow" 
Stroke="red" StrokeThickness="4"/>
  <Rectangle Canvas.Left="105" 
Canvas.Top="4" Width="50" 
Height="25"  Fill="green" 
Stroke="red" StrokeThickness="4" />
 <Canvas.RenderTransform>
  <TransformGroup>
    <RotateTransform Angle="45"/>
    <TranslateTransform X="33.5" 
Y="-73"/>

    </TransformGroup>
  </Canvas.RenderTransform>  

</Canvas>
</Canvas>
    Описание
    Для получения поворота фигуры вокруг своей оси после поворота начало отсчета было перенесено при помощи отдельных команд (рис 6.4) Опорная точка для поворачиваемой фигуры в Microsoft Expression Blend
    № Код Вид в браузере
    6.2.3 
    <Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="200" Height="100"
Background="White"
x:Name="Page">
<TextBlock Text="Поворот" 
FontSize="16" Foreground="Blue" 
Canvas.Left="50" Canvas.Top="10">
  <TextBlock.RenderTransform>
    <RotateTransform Angle="45" />
  </TextBlock.RenderTransform>
</TextBlock>
</Canvas>
    Описание
    Поворот текста
    № Код Вид в браузере
    6.2.4 
    <Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="210" Height="210"
Background="White"
x:Name="Page">
<!--Исходная фигура-->
<Rectangle Canvas.Left="105" 
Canvas.Top="4" Width="100" 
Height="50"  Fill="yellow" 
Stroke="red" StrokeThickness="4"/>
<Rectangle Canvas.Left="105" 
Canvas.Top="4" Width="50" 
Height="25"  Fill="green" 
Stroke="red" StrokeThickness="4" />

  <!--Повернутая фигура-->  
  <Canvas Width="210" 
Height="210" Canvas.Left="0" 
Canvas.Top="0">
  <Rectangle Canvas.Left="105" 
Canvas.Top="4" Width="100" 
Height="50"  Fill="yellow" 
Stroke="red" StrokeThickness="4"/>
  <Rectangle Canvas.Left="105" 
Canvas.Top="4" Width="50" 
Height="25"  Fill="green" 
Stroke="red" StrokeThickness="4" />

  <Canvas.RenderTransform>    
    <RotateTransform Angle="45" 
CenterX="107" CenterY="0" />
    </Canvas.RenderTransform>
  </Canvas>
</Canvas>
    Описание

    Здесь мы не стали применять команду TranslateTransform для переноса фигуры. Дело в том, что синтаксис самой команды RotateTransform поддерживает атрибуты CenterX и CenterY. Задавая их координаты можно определить точку, относительно которой происходит преобразование. Переключившись в режим дизайна видим расположение преобразованной фигуры и контуры элемента Canvas (рис. 6.5):

    (рис 6.5) Конутры элемента Canvas при задании опорной точки с помощью атрибутов CenterX и CenterY

    Атрибуты CenterX, CenterY применяются также в командах ScaleTransform и SkewTransform. Хотя в большинстве случаев, смещение трансформируемой фигуры, определяемое с помощью TranslateTransform кажется более наглядным, применение этих атрибутов делает запись графики более лаконичной

    ScaleTransform

    Команда ScaleTransform позволяет масштабировать объект с указанием кратности вдоль горизонтальной и вертикальной осей (рис. 6.6):

    (рис 6.6) Применение команды ScaleTransform

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

    ScaleTransform ScaleX="2"

    Результатом станет увеличение фигуры в два раза только в горизонтальном направлении. В табл. 6.3 приведены примеры использования этой команды.

    Команда ScaleTransform
    № Код Вид в браузере
    6.3.1 
    <Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="200" Height="100"
Background="White"
x:Name="Page">
<Rectangle Canvas.Left="25" 
Canvas.Top="25" Width="50" 
Height="25"  Fill="skyblue" 
Stroke="red" StrokeThickness="2"/>
  
  <Rectangle Canvas.Left="25" 
Canvas.Top="25" Width="50" 
Height="25"  Fill="palegreen" 
Stroke="red" StrokeThickness="2" 
Opacity="0.3" >
  <Rectangle.RenderTransform>    
    <ScaleTransform ScaleX="2" 
ScaleY="2" />  
  </Rectangle.RenderTransform>
</Rectangle>
  
</Canvas>
    Описание
    Увеличение фигуры в два раза по горизонтали и вертикали. Отсчет осуществляется относительно верхней левой точки. Задав полупрозрачность, замечаем, что площадь фигуры увеличилась ровно в четыре раза
    № Код Вид в браузере
    6.3.2 
    <Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="200" Height="100"
Background="White"
x:Name="Page">
<Rectangle Canvas.Left="25" 
Canvas.Top="25" Width="50" 
Height="25"  Fill="skyblue" 
Stroke="red" StrokeThickness="2"/>
  
<Rectangle Canvas.Left="25" 
Canvas.Top="50" Width="50" 
Height="25"  Fill="palegreen" 
Stroke="red" StrokeThickness="2" >
  <Rectangle.RenderTransform>    
    <ScaleTransform ScaleX="1" 
ScaleY="1" />  
  </Rectangle.RenderTransform>
</Rectangle>
  
</Canvas>
    Описание
    Применение команды ScaleTransform с масштабом, равным 1, не изменяет размеров прямоугольника (Для сопоставления прямоугольники смещены Canvas.Top ="25" и Canvas.Top ="50"
    № Код Вид в браузере
    6.3.3 
    <Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="200" Height="100"
Background="White"
x:Name="Page">
<Rectangle Canvas.Left="25" 
Canvas.Top="25" Width="50" 
Height="25"  Fill="skyblue"
 Stroke="red" StrokeThickness="2"/>
  
<Rectangle Canvas.Left="25" 
Canvas.Top="50" Width="50" 
Height="25"  Fill="palegreen" 
Stroke="red" StrokeThickness="2" >
  <Rectangle.RenderTransform>    
    <ScaleTransform ScaleX="2" 
ScaleY="1"  />  
  </Rectangle.RenderTransform>
</Rectangle>
  
</Canvas>
    Описание
    Увеличение прямоугольника в два раза по горизонтали
    № Код Вид в браузере
    6.3.4 
    <Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="200" Height="150"
Background="White"
x:Name="Page">
<Rectangle Canvas.Left="25" 
Canvas.Top="25" Width="50" 
Height="25"  Fill="skyblue" 
Stroke="red" StrokeThickness="2"/>
  
<Rectangle Canvas.Left="25" 
Canvas.Top="50" Width="50" 
Height="25"  Fill="palegreen" 
Stroke="red" StrokeThickness="2" >
  <Rectangle.RenderTransform>    
    <ScaleTransform ScaleX="1" 
ScaleY="2"  />  
  </Rectangle.RenderTransform>
</Rectangle>
  
</Canvas>
    Описание
    Увеличение прямоугольника в два раза по вертикали
    № Код Вид в браузере
    6.3.5 
    <Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="200" Height="150"
Background="White"
x:Name="Page">
<Rectangle Canvas.Left="25" 
Canvas.Top="25" Width="50" 
Height="25"  Fill="skyblue" 
Stroke="red" StrokeThickness="2"/>
  
<Rectangle Canvas.Left="25" 
Canvas.Top="50" Width="50" 
Height="25"  Fill="palegreen" 
Stroke="red" StrokeThickness="2" >
  <Rectangle.RenderTransform>    
    <ScaleTransform ScaleX="2" 
ScaleY="2"  />  
  </Rectangle.RenderTransform>
</Rectangle>
  
</Canvas>
    Описание
    Увеличение прямоугольника в два раза по горизонтали и вертикали
    № Код Вид в браузере
    6.3.6 
    <Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="200" Height="150"
Background="White"
x:Name="Page">
<Rectangle Canvas.Left="25" 
Canvas.Top="25" Width="50" 
Height="25"  Fill="skyblue" 
Stroke="red" StrokeThickness="2"/>
  
<Rectangle Canvas.Left="25" 
Canvas.Top="50" Width="50" 
Height="25"  Fill="palegreen" 
Stroke="red" StrokeThickness="2" >
 <Rectangle.RenderTransform>    
   <ScaleTransform ScaleX="2"   />  
  </Rectangle.RenderTransform>
</Rectangle>
  
</Canvas>
    Описание
    Увеличение прямоугольника в два раза по горизонтали без указания второго параметра
    № Код Вид в браузере
    6.3.7 
    <Canvas  
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="200" Height="150"
Background="White"
x:Name="Page">
<Rectangle Canvas.Left="25" 
Canvas.Top="25" Width="50" 
Height="25"  Fill="skyblue" 
Stroke="red" StrokeThickness="2"/>
  
  <Canvas Width="200" 
Height="150" Canvas.Left="0" 
Canvas.Top="0">
  <Rectangle Canvas.Left="25" 
Canvas.Top="25" Width="50" 
Height="25"  Fill="palegreen" 
Stroke="red" StrokeThickness="2" />
  <Canvas.RenderTransform>    
    <ScaleTransform ScaleX="2" 
ScaleY="1.5"  />    
  </Canvas.RenderTransform>
  </Canvas>
</Canvas>
    Описание
    Применение команды scale для трансформации группы, заключенной в элементе Canvas
    № Код Описание
    6.3.8 
    <Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="420" Height="220"
Background="White"
x:Name="Page">
<TextBlock
Canvas.Left="50" 
Canvas.Top="50"
  FontFamily="Arial"
  FontSize="30"
  Foreground="Red"
  Text="Текст" 
  />

<TextBlock
Canvas.Left="150" 
Canvas.Top="50"
  FontFamily="Arial"
  FontSize="30"
  Foreground="Red"
  Text="Текст" >
  <TextBlock.RenderTransform>
    <ScaleTransform ScaleX="3" 
ScaleY="1" />
  </TextBlock.RenderTransform>
</TextBlock>

<TextBlock
Canvas.Left="50" 
Canvas.Top="100"
  FontFamily="Arial"
  FontSize="30"
  Foreground="Red"
  Text="Текст" >
  <TextBlock.RenderTransform>
    <ScaleTransform ScaleX="1" 
ScaleY="3" />
  </TextBlock.RenderTransform>
</TextBlock>

<TextBlock
Canvas.Left="150" 
Canvas.Top="100"
  FontFamily="Arial"
  FontSize="30"
  Foreground="Red"
  Text="Текст" >
  <TextBlock.RenderTransform>
    <ScaleTransform ScaleX="
3" ScaleY="3" />
  </TextBlock.RenderTransform>
</TextBlock>
</Canvas>
    		 Масштабирование текста
    Вид в браузере
    № Код Вид в браузере
    6.3.9 
    <Canvas  
<Canvas  
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="200" Height="150"
Background="White"
x:Name="Page">
<Rectangle Canvas.Left="25" 
Canvas.Top="25" Width="50" 
Height="25"  Fill="skyblue" 
Stroke="red" StrokeThickness="2"/>
  
  <Canvas Width="200" 
Height="150" Canvas.Left="0" 
Canvas.Top="0">
  <Rectangle Canvas.Left="25" 
Canvas.Top="25" Width="50" 
Height="25"  Fill="palegreen" 
Stroke="red" StrokeThickness="2"
 Opacity="0.5" />
  <Canvas.RenderTransform>    
    <ScaleTransform ScaleX="2" 
ScaleY="2" CenterX="25" 
CenterY="13"  />    
  </Canvas.RenderTransform>
  </Canvas>
</Canvas>
    Описание
    Для смещения трансформированной фигуры мы применяли задание значений Canvas.Left и Canvas.Top. Такой же эффект получается при использовании атрибутов CenterX и CenterY

    Отражение объектов

    Отражение объектов – одна из наиболее часто встречающихся задач при работе с любой графикой. Сочетания команд ScaleTransform и TranslateTransform позволяет легко получать нужный результат (рис. 6.7):

    (рис 6.7) Отражение объекта при помощи команд ScaleTransform и TranslateTransform

    Исходная фигура находится в правой нижней части рисунка. При подстановке координат в команды их можно варьировать в некоторых пределах для получения определенного эффекта, например "перекрытия". Исходное изображение можно заменить отражением, если указывать смещение на длину и высоту фигуры (рис. 6.8):

    (рис 6.8) Замещение исходного изображения отражением

    В табл. 6.4приводится различные варианты отражения объекта.

    Отражение фигуры при помощи команд ScaleTransform и TranslateTransform
    № Код Вид в браузере
    6.4.1 
    <Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="210" Height="110"
Background="White"
x:Name="Page">
<!--Исходная фигура (Нижняя правая)-->
<Canvas Width="210" 
Height="110" Canvas.Left="0" 
Canvas.Top="0">
<Rectangle Canvas.Left="105" 
Canvas.Top="55" Width="100" 
Height="50"  Fill="yellow" 
Stroke="red" StrokeThickness="4"/>
<Rectangle Canvas.Left="105" 
Canvas.Top="55" Width="50" 
Height="25"  Fill="green" 
Stroke="red" StrokeThickness="4" />

  <Canvas.RenderTransform>    
  <TransformGroup>
    <TranslateTransform X="0" 
Y="0"/>  
    <ScaleTransform ScaleX="1" 
ScaleY="1" />  
  </TransformGroup>
  </Canvas.RenderTransform>
  </Canvas>
  
</Canvas>
    Описание
    Исходная фигура. Применение команд ScaleTransform и TranslateTransform с указанными параметрами не изменяет масштаба и расположения
    № Код Вид в браузере
    6.4.2 
    <Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="210" Height="110"
Background="White"
x:Name="Page">

<!--Нижняя левая фигура -->
<Canvas Width="210" 
Height="110" Canvas.Left="0" 
Canvas.Top="0">
<Rectangle Canvas.Left="105" 
Canvas.Top="55" Width="100" 
Height="50"  Fill="yellow" 
Stroke="red" StrokeThickness="4"/>
<Rectangle Canvas.Left="105" 
Canvas.Top="55" Width="50" 
Height="25"  Fill="green" 
Stroke="red" StrokeThickness="4" />

  <Canvas.RenderTransform>    
  <TransformGroup>
    <TranslateTransform X="-210" 
Y="0"/>  
    <ScaleTransform ScaleX="-1" 
ScaleY="1" />  
  </TransformGroup>
  </Canvas.RenderTransform>
  </Canvas>
  
  
</Canvas>
    Описание
    Отражение фигуры справа налево со смещением на ширину
    № Код Вид в браузере
    6.4.3 
    <Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="210" Height="110"
Background="White"
x:Name="Page">
  
<!--Верхняя правая фигура -->
<Canvas Width="210"
 Height="110" Canvas.Left="0" 
Canvas.Top="0">
<Rectangle Canvas.Left="105" 
Canvas.Top="55" Width="100" 
Height="50"  Fill="yellow" 
Stroke="red" StrokeThickness="4"/>
<Rectangle Canvas.Left="105" 
Canvas.Top="55" Width="50" 
Height="25"  Fill="green" 
Stroke="red" StrokeThickness="4" />

  <Canvas.RenderTransform>    
  <TransformGroup>
    <TranslateTransform X="0" 
Y="-110"/>  
    <ScaleTransform ScaleX="1" 
ScaleY="-1" />  
  </TransformGroup>
  </Canvas.RenderTransform>
  </Canvas>

  
</Canvas>
    Описание
    Отражение фигуры снизу вверх со смещением на высоту
    № Код Вид в браузере
    6.4.4 
    <Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="210" Height="110"
Background="White"
x:Name="Page">
  

<!--Верхняя левая фигура -->
 <Canvas Width="210" Height="110" 
Canvas.Left="0" Canvas.Top="0">
 <Rectangle Canvas.Left="105" 
Canvas.Top="55" 
Width="100" Height="50"  
Fill="yellow" 
Stroke="red" StrokeThickness="4"/>
 <Rectangle Canvas.Left="105" 
Canvas.Top="55" Width="50" 
Height="25"  Fill="green" 
Stroke="red" StrokeThickness="4" />

    <Canvas.RenderTransform>    
    <TransformGroup>
      <TranslateTransform X="-210" 
Y="-110"/>  
      <ScaleTransform ScaleX="-1" 
ScaleY="-1" />  
    </TransformGroup>
    </Canvas.RenderTransform>
    </Canvas>
  
</Canvas>
    Описание
    Отражение фигуры справа налево и снизу вверх со смещением на ширину и высоту
    № Код Вид в браузере
    6.4.5 
    <Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="210" Height="110"
Background="White"
x:Name="Page">
<!--Исходная фигура (Нижняя правая)-->
<Canvas Width="210" Height="110" 
Canvas.Left="0" Canvas.Top="0">
<Rectangle Canvas.Left="105" 
Canvas.Top="55" Width="100" 
Height="50"  Fill="yellow" 
Stroke="red" StrokeThickness="4"/>
<Rectangle Canvas.Left="105" 
Canvas.Top="55" Width="50" 
Height="25"  Fill="green" 
Stroke="red" StrokeThickness="4" />

  <Canvas.RenderTransform>    
  <TransformGroup>
    <TranslateTransform X="0"
 Y="0"/>  
    <ScaleTransform ScaleX="1" 
ScaleY="1" />  
  </TransformGroup>
  </Canvas.RenderTransform>
  </Canvas>
<!--Нижняя левая фигура -->
<Canvas Width="210" Height="110"
 Canvas.Left="0" Canvas.Top="0">
<Rectangle Canvas.Left="105" 
Canvas.Top="55" Width="100" 
Height="50"  Fill="yellow" 
Stroke="red" StrokeThickness="4"/>
<Rectangle Canvas.Left="105" 
Canvas.Top="55" Width="50" 
Height="25"  Fill="green" 
Stroke="red" StrokeThickness="4" />

  <Canvas.RenderTransform>    
  <TransformGroup>
    <TranslateTransform X="-210"
 Y="0"/>  
    <ScaleTransform ScaleX="-1" 
ScaleY="1" />  
  </TransformGroup>
  </Canvas.RenderTransform>
  </Canvas>
<!--Верхняя правая фигура -->
<Canvas Width="210" 
Height="110" Canvas.Left="0" 
Canvas.Top="0">
<Rectangle Canvas.Left="105"
 Canvas.Top="55" Width="100" 
Height="50"  Fill="yellow" 
Stroke="red" StrokeThickness="4"/>
<Rectangle Canvas.Left="105" 
Canvas.Top="55" Width="50" 
Height="25"  Fill="green" 
Stroke="red" StrokeThickness="4" />

  <Canvas.RenderTransform>    
  <TransformGroup>
    <TranslateTransform X="0" 
Y="-110"/>  
    <ScaleTransform ScaleX="1" 
ScaleY="-1" />  
  </TransformGroup>
  </Canvas.RenderTransform>
  </Canvas>
<!--Верхняя левая фигура -->
  <Canvas Width="210" 
Height="110" Canvas.Left="0" 
Canvas.Top="0">
<Rectangle Canvas.Left="105" 
Canvas.Top="55" Width="100" 
Height="50"  Fill="yellow" 
Stroke="red" StrokeThickness="4"/>
<Rectangle Canvas.Left="105" 
Canvas.Top="55" Width="50" 
Height="25"  Fill="green" 
Stroke="red" StrokeThickness="4" />

  <Canvas.RenderTransform>    
  <TransformGroup>
    <TranslateTransform X="-210" 
Y="-110"/>  
    <ScaleTransform ScaleX="-1" 
ScaleY="-1" />  
  </TransformGroup>
  </Canvas.RenderTransform>
  </Canvas>
  
</Canvas>
    Описание
    Исходная фигура и три отражения
    № Код Вид в браузере
    6.4.6 
    <Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="220" Height="120"
Background="White"
x:Name="Page">

<!--Справа налево-->
<Canvas Width="220"
 Height="120" Canvas.Left="0" 
Canvas.Top="0" >
<Rectangle Canvas.Left="105" 
Canvas.Top="55" Width="100" 
Height="50"  Fill="yellow" 
Stroke="red" StrokeThickness="4"/>
<Rectangle Canvas.Left="105" 
Canvas.Top="55" Width="50" 
Height="25"  Fill="green" 
Stroke="red" StrokeThickness="4" />

  <Canvas.RenderTransform>    
  <TransformGroup>
    <TranslateTransform X="-310" 
Y="0"/>  
    <ScaleTransform ScaleX="-1" 
ScaleY="1" />  
  </TransformGroup>
  </Canvas.RenderTransform>
  </Canvas>
<!--Вспомогательная рамка вокруг рисунка-->

<Rectangle Canvas.Left="100" 
Canvas.Top="50" Width="110" 
Height="60"  Fill="Transparent" 
Stroke="blue" StrokeThickness="2"/>

</Canvas>
    Описание
    Отражение фигуры справа налево с замещением исходной фигуры
    № Код Вид в браузере
    6.4.7 
    <Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="220" Height="120"
Background="White"
x:Name="Page">

<!--Снизу вверх-->
<Canvas Width="220" 
Height="120" Canvas.Left="0" 
Canvas.Top="0" >
<Rectangle Canvas.Left="105" 
Canvas.Top="55" Width="100" 
Height="50"  Fill="yellow" 
Stroke="red" StrokeThickness="4"/>
<Rectangle Canvas.Left="105" 
Canvas.Top="55" Width="50" 
Height="25"  Fill="green" 
Stroke="red" StrokeThickness="4" />

  <Canvas.RenderTransform>    
  <TransformGroup>
    <TranslateTransform X="0"
 Y="-160"/>  
    <ScaleTransform ScaleX="1"
 ScaleY="-1" />  
  </TransformGroup>
  </Canvas.RenderTransform>
  </Canvas>

<!--Вспомогательная рамка вокруг рисунка-->

<Rectangle Canvas.Left="100" 
Canvas.Top="50" Width="110" 
Height="60"  Fill="Transparent"
 Stroke="blue" StrokeThickness="2"/>
</Canvas>
    Описание
    Отражение фигуры снизу вверх с замещением исходной фигуры.
    № Код Вид в браузере
    6.4.8 
    <Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="220" Height="120"
Background="White"
x:Name="Page">

<!--Снизу вверх и справа налево-->
<Canvas Width="220" 
Height="120" Canvas.Left="0"
 Canvas.Top="0" >
<Rectangle Canvas.Left="105" 
Canvas.Top="55" Width="100" 
Height="50"  Fill="yellow" 
Stroke="red" StrokeThickness="4"/>
<Rectangle Canvas.Left="105" 
Canvas.Top="55" Width="50" Height="25" 
 Fill="green" Stroke="red" StrokeThickness="4" />

  <Canvas.RenderTransform>    
  <TransformGroup>
    <TranslateTransform X="-310" 
Y="-160"/>  
    <ScaleTransform ScaleX="-1" 
ScaleY="-1" />  
  </TransformGroup>
  </Canvas.RenderTransform>
  </Canvas>

<!--Вспомогательная рамка вокруг рисунка-->

<Rectangle Canvas.Left="100" 
Canvas.Top="50" Width="110" 
Height="60"  Fill="Transparent" 
Stroke="blue" StrokeThickness="2"/>

</Canvas>
    Описание
    Отражение фигуры справа налево и снизу вверх с замещением исходной фигуры
    № Код Вид в браузере
    6.4.9 
    <Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="220" Height="120"
Background="White"
x:Name="Page">
<!--Исходная фигура-->
<Canvas Width="220" Height="120" 
Canvas.Left="0" Canvas.Top="0">
<Rectangle Canvas.Left="105" Canvas.Top="55" 
Width="100" Height="50"  Fill="yellow" 
Stroke="red" StrokeThickness="4"/>
<Rectangle Canvas.Left="105" Canvas.Top="55" 
Width="50" Height="25"  Fill="green" 
Stroke="red" StrokeThickness="4" />

  <Canvas.RenderTransform>    
  <TransformGroup>
    <TranslateTransform X="0" 
Y="0"/>  
    <ScaleTransform ScaleX="1" 
ScaleY="1" />  
  </TransformGroup>
  </Canvas.RenderTransform>
  </Canvas>
  
<!--Снизу вверх и справа налево-->
  <Canvas Width="220" 
Height="120" Canvas.Left="0" 
Canvas.Top="0" Opacity="0.6">
<Rectangle Canvas.Left="105" 
Canvas.Top="55" Width="100"
 Height="50"  Fill="yellow" 
Stroke="red" StrokeThickness="4"/>
<Rectangle Canvas.Left="105" 
Canvas.Top="55" Width="50" 
Height="25"  Fill="green" 
Stroke="red" StrokeThickness="4" />

  <Canvas.RenderTransform>    
  <TransformGroup>
    <TranslateTransform X="-310" 
Y="-160"/>  
  <ScaleTransform ScaleX="-1" 
ScaleY="-1" />  
  </TransformGroup>
  </Canvas.RenderTransform>
  </Canvas>

<!--Вспомогательная рамка вокруг рисунка-->

<Rectangle Canvas.Left="100" 
Canvas.Top="50" Width="110" 
Height="60"  Fill="Transparent" 
Stroke="blue" StrokeThickness="2"/>
</Canvas>
    Описание
    При расположении фигуры бывает довольно трудно подобрать нужные координаты. Задачу можно упростить, если оставить исходный объект, а позиционирование осуществлять с полупрозрачной фигурой

    SkewTransform

    Команда SkewTransform предназначена для искажения формы фигуры в направлении горизонтальной ( AngleX ) и вертикальной осей ( AngleY ) (рис. 6.9):

    (рис 6.9) Команды SkewTransform с атрибутами AngleX и AngleY

    Применение пары аргументов AngleX и AngleY приводит к одновременному искажению фигуры вдоль обеих осей. При использовании команды SkewTransform с атрибутом AngleX абсциссы фигуры остаются прежними, а ординаты автоматически вычисляются по формуле Y*tg(n) где n – значение угла в градусах, принимаемое конструктором. Аналогично, применение команды SkewTransform с атрибутом AngleY оставляет прежними ординаты, изменяя абсциссы по формуле X*tg(n). В табл. 6.5приводятся примеры использования этой команды.

    Команда SkewTransform
    № Код Вид в браузере
    6.5.1 
    <Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="200" Height="200"
Background="White"
x:Name="Page">
<!--Исходная фигура-->
<Rectangle Canvas.Left="10" 
Canvas.Top="10" Width="100" 
Height="50"  Fill="yellow"
 Stroke="red" StrokeThickness="4"/>
<Rectangle Canvas.Left="10" 
Canvas.Top="10" Width="50" 
Height="25"  Fill="green" 
Stroke="red" StrokeThickness="4" />

<!--Трансформированная фигура -->
<Canvas Width="200" 
Height="200" Canvas.Left="0" 
Canvas.Top="0">
<Rectangle Canvas.Left="10" 
Canvas.Top="10" Width="100"
 Height="50"  Fill="yellow" 
Stroke="red" StrokeThickness="4"/>
<Rectangle Canvas.Left="10" 
Canvas.Top="10" Width="50" 
Height="25"  Fill="green" 
Stroke="red" StrokeThickness="4" />

  <Canvas.RenderTransform>    
    <SkewTransform AngleX="45" />  
  </Canvas.RenderTransform>
  </Canvas>
</Canvas>
    Описание
    Искажение фигуры в горизонтальном направлении. Заметно смещение верхней левой точки объекта относительно исходной фигуры.
    № Код Вид в браузере
    6.5.2 
    <Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="200" Height="200"
Background="White"
x:Name="Page">
<!--Исходная фигура-->
<Rectangle Canvas.Left="10" 
Canvas.Top="10" Width="100" 
Height="50"  Fill="yellow" 
Stroke="red" StrokeThickness="4"/>
<Rectangle Canvas.Left="10" 
Canvas.Top="10" Width="50" 
Height="25"  Fill="green" 
Stroke="red" StrokeThickness="4" />

<!--Трансформированная фигура -->
<Canvas Width="200" Height="200" 
Canvas.Left="0" Canvas.Top="0">
<Rectangle Canvas.Left="10" 
Canvas.Top="10" Width="100" 
Height="50"  Fill="yellow" 
Stroke="red" StrokeThickness="4"/>
<Rectangle Canvas.Left="10" 
Canvas.Top="10" Width="50" 
Height="25"  Fill="green" 
Stroke="red" StrokeThickness="4" />

  <Canvas.RenderTransform>  
  <TransformGroup>  
    <SkewTransform AngleX="45" />  
    <TranslateTransform X="-10" 
Y="0"/>  
  </TransformGroup>  
  </Canvas.RenderTransform>
  </Canvas>
</Canvas>
    Описание
    Искажение фигуры в горизонтальном направлении с компенсацией смещения при помощи команды TranslateTransform
    № Код Вид в браузере
    6.5.3 
    <Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="200" Height="200"
Background="White"
x:Name="Page">
<!--Исходная фигура-->
<Rectangle Canvas.Left="10" 
Canvas.Top="10" Width="100" 
Height="50"  Fill="yellow" 
Stroke="red" StrokeThickness="4"/>
<Rectangle Canvas.Left="10" 
Canvas.Top="10" Width="50" 
Height="25"  Fill="green" 
Stroke="red" StrokeThickness="4" />

<!--Трансформированная фигура -->
<Canvas Width="200" 
Height="200" Canvas.Left="0"
 Canvas.Top="0">
<Rectangle Canvas.Left="10" 
Canvas.Top="10" Width="100" 
Height="50"  Fill="yellow" 
Stroke="red" StrokeThickness="4"/>
<Rectangle Canvas.Left="10" 
Canvas.Top="10" Width="50" 
Height="25"  Fill="green"
 Stroke="red" StrokeThickness="4" />

  <Canvas.RenderTransform>  
  <TransformGroup>  
    <SkewTransform AngleX="235" />  
    <TranslateTransform X="-10" 
Y="0"/>  
  </TransformGroup>  
  </Canvas.RenderTransform>
  </Canvas>
</Canvas>
    Описание
    Искажение фигуры в горизонтальном направлении при угле 235 градусов (180+45). Заметно смещение верхней левой точки объекта относительно исходной фигуры
    № Код Вид в браузере
    6.5.4 
    <Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="200" Height="200"
Background="White"
x:Name="Page">
<!--Исходная фигура-->
<Rectangle Canvas.Left="10" 
Canvas.Top="10" Width="100" 
Height="50"  Fill="yellow" 
Stroke="red" StrokeThickness="4"/>
<Rectangle Canvas.Left="10" 
Canvas.Top="10" Width="50" 
Height="25"  Fill="green" 
Stroke="red" StrokeThickness="4" />

<!--Трансформированная фигура -->
<Canvas Width="200" Height="200" 
Canvas.Left="0" Canvas.Top="0">
<Rectangle Canvas.Left="10" 
Canvas.Top="10" Width="100" 
Height="50"  Fill="yellow" 
Stroke="red" StrokeThickness="4"/>
<Rectangle Canvas.Left="10" 
Canvas.Top="10" Width="50" 
Height="25"  Fill="green" 
Stroke="red" StrokeThickness="4" />

  <Canvas.RenderTransform>  
  <TransformGroup>  
    <SkewTransform AngleX="235" />  
    <TranslateTransform X="-14" 
Y="0"/>  
  </TransformGroup>  
  </Canvas.RenderTransform>
  </Canvas>
</Canvas>
    Описание
    Искажение фигуры в горизонтальном направлении при угле 235 градусов (180+45) с компенсацией смещения при помощи команды TranslateTransform
    № Код Вид в браузере
    6.5.5 
    <Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="200" Height="200"
Background="White"
x:Name="Page">
<!--Исходная фигура-->
<Rectangle Canvas.Left="10" 
Canvas.Top="10" Width="100" 
Height="50"  Fill="yellow" 
Stroke="red" StrokeThickness="4"/>
<Rectangle Canvas.Left="10" 
Canvas.Top="10" Width="50" 
Height="25"  Fill="green" 
Stroke="red" StrokeThickness="4" />

<!--Трансформированная фигура -->
<Canvas Width="200" Height="200" 
Canvas.Left="0" Canvas.Top="0">
<Rectangle Canvas.Left="10" 
Canvas.Top="10" Width="100" 
Height="50"  Fill="yellow" 
Stroke="red" StrokeThickness="4"/>
<Rectangle Canvas.Left="10" 
Canvas.Top="10" Width="50" 
Height="25"  Fill="green" 
Stroke="red" StrokeThickness="4" />

  <Canvas.RenderTransform>  
  <TransformGroup>  
    <SkewTransform AngleY="45" />  
    <TranslateTransform X="0" 
Y="0"/>  
  </TransformGroup>  
  </Canvas.RenderTransform>
  </Canvas>
</Canvas>
    Описание
    Искажение фигуры в вертикальном направлении. Заметно смещение верхней левой точки объекта относительно исходной фигуры
    № Код Вид в браузере
    6.5.6 
    <Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="200" Height="200"
Background="White"
x:Name="Page">
<!--Исходная фигура-->
<Rectangle Canvas.Left="10" 
Canvas.Top="10" Width="100" 
Height="50"  Fill="yellow" 
Stroke="red" StrokeThickness="4"/>
<Rectangle Canvas.Left="10" 
Canvas.Top="10" Width="50" 
Height="25"  Fill="green" 
Stroke="red" StrokeThickness="4" />

<!--Трансформированная фигура -->
<Canvas Width="200" 
Height="200" Canvas.Left="0" 
Canvas.Top="0">
<Rectangle Canvas.Left="10" 
Canvas.Top="10" Width="100" 
Height="50"  Fill="yellow" 
Stroke="red" StrokeThickness="4"/>
<Rectangle Canvas.Left="10" 
Canvas.Top="10" Width="50" 
Height="25"  Fill="green" 
Stroke="red" StrokeThickness="4" />

  <Canvas.RenderTransform>  
  <TransformGroup>  
    <SkewTransform AngleY="45" />  
    <TranslateTransform X="0" 
Y="-10"/>  
  </TransformGroup>  
  </Canvas.RenderTransform>
  </Canvas>
</Canvas>
    Описание
    Искажение фигуры в горизонтальном направлении. Компенсация смещения
    № Код Описание
    6.5.7 
    <Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="420" Height="220"
Background="White"
x:Name="Page">
<TextBlock
Canvas.Left="50" 
Canvas.Top="50"
  FontFamily="Arial"
  FontSize="30"
  Foreground="Red"
  Text="Текст" 
  />

<TextBlock
Canvas.Left="150" 
Canvas.Top="50"
  FontFamily="Arial"
  FontSize="30"
  Foreground="Red"
  Text="Текст" >
  <TextBlock.RenderTransform>
 <SkewTransform AngleX="45" />  
  </TextBlock.RenderTransform>
</TextBlock>

<TextBlock
Canvas.Left="50" 
Canvas.Top="100"
  FontFamily="Arial"
  FontSize="30"
  Foreground="Red"
  Text="Текст" >
  <TextBlock.RenderTransform>
 <SkewTransform AngleY="45" />  
  </TextBlock.RenderTransform>
</TextBlock>

<TextBlock
Canvas.Left="150" 
Canvas.Top="100"
  FontFamily="Arial"
  FontSize="30"
  Foreground="Red"
  Text="Текст" >
  <TextBlock.RenderTransform>
 <SkewTransform AngleX="20" 
AngleY="20"  />  
  </TextBlock.RenderTransform>
</TextBlock>
</Canvas>
    		 Искажение текста
    Вид в браузере
    № Код Вид в браузере
    6.5.8 
    <Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="200" Height="200"
Background="White"
x:Name="Page">
<!--Исходная фигура-->
<Rectangle Canvas.Left="10" 
Canvas.Top="10" Width="100" 
Height="50"  Fill="yellow" 
Stroke="red" StrokeThickness="4"/>
<Rectangle Canvas.Left="10" 
Canvas.Top="10" Width="50" 
Height="25"  Fill="green" 
Stroke="red" StrokeThickness="4" />

<!--Трансформированная фигура -->
<Canvas Width="0" Height="0" 
Canvas.Left="0" Canvas.Top="0">
<Rectangle Canvas.Left="10"
 Canvas.Top="10" Width="100" 
Height="50"  Fill="yellow" 
Stroke="red" StrokeThickness="4"/>
<Rectangle Canvas.Left="10" 
Canvas.Top="10" Width="50" 
Height="25"  Fill="green" 
Stroke="red" StrokeThickness="4" />

  <Canvas.RenderTransform>    
    <SkewTransform CenterX="0" 
CenterY="10" AngleX="45" />  
  </Canvas.RenderTransform>
  </Canvas>
</Canvas>
    Описание
    Искажение фигуры в горизонтальном направлении. Компенсация смещения с помощью атрибутов CenterX и CenterY
    № Код Вид в браузере
    6.5.9 
    <Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="200" Height="200"
Background="White"
x:Name="Page">
<!--Исходная фигура-->
<Rectangle Canvas.Left="10" 
Canvas.Top="10" Width="100" 
Height="50"  Fill="yellow" 
Stroke="red" StrokeThickness="4"/>
<Rectangle Canvas.Left="10" 
Canvas.Top="10" Width="50" 
Height="25"  Fill="green" 
Stroke="red" StrokeThickness="4" />

<!--Трансформированная фигура -->
<Canvas Width="0" Height="0" 
Canvas.Left="0" Canvas.Top="0">
<Rectangle Canvas.Left="10" Canvas.Top="10" 
Width="100" Height="50"  

Fill="yellow" Stroke="red" 
StrokeThickness="4"/>
<Rectangle Canvas.Left="10"
 Canvas.Top="10" Width="50" 
Height="25"  Fill="green" 
Stroke="red" StrokeThickness="4" />

  <Canvas.RenderTransform>    
    <SkewTransform CenterX="10" 
CenterY="0" AngleY="45" />  
  </Canvas.RenderTransform>
  </Canvas>
</Canvas>
    Описание
    Искажение фигуры в вертикальном направлении. Компенсация смещения с помощью атрибутов CenterX и CenterY
    № Код Вид в браузере
    6.5.10 
    <Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="200" Height="200"
Background="White"
x:Name="Page">
<!--Исходная фигура-->
<Rectangle Canvas.Left="10" 
Canvas.Top="10" Width="100" 
Height="50"  Fill="yellow" 
Stroke="red" StrokeThickness="4"/>
<Rectangle Canvas.Left="10" 
Canvas.Top="10" Width="50" 
Height="25"  Fill="green" 
Stroke="red" StrokeThickness="4" />

<!--Трансформированная фигура -->
<Canvas Width="0" Height="0" 
Canvas.Left="0" Canvas.Top="0">
<Rectangle Canvas.Left="10" 
Canvas.Top="10" Width="100" 
Height="50"  Fill="yellow" 
Stroke="red" StrokeThickness="4"/>
<Rectangle Canvas.Left="10" 
Canvas.Top="10" Width="50" 
Height="25"  Fill="green" 
Stroke="red" StrokeThickness="4" />

  <Canvas.RenderTransform>    
  <SkewTransform CenterX="10" 
CenterY="10" AngleX="25"
 AngleY="25" />  
  </Canvas.RenderTransform>
  </Canvas>
</Canvas>
    Описание
    Искажение фигуры в обоих направлениях. Компенсация смещения с помощью атрибутов CenterX и CenterY

    MatrixTransform

    Трансформация MatrixTransform представляет собой способ компактной записи серии преобразований. Графически эта команда не содержит собственных изменений объекта. Она лишь выражает применение одной или нескольких команд типа RotateTransform, SkewTransform, ScaleTransform и TranslateTransform. Математически, все преобразования могут быть выражены в виде матрицы третьего порядка следующим образом:

    $$$$\begin{vmatrix} M_{11}M_{12} 0\\ M_{21}M_{22}0\\ OffsetXOffsetY1 \end{vmatrix}$$ $$

    Команда будет выглядеть так:

    (M11, M12, M21, M22, OffsetX, OffsetY)

    Каждое из преобразований представляется своей матрицей и соответствующей командой MatrixTransform.

    Команда TranslateTransform:

    $$$$\begin{vmatrix} 100\\ 010\\ dxdy1 \end{vmatrix}$$ $$
    Matrix="1 0 0 1 dx dy"

    Команда RotateTransform:

    $$$$\begin{vmatrix} cos(a)sin(a)0\\ -sin(a)cos(a)0\\ 001 \end{vmatrix}$$ $$
    Matrix=" cos(a) sin(a) –sin(a) cos(a) 0 0"

    Команда ScaleTransform:

    $$$$\begin{vmatrix} sx00\\ 0sy0\\ 001 \end{vmatrix}$$ $$
    Matrix=" sx 0 0 sy 0 0"

    Команда SkewTransform (AngleX):

    $$$$\begin{vmatrix} 100\\ tg(a)10\\ 001 \end{vmatrix}$$ $$
    Matrix="1 0 tg(a) 1 0 0"

    Команда SkewTransform (AngleY):

    $$$$\begin{vmatrix} 1tg(a)0\\ 010\\ 001 \end{vmatrix}$$ $$
    Matrix="1 tg(a) 0 1 0 0"

    Практически, для перехода к новой форме записи нужно просто взять исходные параметры команды и аккуратно их подставить в нужные позиции. Для команд RotateTransform, SkewTransform (AngleX) и SkewTransform (AngleY) дополнительно следует вычислить тригонометрические функции углов. В табл. 6.6 приводятся примеры использования этой записи.

    Команда MatrixTransform
    № Код Вид в браузере
    6.6.1 
    <Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="200" Height="150"
Background="White"
x:Name="Page">
<Rectangle Canvas.Left="25" 
Canvas.Top="25" Width="50" 
Height="25"  Fill="skyblue" 
Stroke="red" StrokeThickness="2"/>
  
<Rectangle Canvas.Left="25" 
Canvas.Top="25" Width="50" 
Height="25"  Fill="palegreen" 
Stroke="red" StrokeThickness="2"
 RenderTransformOrigin="0.5,0.5">
  <Rectangle.RenderTransform>    
        
  <MatrixTransform Matrix="1 0 0 1 100 75"/>
    <!--<TranslateTransform X="100" 
Y="75"/>-->
  </Rectangle.RenderTransform>
</Rectangle>
  
</Canvas>
    Описание
    Запись команды TranslateTransform в форме MatrixTransform
    № Код Вид в браузере
    6.6.2 
    <Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="200" Height="150"
Background="White"
x:Name="Page">
<Rectangle Canvas.Left="25" 
Canvas.Top="25" Width="50" 
Height="25"  Fill="skyblue" 
Stroke="red" StrokeThickness="2"/>
  
<Rectangle Canvas.Left="25" 
Canvas.Top="25" Width="50" 
Height="25"  Fill="palegreen" 
Stroke="red" StrokeThickness="2" 
RenderTransformOrigin="0.5,0.5">
  <Rectangle.RenderTransform>    
  <MatrixTransform x:Name="my
MatrixTransform">
           <MatrixTransform.Matrix >
    <Matrix M11="1" 
M12="0" M21="0" M22="1"  
OffsetX="100" OffsetY="75"/>
    <!--<TranslateTransform X="100" 
Y="75"/>-->
     </MatrixTransform.Matrix>
         </MatrixTransform>
  </Rectangle.RenderTransform>
</Rectangle>
  
</Canvas>
    Описание
    Задание атрибута x:Name позволяет обращаться к преобразованию программным способом. Кроме того, здесь, в отличие от предыдущего примера используется запись в виде тегов
    № Код Вид в браузере
    6.6.3 
    <Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="200" Height="100"
Background="White"
x:Name="Page">
<Rectangle Canvas.Left="25" 
Canvas.Top="25" Width="50" 
Height="25"  Fill="skyblue" 
Stroke="red" StrokeThickness="2"/>
  
<Rectangle Canvas.Left="25" 
Canvas.Top="50" Width="50" 
Height="25"  Fill="palegreen" 
Stroke="red" StrokeThickness="2" 
RenderTransformOrigin="0.5,0.5">
  <Rectangle.RenderTransform>    
        
   <MatrixTransform Matrix="2 0 0 1 0 0"/>
   <!--<ScaleTransform ScaleX="2" 
ScaleY="1"  />  -->
  </Rectangle.RenderTransform>
</Rectangle>
  
</Canvas>
    Описание
    Запись команды ScaleTransform в форме MatrixTransform. Заметно смещение фигуры по сравнению с результатом, получаемым применением команды ScaleTransform
    № Код Вид в браузере
    6.6.4 
    <Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="200" Height="100"
Background="White"
x:Name="Page">
<Rectangle Canvas.Left="25" 
Canvas.Top="25" Width="50" Height="25"  
Fill="skyblue" Stroke="red" 
StrokeThickness="2"/>
  
<Rectangle Canvas.Left="25" 
Canvas.Top="50" Width="50" 
Height="25"  Fill="palegreen" 
Stroke="red" StrokeThickness="2" 
RenderTransformOrigin="0.5,0.5">
  <Rectangle.RenderTransform>    
          
    <MatrixTransform Matrix="2 0 0 1 25 0"/>
    <!--<ScaleTransform ScaleX="2" 
ScaleY="1"  />  -->
  </Rectangle.RenderTransform>
</Rectangle>
  
</Canvas>
    Описание
    Запись команды ScaleTransform в форме MatrixTransform. Для компенсации смещения указывается величина смещения, равная 25. Фактически, две последние цифры в значении атрибута Matrix – это смещение по горизонтали и вертикали
    № Код Вид в браузере
    6.6.5 
    <Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="200" Height="100"
Background="White"
x:Name="Page">
<Rectangle Canvas.Left="25" 
Canvas.Top="25" Width="50" 
Height="25"  Fill="skyblue" 
Stroke="red" StrokeThickness="2"/>
  
<Rectangle Canvas.Left="25" 
Canvas.Top="50" Width="50" 
Height="25"  Fill="palegreen" 
Stroke="red" StrokeThickness="2" 
RenderTransformOrigin="0.5,0.5">
  <Rectangle.RenderTransform>    
          
    <MatrixTransform x:Name="
myMatrixTransform">
           <MatrixTransform.Matrix >
    <Matrix M11="2" M12="0" 
M21="0" M22="1"  OffsetX="25" 
OffsetY="0"/>
    <!--<ScaleTransform ScaleX="2" 
ScaleY="1"  />  -->
     </MatrixTransform.Matrix>
         </MatrixTransform>    
  </Rectangle.RenderTransform>
</Rectangle>
  
</Canvas>
    Описание
    Запись команды ScaleTransform в форме MatrixTransform. Matrix превращается в тег, для которого указываются набор атрибутов. Здесь явно видно, что OffsetX и OffsetY определяют трансляцию (перенос) фигуры
    № Код Вид в браузере
    6.6.6 
    <Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="210" Height="210"
Background="White"
x:Name="Page">
<!--Исходная фигура-->
<Rectangle Canvas.Left="105" 
Canvas.Top="4" Width="100" 
Height="50"  Fill="yellow" 
Stroke="red" StrokeThickness="4"/>
<Rectangle Canvas.Left="105" 
Canvas.Top="4" Width="50"
 Height="25"  Fill="green" 
Stroke="red" StrokeThickness="4" />

<!--Повернутая фигура-->  
<Canvas Width="210" Height="210" 
Canvas.Left="0" Canvas.Top="0">
<Rectangle Canvas.Left="105" 
Canvas.Top="4" Width="100" 
Height="50"  Fill="yellow" 
Stroke="red" StrokeThickness="4"/>
<Rectangle Canvas.Left="105" 
Canvas.Top="4" Width="50"
 Height="25"  Fill="green" 
Stroke="red" StrokeThickness="4" />

  <Canvas.RenderTransform>
    <MatrixTransform Matrix="0.7071 
0.7071 -0.7071 0.7071 0 0"/>    
    <!--<RotateTransform 
Angle="45"/>-->    
  </Canvas.RenderTransform>
  </Canvas>
</Canvas>
    Описание
    Запись команды RotateTransform в форме MatrixTransform
    № Код Вид в браузере
    6.6.7 
    <Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="200" Height="200"
Background="White"
x:Name="Page">
<!--Исходная фигура-->
<Rectangle Canvas.Left="10" 
Canvas.Top="10" Width="100" 
Height="50"  Fill="yellow" 
Stroke="red" StrokeThickness="4"/>
<Rectangle Canvas.Left="10" Canvas.Top="10" 
Width="50" Height="25"  Fill="green" 
Stroke="red" StrokeThickness="4" />

<!--Трансформированная фигура -->
<Canvas Width="200" Height="200" 
Canvas.Left="0" Canvas.Top="0">
<Rectangle Canvas.Left="10" 
Canvas.Top="10" Width="100" 
Height="50"  Fill="yellow"
 Stroke="red" StrokeThickness="4"/>
<Rectangle Canvas.Left="10" 
Canvas.Top="10" Width="50" 
Height="25"  Fill="green" 
Stroke="red" StrokeThickness="4" />

  <Canvas.RenderTransform>    
  <MatrixTransform Matrix="1 0 1 1 0 0"/>  
    <!--<SkewTransform AngleX=
"45" />  -->
  </Canvas.RenderTransform>
  </Canvas>
</Canvas>
    Описание
    Запись команды SkewTransform в форме MatrixTransform. tg(45)=1
    № Код Вид в браузере
    6.6.8 
    <Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="200" Height="200"
Background="White"
x:Name="Page">
<!--Исходная фигура-->
<Rectangle Canvas.Left="10" 
Canvas.Top="10" Width="100" 
Height="50"  Fill="yellow" 
Stroke="red" StrokeThickness="4"/>
<Rectangle Canvas.Left="10" 
Canvas.Top="10" Width="50" 
Height="25"  Fill="green" 
Stroke="red" StrokeThickness="4" />

<!--Трансформированная фигура -->
<Canvas Width="200" Height="200" 
Canvas.Left="0" Canvas.Top="0">
<Rectangle Canvas.Left="10" 
Canvas.Top="10" Width="100" 
Height="50"  Fill="yellow" 
Stroke="red" StrokeThickness="4"/>
<Rectangle Canvas.Left="10" 
Canvas.Top="10" Width="50" 
Height="25"  Fill="green" 
Stroke="red" StrokeThickness="4" />

  <Canvas.RenderTransform>  
  <TransformGroup>  
  <MatrixTransform Matrix="1 1 0 1 0 0"/>  
    <!--<SkewTransform AngleY="45" />-->      
  </TransformGroup>  
  </Canvas.RenderTransform>
  </Canvas>
</Canvas>
    Описание
    Запись команды SkewTransform в форме MatrixTransform. tg(45)=1

    Мы разобрали запись в виде матрицы отдельных команд. Немного более сложно обстоят дела с записей нескольких команд, например, TranslateTransform и SkewTransform в виде одной матрицы. Результирующая матрица представляет собой произведение отдельных матриц. Рассмотрим для начала произведение матриц, содержащих по две строки и два столбца:

    $$$$ \begin{vmatrix} a_{11}a_{12}\\ a_{21}a_{22} \end{vmatrix}* \begin{vmatrix} b_{11}b_{12}\\ b_{21}b_{22} \end{vmatrix}= \begin{vmatrix} a_{11}*b_{11}+a_{12}*b_{21}a_{11}*b_{12}+a_{12}*b_{22}\\ a_{21}*b_{11}+a_{22}*b_{21}a_{21}*b_{12}+a_{22}*b_{22} \end{vmatrix}$$ $$

    Обратите внимание на индексы – индекс 12, к примеру, означает, что элемент b12 находится в первой строке и втором столбце. Результирующая матрица получается сложением и умножением отдельных элементов по следующей схеме (рис. 6.10):

    (рис 6.10) Умножение матриц второго порядка

    Аналогичным образом осуществляется умножение матриц третьего порядка:

    $$$$ \begin{vmatrix} a_{11}a_{12}a_{13\\ a_{21}a_{22}a_{23}\\ a_{31}a_{32}a_{33} \end{vmatrix}* \begin{vmatrix} b_{11}b_{12}b_{13}\\ b_{21}b_{22}b_{23}\\ b_{31}b_{32}b_{33} \end{vmatrix}=\\= \begin{vmatrix} a_{11}*b_{11}+a_{12}*b_{21}+a_{13}*b_{31}a_{11}*b_{12}+a_{12}*b_{22}+a_{13}*b_{32}a_{11}*b_{13}+a_{12}*b_{23}+a_{13}*b_{33}\\ a_{21}*b_{11}+a_{22}*b_{21}+a_{23}*b_{31}a_{21}*b_{12}+a_{22}*b_{22}+a_{23}*b_{32}a_{21}*b_{13}+a_{22}*b_{23}+a_{23}*b_{33}\\ a_{31}*b_{11}+a_{32}*b_{21}+a_{33}*b_{31}a_{31}*b_{12}+a_{32}*b_{22}+a_{33}*b_{32}a_{31}*b_{13}+a_{32}*b_{23}+a_{33}*b_{33} \end{vmatrix}$$ $$

    Для отдельного элемента результирующей матрицы, находящегося во второй строке первого столбца можно выделить схему (рис. 6.11):

    (рис 6.11) Умножение матриц третьего порядка

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

    Таблица 6.7 Команда MatrixTransform для нескольких преобразований
    № Код Вид в браузере
    6.7.1 
    <Canvas
xmlns="http://schemas.microsoft.com/client/2007"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="200" Height="200"
Background="White"
x:Name="Page">
<!--Исходная фигура-->
<Rectangle Canvas.Left="10" 
Canvas.Top="10" Width="100" 
Height="50"  Fill="yellow" 
Stroke="red" StrokeThickness="4"/>
<Rectangle Canvas.Left="10" 
Canvas.Top="10" Width="50" 
Height="25"  Fill="green" 
Stroke="red" StrokeThickness="4" />

<!--Трансформированная фигура -->
<Canvas Width="200" Height="200"
 Canvas.Left="0" Canvas.Top="0">
<Rectangle Canvas.Left="10" 
Canvas.Top="10" Width="100" 
Height="50"  Fill="yellow" 
Stroke="red" StrokeThickness="4"/>
<Rectangle Canvas.Left="10" 
Canvas.Top="10" Width="50" 
Height="25"  Fill="green" 
Stroke="red" StrokeThickness="4" />

  <Canvas.RenderTransform>  
  
  <MatrixTransform Matrix="1 0 1 1 -10 0"/>
   <!--<SkewTransform AngleX="45" />  
   <TranslateTransform X="-10" 
Y="0"/>  -->

  
  </Canvas.RenderTransform>
  </Canvas>
</Canvas>
    Описание

    Преобразование состоит из двух команд. Запишем их отдельные матрицы:

    TranslateTransform X="-10" Y="0":

    $$$$\begin{vmatrix} 100\\ 010\\ -1001 \end{vmatrix}$$ $$

    SkewTransform AngleX="45":

    $$$$\begin{vmatrix} 100\\ 110\\ 001 \end{vmatrix}$$ $$

    Вычисляем произведение матриц:

    $$$$ \begin{vmatrix} 100\\ 010\\ -1001 \end{vmatrix}* \begin{vmatrix} 100\\ 110\\ 001 \end{vmatrix}=\\= \begin{vmatrix} 1*1+0*1+0*01*0+0*1+0*01*0+0*0+0*1\\ 0*1+1*1+0*00*0+1*1+0*00*0+1*0+0*1\\ -10*1+0*1+1*0-10*0+0*1+1*0-10*0+0*0+1*1 \end{vmatrix}=\\= $$\begin{vmatrix} 100\\ 110\\ -1001 \end{vmatrix}$$ $$

    tg(45)=1

    Результирующая команда: Matrix="1 0 1 1 -10 0"

    Запись серии команд в виде матрицы позволяет сократить запись и, следовательно, уменьшить размер XAML – документа.

    Вычисление матриц может показаться сложно задачей, существенно затрудняющей создание пользовательского интерфейса приложения. Однако для перемножения матриц в C# уже есть встроенные методы и классы. Типичный фрагмент кода для получения результирующей матрицы записывается достаточно лаконично:

    private void multiplicationExample()
{

    Matrix matrix1 = new Matrix(5, 10, 15, 20, 25, 30);
    Matrix matrix2 = new Matrix(2, 4, 6, 8, 10, 12);

    // matrixResult is equal to (70,100,150,220,240,352) 
    Matrix matrixResult = Matrix.Multiply(matrix1, matrix2);

    // matrixResult2 is also
    // equal to (70,100,150,220,240,352) 
    Matrix matrixResult2 = matrix1 * matrix2;

}

    Готовая матрица может быть связана с графическим объектом на стадии выполнения кода.

    Вычисление матриц в программе Mathcad

    Для вычисления матриц может применяться еще одно средство, позволяющее весьма наглядно понять логику работы. Пакет ) – мощное средство для решения широкого класса вычислительных задач, содержит удобные инструменты для работы с матрицами. После установки и запуска программы можно сразу приступать к вычислениям. В главном меню выбираем "Insert – Matrix" ( или нажимаем Ctrl+M) (рис. 6.12):

    (рис 6.12) Вставка матрицы

    В появившемся диалоговом окне выбираем матрицы размером 3х3 (рис.6.13 ):

    (рис 6.13) Определение размера матрицы

    В документе появляется шаблон, в который можно вводить числа (рис. 6.14):

    (рис 6.14) Шаблон матрицы

    После завершения ввода вводим знак равенства "=" и программа автоматически отображает результирующую матрицу (рис. 6.15):

    (рис 6.15) Готовые матрицы

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

    Предыдущее занятие Следующее занятие
    Вернуться к учебному плану
    ^