Vue d'ensemble des transformations du pinceau

Article
08/10/2011

La classe Brush fournit deux propriétés de transformation : Transform et RelativeTransform. Les propriétés permettent de faire pivoter, d'incliner, de mettre à l'échelle et de traduire le contenu d'un pinceau. Cette rubrique décrit les différences entre ces deux propriétés et illustre leur utilisation par des exemples.

Composants requis

Pour comprendre cette rubrique, vous devez bien connaître les fonctionnalités du pinceau que vous transformez . Pour LinearGradientBrush et RadialGradientBrush, consultez Vue d'ensemble de la peinture avec des couleurs unies ou des dégradés. Pour ImageBrush, DrawingBrush ou VisualBrush, consultez Peinture avec des objets d'image, de dessin et visuels. Vous devez également être familiarisé avec les transformations 2D décrites dans la rubrique Vue d'ensemble des transformations.

Différences entre les propriétés Transform et RelativeTransform

Quand vous appliquez une transformation à la propriété Transform d'un pinceau, vous devez connaître la taille de la zone peinte si vous voulez transformer le contenu du pinceau autour de son centre. Supposons que la zone peinte mesure 200 pixels indépendant du périphérique en largeur 150 en hauteur. Si vous utilisez RotateTransform pour faire pivoter la sortie du pinceau sur 45 degrés autour de son centre, vous devez attribuer à RotateTransform un, CenterX de 100 et un CenterY de 75.

Quand vous appliquez une transformation à la propriété RelativeTransform d'un pinceau, cette transformation est appliquée au pinceau avant que sa sortie ne soit mappée à la zone peinte. La liste suivante décrit l'ordre dans lequel le contenu d'un pinceau est traité et transformé.

Traiter le contenu d'un pinceau. Pour GradientBrush, cela signifie la détermination d'une zone de dégradé. Pour TileBrush, Viewbox est mappé au Viewport. Cela devient la sortie du pinceau.
Projetez la sortie du pinceau sur le rectangle de transformation 1 x 1.
Appliquez la RelativeTransform du pinceau, le cas échéant.
Projetez la sortie transformée sur la zone à peindre.
Appliquez la Transform du pinceau, le cas échéant.

Dans la mesure où RelativeTransform est appliquée alors que la sortie du pinceau est mappée à un rectangle 1 x 1, les valeurs d'offset et du centre de transformation apparaissent comme étant relatives. Par exemple, si vous utilisez RotateTransform pour faire pivoter la sortie du pinceau sur 45 degrés autour de son centre, vous devez attribuer à RotateTransform un CenterX de 0,5 et un CenterY de 0,5.

L'illustration suivante montre la sortie de plusieurs pinceaux qui ont été pivotés sur 45 degrés à l'aide des propriétés RelativeTransform et Transform.

Propriétés RelativeTransform et Transform

Utilisation de RelativeTransform avec TileBrush

Dans la mesure où le pinceau mosaïque est plus complexe que les autres pinceaux, le fait d'appliquer une RelativeTransform à ce type de pinceau peut donner lieu à des résultats inattendus. Prenons l'exemple de l'image suivante.

Image source

L'exemple suivant utilise ImageBrush pour peindre une zone rectangulaire avec l'image précédente. Il applique une RotateTransform à la propriété ImageBrush de l'objet RelativeTransform, et affecte à sa propriété Stretch la valeur UniformToFill, qui doit préserver les proportions de l'image quand elle est étirée de façon à remplir complètement le rectangle.

<Rectangle Width="200" Height="100" Stroke="Black" StrokeThickness="1">
  <Rectangle.Fill>
    <ImageBrush Stretch="UniformToFill">
      <ImageBrush.ImageSource>
        <BitmapImage UriSource="sampleImages\square.jpg" />
      </ImageBrush.ImageSource>
      <ImageBrush.RelativeTransform>
        <RotateTransform CenterX="0.5" CenterY="0.5" Angle="90" />
      </ImageBrush.RelativeTransform>
    </ImageBrush>
  </Rectangle.Fill>
</Rectangle>

Cet exemple produit la sortie suivante :

Sortie transformée

Notez que l'image est formée, alors même que la Stretch du pinceau avait la valeur UniformToFill. C'est parce que la transformation relative est appliquée après que la Viewbox du pinceau est mappée à son Viewport. La liste suivante décrit chaque étape du processus :

Projetez le contenu du pinceau (Viewbox) sur sa mosaïque de base (Viewport) en utilisant le paramètre Stretch du pinceau.
Projetez la mosaïque de base sur le rectangle de transformation 1 x 1.
Appliquez la RotateTransform.
Projetez la mosaïque de base transformée sur la zone à peindre.

Exemple : Rotation de ImageBrush sur 45 degrés

