Appunti di WPF – Tredicesima Puntata – Le trasformazioni geometriche

WPF mette a disposizione delle classi che permettono di modificare le figure geometriche applicando loro delle trasformazioni geometriche.

Una trasformazione geometrica è una funzione che trasforma un punto del piano, appartenente ad una figura, in un altro punto del piano.

Il framework ci mette a disposizione un certo numero di classi tutte derivate dalla classe Transform presente nel namespace System.Windows.Media:

La classe Transform implementa l’interfaccia Freezeable (perché lo fa una delle sua classi padre) che prevede un meccanismo di notifica dei cambiamenti di stato che permette di aggiornare in tempo reale le figure geometriche a cui è agganciata.

In particolare, le classi di trasformazione hanno lo stesso significato:

· TranslateTransform : implementa la traslazione delle immagini cioè una trasformazione che, in sostanza, sposta le coordinate dell’origine del riferimento cartesiano in cui è disegnata la figura geometrica;

· RotateTransform : implementa la rotazione della figura geometrica;

· SkewTransform : implementa la deformazione della figura geometrica;

· ScaleTransform : implementa lo zoom della figura geometrica;

· MatrixTransform : permette di definire una trasformazione complessa.

· TransformGroup : permette di raggruppare più trasformazioni assieme.

Alla base di tutti i tipi di trasformazioni c’è la MatrixTransform ma WPF ci mette a disposizione delle classi “scorciatoia” per semplificarci la vita.

Per poter applicare una trasformazione ad un elemento che deriva da UIElement possiamo agire sulle proprietà RenderTransform o LayoutTransform.

Quando impostiamo la RenderTransform, questa viene applicata dopo che il layout è stato composto, quindi le eventuali “deformazioni” dell’elemento a cui è applicata non influenzano il layout complessivo della finestra.

Se impostiamo, invece, la LayoutTransform, questa viene applicata prima di comporre il Layout il che comporta che tale layout è influenzato dalla trasformazione.

La seguente interfaccia  ha due StackPanel con due Button il primo dei quali è sottoposto ai due tipi di trasformazione:

Per capire come funzionano i diversi tipi di trasformazione, vediamo alcuni esempi pratici con dello XAML.

TranslateTransform

1. <Window x:Class="TranslateTransform"
2.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4.     Title="TranslateTransform" Height="480" Width="640">
5.     <Grid>
6.         <Grid.RowDefinitions>
7.             <RowDefinition Height="Auto" />
8.             <RowDefinition Height="*" />
9.         </Grid.RowDefinitions>
10.         <StackPanel>
11.             <Slider Name="sliderX" Minimum="0" Maximum="{Binding ElementName=Canvas, Path=ActualWidth}" Value="0" Margin="2"></Slider>
12.             <Slider Name="sliderY" Minimum="0" Maximum="{Binding ElementName=Canvas, Path=ActualHeight}" Value="0" Margin="2"></Slider>
13.         </StackPanel>
14.         <Canvas Grid.Row="1" Name="Canvas">
15.             <Polygon Stroke="black"
16.                  Points="50,50  100,0 200,100 100,200 0,100 50,50 150,50 150,150 50,150"
17.                  FillRule="EvenOdd" HorizontalAlignment="Center" >
18.                 <Polygon.Fill>
19.                     <RadialGradientBrush>
20.                         <GradientStop Color="cyan" Offset="0"></GradientStop>
21.                         <GradientStop Color="blue" Offset="1"></GradientStop>
22.                     </RadialGradientBrush>
23.                 </Polygon.Fill>
24.                 <Polygon.RenderTransform>
25.                     <TranslateTransform X="{Binding ElementName=sliderX, Path=Value}" Y="{Binding ElementName=sliderY, Path=Value}"/>
26.                 </Polygon.RenderTransform>
27.             </Polygon>
28.         </Canvas>
29.     </Grid>
30. </Window>

 

RotateTransform

1. <Window x:Class="RotateTransform"
2.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4.     Title="RotateTransform" Height="500" Width="500">
5.     <Grid>
6.         <Grid.RowDefinitions>
7.             <RowDefinition Height="Auto" />
8.             <RowDefinition Height="*" />
9.         </Grid.RowDefinitions>
10.         <StackPanel>
11.             <Slider Name="sliderAngle" Minimum="0" Maximum="360" Value="0" Margin="2"></Slider>
12.         </StackPanel>
13.         <Canvas Grid.Row="1" Name="Canvas">
14.             <Polygon Stroke="black" Canvas.Top="20" Canvas.Left="43"
15.                  Points="100,100  200,0 400,200 200,400 0,200 100,100 300,100 300,300 100,300"
16.                  FillRule="EvenOdd" HorizontalAlignment="Center" >
17.                 <Polygon.Fill>
18.                     <RadialGradientBrush>
19.                         <GradientStop Color="cyan" Offset="0"></GradientStop>
20.                         <GradientStop Color="blue" Offset="1"></GradientStop>
21.                     </RadialGradientBrush>
22.                 </Polygon.Fill>
23.                 <Polygon.RenderTransform>
24.                     <RotateTransform Angle="{Binding ElementName=sliderAngle, Path=Value}"
25.                                      CenterX="199.5"
26.                                      CenterY="199.5"/>
27.                 </Polygon.RenderTransform>
28.             </Polygon>
29.         </Canvas>
30.     </Grid>
31. </Window>

