Condividi tramite

Cenni preliminari sulle proprietà di trasformazione Brush

  • Articolo

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. Questo argomento descrive le differenze tra le due proprietà e contiene gli esempi di uso.

Prerequisiti

Per comprendere questo argomento, è necessario capire le funzionalità del pennello che viene trasformato. Per LinearGradientBrush e RadialGradientBrush, vedere La panoramica di Pittura con colori a tinta unita e sfumature. Per ImageBrush, DrawingBrusho VisualBrush, vedere Disegnare con immagini, disegni e oggetti visivi. È anche necessario avere familiarità con le trasformazioni 2D descritte in Cenni preliminari sulle trasformazioni.

Differenze tra le proprietà Transform e RelativeTransform

Quando si applica una trasformazione alla proprietà di Transform un pennello, è necessario conoscere le dimensioni dell'area dipinta se si desidera trasformare il contenuto del pennello al centro. Si supponga che l'area disegnata sia pari a 200 Device Independent Pixel di larghezza e 150 di altezza. Se hai usato un RotateTransform oggetto per ruotare l'output del pennello di 45 gradi circa il suo centro, darei un RotateTransformCenterX valore pari a 100 e a CenterY 75.

Quando si applica una trasformazione alla proprietà di RelativeTransform un pennello, tale trasformazione viene applicata al pennello prima che l'output venga mappato all'area disegnata. L'elenco seguente indica l'ordine in base al quale il contenuto di un pennello viene elaborato e trasformato.

  1. Elaborare il contenuto del pennello. Per un GradientBrushoggetto , ciò significa determinare l'area della sfumatura. Per un TileBrushoggetto , viene eseguito il ViewboxViewportmapping a . Questo diventa l'output del pennello.

  2. Proiettare l'output del pennello sul rettangolo di trasformazione 1 x 1.

  3. Applicare il pennello , RelativeTransformse ne ha uno.

  4. Proiettare l'output trasformato sull'area da disegnare.

  5. Applicare il pennello , Transformse ne ha uno.

RelativeTransform Poiché viene applicato mentre l'output del pennello viene mappato a un rettangolo 1 x 1, i valori del centro e dell'offset della trasformazione sembrano essere relativi. Ad esempio, se è stato usato un RotateTransform oggetto per ruotare l'output del pennello di 45 gradi circa il centro, si assegna a RotateTransformCenterX 0,5 e a CenterY 0,5.

La figura seguente mostra l'output di diversi pennelli ruotati di 45 gradi usando le RelativeTransform proprietà e Transform .

RelativeTransform and Transform properties

Uso di RelativeTransform con TileBrush

Poiché i pennelli riquadro sono più complessi di altri pennelli, l'applicazione di un oggetto RelativeTransform a uno potrebbe produrre risultati imprevisti. Analizzare ad esempio l'immagine seguente.

The source image

Nell'esempio seguente viene utilizzato un ImageBrush oggetto per disegnare un'area rettangolare con l'immagine precedente. Applica un oggetto RotateTransform alla ImageBrush proprietà dell'oggetto RelativeTransform e imposta la relativa Stretch proprietà su UniformToFill, che deve mantenere le proporzioni dell'immagine quando viene allungato 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>

Nell'esempio viene prodotto l'output seguente:

The transformed output

Si noti che l'immagine è distorta, anche se il pennello Stretch è stato impostato su UniformToFill. Ciò avviene perché la trasformazione relativa viene applicata dopo il mapping del Viewbox pennello al relativo Viewportoggetto . L'elenco seguente descrive tutti i passaggi del processo.

  1. Proiettare il contenuto del pennello (Viewbox) nel riquadro di base (Viewport) usando l'impostazione del Stretch pennello.

    Stretch the Viewbox to fit the Viewport

  2. Proiettare la tessera di base sul rettangolo di trasformazione 1 x 1.

    Map the Viewport to the transformation rectangle

  3. Applicare l'oggetto RotateTransform.

    Apply the relative transform

  4. Proiettare la tessera di base trasformata sull'area da disegnare.

    Project the transformed brush onto the output area

Esempio - Rotazione di un oggetto ImageBrush di 45 gradi

Nell'esempio seguente viene applicato un oggetto RotateTransform alla RelativeTransform proprietà di un oggetto ImageBrush. Le RotateTransform proprietà e CenterY dell'oggetto CenterX 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.
//
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;


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


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

Nell'esempio seguente viene applicato anche un RotateTransform oggetto a un ImageBrushoggetto , ma viene utilizzata la Transform proprietà anziché la RelativeTransform proprietà . Per ruotare il pennello al centro, l'oggetto RotateTransformCenterX e CenterY deve essere impostato su coordinate assolute. Poiché il rettangolo disegnato dal pennello è di 175 per 90 pixel, il punto centrale relativo è (87,5, 45).

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


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


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

La figura seguente mostra il pennello senza una trasformazione, con la trasformazione applicata alla RelativeTransform proprietà e con la trasformazione applicata alla Transform proprietà .

Brush RelativeTransform and Transform settings

Questo esempio fa parte di un esempio più esaustivo. Per l'esempio completo, vedere Brushes Sample (Esempio di pennelli). Per altre informazioni sui pennelli, vedere Cenni preliminari sui pennelli di WPF.

Vedi anche