Академия Microsoft:

Основы XAML
[+]
Опубликован: 23.01.2009 | Доступ: свободный | Студентов: 1541 / 149 | Оценка: 4.33 / 4.22 | Длительность: 13:08:00
Темы: Компьютерная графика, Программирование
Специальности: Программист
Теги: bezier curve, condenser, deep zoom, deep zoom composer, javascript, microsoft word, miter, monotype, nonzero, quadratic, silverlight, анимация, браузеры, вертикальный порядок, видео, графика, интерфейсы, приложения, радиальный градиент, редакторы, форматы, цвета, элементы
Лекция 6:

Трансформации
A
|
версия для печати
< Лекция 5 || Лекция 6: 1234567 || Лекция 7 >

SkewTransform

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

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

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

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

Таблица 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
Дальше >>
< Лекция 5 || Лекция 6: 1234567 || Лекция 7 >

Вопросы и ответы

вопросов: 0