SkewTransform

1. <Window x:Class="SkewTransform"
2.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4.     Title="SkewTransform" Height="500" Width="500">
5.     <Grid>
6.         <Grid.RowDefinitions>
7.             <RowDefinition Height="Auto" />
8.             <RowDefinition Height="*" />
9.         </Grid.RowDefinitions>
10.         <StackPanel>
11.             <Slider Name="sliderAngleX" Minimum="0" Maximum="360" Value="0" Margin="2"></Slider>
12.             <Slider Name="sliderAngleY" Minimum="0" Maximum="360" Value="0" Margin="2"></Slider>
13.         </StackPanel>
14.         <Canvas Grid.Row="1" Name="Canvas">
15.             <Polygon Stroke="black" Canvas.Top="20" Canvas.Left="43"
16.                  Points="100,100  200,0 400,200 200,400 0,200 100,100 300,100 300,300 100,300"
17.                  FillRule="EvenOdd" HorizontalAlignment="Center" >
18.                 <Polygon.Fill>
19.                     <RadialGradientBrush>
20.                         <GradientStop Color="cyan" Offset="0"></GradientStop>
21.                         <GradientStop Color="blue" Offset="1"></GradientStop>
22.                     </RadialGradientBrush>
23.                 </Polygon.Fill>
24.                 <Polygon.RenderTransform>
25.                     <SkewTransform AngleX="{Binding ElementName=sliderAngleX, Path=Value}"
26.                                    AngleY="{Binding ElementName=sliderAngleY, Path=Value}"
27.                                    CenterX="199.5"
28.                                    CenterY="199.5" />
29.                 </Polygon.RenderTransform>
30.             </Polygon>
31.         </Canvas>
32.     </Grid>
33. </Window>

ScaleTransform

1. <Window x:Class="ScaleTransform"
2.     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3.     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4.     Title="ScaleTransform" Height="500" Width="500">
5.     <Grid>
6.         <Grid.RowDefinitions>
7.             <RowDefinition Height="Auto" />
8.             <RowDefinition Height="*" />
9.         </Grid.RowDefinitions>
10.         <StackPanel>
11.             <Slider Name="sliderScaleX" Minimum="0" Maximum="2" Value="1" Margin="2"></Slider>
12.             <Slider Name="sliderScaleY" Minimum="0" Maximum="2" Value="1" Margin="2"></Slider>
13.         </StackPanel>
14.         <Canvas Grid.Row="1" Name="Canvas">
15.             <Polygon Stroke="black" Canvas.Top="20" Canvas.Left="43"
16.                  Points="100,100  200,0 400,200 200,400 0,200 100,100 300,100 300,300 100,300"
17.                  FillRule="EvenOdd" HorizontalAlignment="Center">
18.                 <Polygon.Fill>
19.                     <RadialGradientBrush>
20.                         <GradientStop Color="cyan" Offset="0"></GradientStop>
21.                         <GradientStop Color="blue" Offset="1"></GradientStop>
22.                     </RadialGradientBrush>
23.                 </Polygon.Fill>
24.                 <Polygon.RenderTransform>
25.                     <ScaleTransform ScaleX="{Binding ElementName=sliderScaleX, Path=Value}"
26.                                     ScaleY="{Binding ElementName=sliderScaleY, Path=Value}"
27.                                     CenterX="199.5"
28.                                     CenterY="199.5"/>
29.                 </Polygon.RenderTransform>
30.             </Polygon>
31.         </Canvas>
32.     </Grid>
33. </Window>

MatrixTransform

La matrice di trasformazione è composta da tre righe e tre colonne:

La matrice unità, cioè con M11=M22=1 e M21=M12=OffsetX=OffsetY=0 indica una trasformazione nulla, ovvero una trasformazione che non modifica l’aspetto dell’elemento.

I componenti della matrice hanno il seguente significato:

· OffsetX e OffsetY consentono di definire una translazione, rispettivamente per l’asse X e Y;

· M11 e M22 definiscono una trasformazione di scala con il valore M11 per le x e M22 per le y;

· M12 e M21 definiscono una trasformazione di skew con il valore M21 per le x e M12 per le y.

Ad esempio la seguente trasformazione esegue uno skew rispetto all’asse x e uno scale rispetto all’asse y:

1. <MatrixTransform>
2.     <MatrixTransform.Matrix>
3.         <Matrix M11="1" M12="0"
4.                 M21="0.5" M22="1.5"
5.                 OffsetX="0" OffsetY="0" />
6.     </MatrixTransform.Matrix>
7. </MatrixTransform>

Technorati Tag: wpf,tutorial,windows presentation foundation,presentation framework,trasformazioni geometriche,transform,scale,matrix,skew,translate,rotate