Comment : incliner un élément
Mise à jour : novembre 2007
Cet exemple montre comment utiliser un SkewTransform pour incliner un élément. Une inclinaison est une transformation qui étire l'espace de coordonnées de façon non uniforme. L'une des utilisations types d'un SkewTransform est la simulation d'une profondeur 3D dans des objets 2D.
Utilisez les propriétés CenterX et CenterY pour spécifier le point central du SkewTransform.
Utilisez les propriétés AngleX et AngleY pour spécifier l'angle d'inclinaison de l'axe x et de l'axe y, et pour incliner le système de coordonnées actuel le long de ces axes.
Pour prévoir l'effet d'une transformation d'inclinaison, considérez que l'AngleX incline les valeurs de l'axe x par rapport au système de coordonnées d'origine. Par conséquent, pour un AngleX de 30, l'axe y pivote de 30 degrés via l'origine et incline les valeurs x de 30 degrés par rapport à cette origine. De même, un AngleY de 30 incline les valeurs y de la forme de 30 degrés par rapport à l'origine. Notez que l'effet n'est pas le même que pour un déplacement du système de coordonnées de 30 degrés en x ou y.
L'exemple suivant applique une inclinaison horizontale de 45 degrés à un Rectangle à partir d'un point central (0,0).
Exemple
<Rectangle
Height="50" Width="50" Fill="#CCCCCCFF"
Stroke="Blue" StrokeThickness="2"
Canvas.Left="100" Canvas.Top="100">
<Rectangle.RenderTransform>
<!-- Applies a horizontal skew of 45 degrees
from a center point of (0,0). -->
<SkewTransform CenterX="0" CenterY="0" AngleX="45" AngleY="0" />
</Rectangle.RenderTransform>
</Rectangle>
L'exemple suivant applique une inclinaison horizontale de 45 degrés à un Rectangle à partir d'un point central (25,25).
<Rectangle Height="50" Width="50" Fill="#CCCCCCFF"
Canvas.Left="100" Canvas.Top="100"
Stroke="Blue" StrokeThickness="2">
<Rectangle.RenderTransform>
<!-- Applies a horizontal skew of 45 degrees
from a center point of (25,25). -->
<SkewTransform CenterX="25" CenterY="25" AngleX="45" AngleY="0" />
</Rectangle.RenderTransform>
</Rectangle>
L'exemple suivant applique une inclinaison verticale de 45 degrés à un Rectangle à partir d'un point central (25,25).
<Rectangle Height="50" Width="50" Fill="#CCCCCCFF"
Stroke="Blue" StrokeThickness="2"
Canvas.Left="100" Canvas.Top="100">
<Rectangle.RenderTransform>
<!-- Applies a vertical skew of 45 degrees
from a center point of (25,25). -->
<SkewTransform CenterX="25" CenterY="25" AngleX="0" AngleY="45" />
</Rectangle.RenderTransform>
</Rectangle>
L'illustration suivante montre les différentes inclinaisons utilisées dans cet exemple.
Les trois exemples SkewTransform illustrés
.gif)
Pour l'exemple complet, consultez Transformations 2D, exemple.
Voir aussi
Concepts
Vue d'ensemble des transformations