L'exemple suivant applique un RotateTransform à la propriété RelativeTransform d'une ImageBrush. Les propriétés RotateTransform et CenterX d'un objet CenterY ont toutes deux la valeur 0,5, les coordonnées relatives du point central de ce contenu. Par conséquent, le contenu du pinceau pivote par rapport à son centre.

            '
            ' Create an ImageBrush with a relative transform and
            ' use it to paint a rectangle.
            '
            Dim relativeTransformImageBrush As New ImageBrush()
            relativeTransformImageBrush.ImageSource = New BitmapImage(New Uri("sampleImages\pinkcherries.jpg", UriKind.Relative))

            ' Create a 45 rotate transform about the brush's center
            ' and apply it to the brush's RelativeTransform property.
            Dim aRotateTransform As New RotateTransform()
            aRotateTransform.CenterX = 0.5
            aRotateTransform.CenterY = 0.5
            aRotateTransform.Angle = 45
            relativeTransformImageBrush.RelativeTransform = aRotateTransform

            ' Use the brush to paint a rectangle.
            Dim relativeTransformImageBrushRectangle As New Rectangle()
            relativeTransformImageBrushRectangle.Width = 175
            relativeTransformImageBrushRectangle.Height = 90
            relativeTransformImageBrushRectangle.Stroke = Brushes.Black
            relativeTransformImageBrushRectangle.Fill = relativeTransformImageBrush

            //
            // Create an ImageBrush with a relative transform and
            // use it to paint a rectangle.
            //
            ImageBrush relativeTransformImageBrush = new ImageBrush();
            relativeTransformImageBrush.ImageSource =
                new BitmapImage(new Uri(@"sampleImages\pinkcherries.jpg", UriKind.Relative));

            // Create a 45 rotate transform about the brush's center
            // and apply it to the brush's RelativeTransform property.
            RotateTransform aRotateTransform = new RotateTransform();
            aRotateTransform.CenterX = 0.5; 
            aRotateTransform.CenterY = 0.5;
            aRotateTransform.Angle = 45;
            relativeTransformImageBrush.RelativeTransform = aRotateTransform;

            // Use the brush to paint a rectangle.
            Rectangle relativeTransformImageBrushRectangle = new Rectangle();
            relativeTransformImageBrushRectangle.Width = 175;
            relativeTransformImageBrushRectangle.Height = 90;
            relativeTransformImageBrushRectangle.Stroke = Brushes.Black;
            relativeTransformImageBrushRectangle.Fill = relativeTransformImageBrush;

<Rectangle Width="175" Height="90" Stroke="Black">
  <Rectangle.Fill>
    <ImageBrush ImageSource="sampleImages\pinkcherries.jpg">
      <ImageBrush.RelativeTransform>
        <RotateTransform CenterX="0.5" CenterY="0.5" Angle="45" />
      </ImageBrush.RelativeTransform>
    </ImageBrush>
  </Rectangle.Fill>
</Rectangle>

L'exemple suivant applique également un RotateTransform à un ImageBrush ; toutefois, cet exemple utilise la propriété Transform au lieu de la propriété RelativeTransform. Pour faire pivoter le pinceau par rapport à son centre, des coordonnées absolues doivent être affectées aux propriétés RotateTransform et CenterX de l'objet CenterY. Étant donné que le pinceau peint un rectangle de 175 par 90 pixels, le point central du rectangle est (87,5 ; 45).

            '
            ' Create an ImageBrush with a transform and
            ' use it to paint a rectangle.
            '
            Dim transformImageBrush As New ImageBrush()
            transformImageBrush.ImageSource = New BitmapImage(New Uri("sampleImages\pinkcherries.jpg", UriKind.Relative))

            ' Create a 45 rotate transform about the brush's center
            ' and apply it to the brush's Transform property.
            Dim anotherRotateTransform As New RotateTransform()
            anotherRotateTransform.CenterX = 87.5
            anotherRotateTransform.CenterY = 45
            anotherRotateTransform.Angle = 45
            transformImageBrush.Transform = anotherRotateTransform

            ' Use the brush to paint a rectangle.
            Dim transformImageBrushRectangle As New Rectangle()
            transformImageBrushRectangle.Width = 175
            transformImageBrushRectangle.Height = 90
            transformImageBrushRectangle.Stroke = Brushes.Black
            transformImageBrushRectangle.Fill = transformImageBrush

            //
            // Create an ImageBrush with a transform and
            // use it to paint a rectangle.
            //
            ImageBrush transformImageBrush = new ImageBrush();
            transformImageBrush.ImageSource =
                new BitmapImage(new Uri(@"sampleImages\pinkcherries.jpg", UriKind.Relative));

            // Create a 45 rotate transform about the brush's center
            // and apply it to the brush's Transform property.
            RotateTransform anotherRotateTransform = new RotateTransform();
            anotherRotateTransform.CenterX = 87.5;
            anotherRotateTransform.CenterY = 45;
            anotherRotateTransform.Angle = 45;
            transformImageBrush.Transform = anotherRotateTransform;

            // Use the brush to paint a rectangle.
            Rectangle transformImageBrushRectangle = new Rectangle();
            transformImageBrushRectangle.Width = 175;
            transformImageBrushRectangle.Height = 90;
            transformImageBrushRectangle.Stroke = Brushes.Black;
            transformImageBrushRectangle.Fill = transformImageBrush;

<Rectangle Width="175" Height="90" Stroke="Black">
  <Rectangle.Fill>
    <ImageBrush ImageSource="sampleImages\pinkcherries.jpg">
      <ImageBrush.Transform>
        <RotateTransform CenterX="87.5" CenterY="45" Angle="45" />
      </ImageBrush.Transform>
    </ImageBrush>
  </Rectangle.Fill>
</Rectangle>

L'illustration suivante montre le pinceau sans transformation, avec la transformation appliquée à la propriété RelativeTransform, et à la propriété Transform.

Paramètres de Brush RelativeTransform et Transform

Cet exemple est extrait d'un exemple plus complet. Pour obtenir l'exemple complet, consultez Pinceaux, exemple. Pour plus d'informations sur les pinceaux, consultez Vue d'ensemble des pinceaux WPF.