Übersicht über Pinseltransformationen

Die Klasse „Brush“ bietet zwei Transformationseigenschaften: Transform und RelativeTransform. Diese Eigenschaften ermöglichen Ihnen den Inhalt eines Pinsels zu drehen, zu skalieren, zu neigen und zu übersetzen. Dieses Thema beschreibt die Unterschiede zwischen diesen beiden Eigenschaften sowie Beispiele für deren Verwendung.

Voraussetzungen

Um dieses Thema zu verstehen, sollten Sie die Features des Pinsels kennen, den Sie transformieren. Informationen zu LinearGradientBrush und RadialGradientBrush finden Sie unter Übersicht über das Zeichnen mit Volltonfarben und Farbverläufen. Informationen zu ImageBrushDrawingBrush und VisualBrush finden Sie unter Zeichnen mit Bildern, Zeichnungen und visuellen Elementen. Sie sollten auch mit den 2D- Transformationen, die unter Übersicht über Transformationen beschrieben werden, vertraut sein.

Unterschiede zwischen den Eigenschaften Transform und RelativeTransform

Wenn Sie eine Transformation auf die Transform-Eigenschaft eines Pinsels anwenden, müssen Sie die Größe des gezeichneten Bereichs kennen, wenn Sie den Inhalt des Pinsels um seinen Mittelpunkt transformieren möchten. Angenommen, der gezeichnete Bereich ist 200 geräteunabhängige Pixel breit und 150 hoch. Wenn Sie eine RotateTransform genutzt haben, um die Ausgabe des Pinsels 45 Grad um seinen Mittelpunkt zu drehen, geben Sie für RotateTransform einen CenterX von 100 und ein CenterY von 75 an.

Wenn Sie eine Transformation auf die RelativeTransform-Eigenschaft eines Pinsels anwenden, wird diese Transformation auf den Pinsel angewendet, bevor dessen Ausgabe dem bemalten Bereich zugeordnet wird. Die folgende Liste beschreibt die Reihenfolge, in welcher der Inhalt eines Pinsels verarbeitet und transformiert wird.

1. Verarbeiten Sie den Inhalt des Pinsels. Für einen GradientBrush bedeutet dies, den Gradientenbereich zu bestimmen. Für einen TileBrush ist die Viewbox dem Viewport zugeordnet. Dies ergibt die Ausgabe des Pinsels.

2. Projizieren Sie die Ausgabe des Pinsels auf das 1 x 1-Transformationsrechteck.

3. Wenden Sie den RelativeTransform des Pinsels an, falls vorhanden.

4. Projizieren Sie die transformierte Ausgabe auf den zu zeichnenden Bereich.

5. Wenden Sie den Transform des Pinsels an, falls vorhanden.

Da die RelativeTransform angewendet wird, während die Ausgabe des Pinsels einem 1 x 1-Rechteck zugeordnet wird, scheinen die Werte für Transform Center und Offset relativ zu sein. Wenn Sie etwa eine RotateTransform genutzt haben, um die Ausgabe des Pinsels 45 Grad um seinen Mittelpunkt zu drehen, geben Sie für RotateTransform einen CenterX von 0,5 und ein CenterY von 0,5 an.

Die nachstehende Abbildung zeigt die Ausgabe mehrerer Pinsel an, die mithilfe der Eigenschaften RelativeTransform und Transform um 45 Grad gedreht wurden.

Verwenden von RelativeTransform mit einem TileBrush-Objekt

Da TileBrush-Objekte komplexer als andere Pinsel sind, kann das Anwenden einer RelativeTransform auf ein solches Objekt zu unerwarteten Ergebnissen führen. Ziehen Sie z.B. die folgende Abbildung heran.

Im folgenden Beispiel wird ein ImageBrush verwendet, um einen rechteckigen Bereich mit dem vorherigen Bild zu zeichnen. Es wendet eine RotateTransform auf die RelativeTransform-Eigenschaft des ImageBrush-Objekts an, und setzt die Stretch-Eigenschaft auf UniformToFill, um zu gewährleisten, dass das Seitenverhältnis des Bildes beibehalten wird, wenn es zum kompletten Füllen des Rechtecks gestreckt wird.

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

Dieses Beispiel erzeugt die folgende Ausgabe:

Beachten Sie, dass das Bild verzerrt ist, obwohl die Stretch des Pinsels auf UniformToFill gesetzt wurde. Der Grund hierfür ist, dass die relative Transformation angewendet wird, nachdem die Viewbox des Pinsels seinem Viewport zugeordnet wurde. In der folgenden Liste werden die einzelnen Schritte des Prozesses beschrieben:

1. Den Inhalt des Pinsels (Viewbox) mit der Stretch-Einstellung des Pinsels auf seine Basiskachel (Viewport) projizieren.

   

2. Projizieren Sie die Basiskachel auf das 1 x 1-Transformationsrechteck.

   

3. Wenden Sie die RotateTransform.

   

4. Projizieren Sie die transformierte Basiskachel auf den zu zeichnenden Bereich.

   

Beispiel: Drehen eines ImageBrush um 45 Grad

Das folgende Beispiel wendet RotateTransform auf die RelativeTransform-Eigenschaft eines ImageBrush an. Die CenterX- und CenterY-Eigenschaften des RotateTransform- Objekts sind beide auf 0,5 gesetzt, d.h. auf die relativen Koordinaten des Mittelpunkts des Inhalts. Als Folge, wird der Inhalt des Pinsels wird um seinen Mittelpunkt gedreht.

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

Das nächste Beispiel wendet ebenfalls eine RotateTransform auf ein ImageBrush an, verwendet jedoch anstelle der Transform-Eigenschaft die RelativeTransform-Eigenschaft. Um den Pinsel um seinen Mittelpunkt zu drehen, müssen CenterX und CenterY des RotateTransform-Objekts auf absolute Koordinaten gesetzt sein. Da das vom Pinsel gezeichnete Rechteck 175 mal 90 Pixel beträgt, liegt sein Mittelpunkt bei (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>

Die folgende Abbildung zeigt den Pinsel ohne Transformation. Die Transformation ist auf die RelativeTransform- und Transform-Eigenschaften angewendet.

Dieses Beispiel ist Teil eines umfangreicheren Beispiels. Das vollständige Beispiel finden Sie unter der Beispiel für Pinsel. Weitere Informationen zu Pinseln finden Sie unter der Übersicht über WPF-Pinsel.

Siehe auch

• Transform
• RelativeTransform
• Transform
• Brush
• Übersicht über das Zeichnen mit Volltonfarben und Farbverläufen
• Zeichnen mit Bildern, Zeichnungen und visuellen Elementen
• Übersicht über Transformationen