Cenni preliminari sulle proprietà di trasformazione Brush

Articolo
08/11/2011

La classe Brush fornisce due proprietà di trasformazione: Transform e RelativeTransform. Le proprietà consentono di ruotare, ridimensionare, inclinare e traslare il contenuto di un pennello. Nel presente argomento vengono descritte le differenze tra queste due proprietà e vengono forniti degli esempi di utilizzo.

Prerequisiti

Per comprendere questo argomento, è necessario capire le funzionalità del pennello che viene trasformato. Per LinearGradientBrush e RadialGradientBrush, vedere Cenni sul disegno con colori a tinta unita e sfumature. Per ImageBrush, DrawingBrush o VisualBrush, vedere Disegnare con oggetti Image, Drawing e Visual. È anche necessario avere familiarità con le trasformazioni 2D descritte in Cenni preliminari sulle trasformazioni.

Differenze tra le proprietà Transform e RelativeTransform

Quando viene applicata una trasformazione alla proprietà Transform di un pennello, è necessario conoscere le dimensioni dell'area disegnata se si desidera trasformare il contenuto del pennello intorno al relativo centro. Si supponga che l'area disegnata sia pari a 200 Device Independent Pixel di larghezza e 150 di altezza. Se si utilizzasse RotateTransform per ruotare l'output del pennello di 45 gradi intorno al relativo centro, si assegnerebbe a RotateTransform un CenterX di 100 e un CenterY di 75.

Quando viene applicata una trasformazione alla proprietà RelativeTransform di un pennello, tale trasformazione viene applicata al pennello prima che venga eseguito il mapping del relativo output all'area disegnata. Nel seguente elenco viene riportato l'ordine in base al quale il contenuto di un pennello viene elaborato e trasformato.

Elaborare il contenuto del pennello. Per GradientBrush, questo significa stabilire l'area della sfumatura. Per TileBrush, viene eseguito il mapping di Viewbox a Viewport. Questo diventa l'output del pennello.
Proiettare l'output del pennello sul rettangolo di trasformazione 1 x 1.
Applicare la proprietà RelativeTransform del pennello, se disponibile.
Proiettare l'output trasformato sull'area da disegnare.
Applicare la proprietà Transform del pennello, se disponibile.

Poiché RelativeTransform viene applicato mentre viene eseguito il mapping dell'output del pennello a un rettangolo 1 x 1, il centro della trasformazione e i valori di offset sembrano essere relativi. Ad esempio, se si utilizzasse RotateTransform per ruotare l'output del pennello di 45 gradi intorno al relativo centro, si assegnerebbe a RotateTransform un CenterX di 0,5 e un CenterY di 0,5.

Nella figura riportata di seguito viene illustrato l'output di numerosi pennelli ruotati di 45 gradi utilizzando le proprietà RelativeTransform e Transform.

Proprietà RelativeTransform e Transform

Utilizzo di RelativeTransform con TileBrush

Poiché i pennelli tessera sono più complessi di altri pennelli, l'applicazione di RelativeTransform a uno di questi pennelli potrebbe produrre risultati imprevisti. Ad esempio, analizzare la seguente immagine.

Immagine di origine

Nell'esempio riportato di seguito viene utilizzato un oggetto ImageBrush per disegnare un'area rettangolare con l'immagine precedente. In tal modo, RotateTransform viene applicato alla proprietà RelativeTransform dell'oggetto ImageBrush e la relativa proprietà Stretch viene impostata su UniformToFill consentendo di conservare le proporzioni dell'immagine quando viene estesa per riempire completamente il rettangolo.

<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>

Questo esempio produce il seguente output:

Output trasformato

Si noti che l'immagine è distorta anche se la proprietà Stretch del pennello era impostata su UniformToFill. Ciò è dovuto al fatto che la trasformazione relativa viene applicata successivamente al mapping di Viewbox al relativo Viewport. Nell'elenco riportato di seguito vengono descritti tutti i passaggi del processo.

Proiettare il contenuto del pennello (Viewbox) sulla relativa tessera di base (Viewport) utilizzando l'impostazione Stretch del pennello.
Proiettare la tessera di base sul rettangolo di trasformazione 1 x 1.
Applicare RotateTransform.
Proiettare la tessera di base trasformata sull'area da disegnare.

Esempio: rotazione di un oggetto ImageBrush di 45 gradi

Nell'esempio riportato di seguito RotateTransform viene applicato alla proprietà RelativeTransform di ImageBrush. Le proprietà CenterX e CenterY dell'oggetto RotateTransform sono entrambe impostate su 0,5, le coordinate relative del punto centrale del contenuto. Di conseguenza, il contenuto del pennello viene ruotato intorno al relativo centro.

            '
            ' 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>

Anche in quest'altro esempio RotateTransform viene applicato a ImageBrush, ma viene utilizzata la proprietà Transform anziché la proprietà RelativeTransform. Per ruotare il pennello intorno al relativo centro, è necessario impostare CenterX e CenterY dell'oggetto RotateTransform su coordinate assolute. Poiché il rettangolo disegnato dal pennello è di 175 per 90 pixel, il relativo punto centrale è (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>

Nell'immagine riportata di seguito viene illustrato il pennello senza trasformazioni, con la trasformazione applicata alla proprietà RelativeTransforme con la trasformazione applicata alla proprietà Transform.

Impostazioni RelativeTransform e Transform di Brush

Questo esempio fa parte di un esempio più esaustivo. Per l'esempio completo, vedere Esempio Brush (la pagina potrebbe essere in inglese). Per ulteriori informazioni sui pennelli, vedere Cenni preliminari sui pennelli di WPF.