Übersicht über Pinseltransformationen

Artikel
08/10/2011

Die Brush-Klasse stellt zwei Eigenschaften für Transformationen bereit: Transform und RelativeTransform. Mit diesen Eigenschaften können Sie den Inhalt eines Pinsels drehen, skalieren, neigen und übersetzen. In diesem Thema werden die Unterschiede zwischen diesen zwei Eigenschaften beschrieben und Beispiele für ihre Verwendung bereitgestellt.

Vorbereitungsmaßnahmen

Für dieses Thema sollten Sie mit den Features des Pinsels vertraut sein, den Sie transformieren. Informationen zu LinearGradientBrush und RadialGradientBrush finden Sie unter Übersicht über das Zeichnen mit Volltonfarben und Farbverläufen. Informationen zu ImageBrush, DrawingBrush oder VisualBrush finden Sie unter Zeichnen mit Bildern, Zeichnungen und visuellen Elementen. Sie sollten auch mit den unter Übersicht über Transformationen beschriebenen 2D-Transformationen vertraut sein.

Unterschiede zwischen den Eigenschaften Transform und RelativeTransform

Wenn Sie auf die Transform-Eigenschaft eines Pinsels eine Transformation anwenden, muss Ihnen die Größe des gezeichneten Bereichs bekannt sein, wenn Sie den Pinselinhalt um seinen Mittelpunkt transformieren möchten. Angenommen, der gezeichnete Bereich ist 200 geräteunabhängige Pixel breit und 150 hoch. Wenn Sie eine RotateTransform verwenden, um die Pinselausgabe um 45 Grad um ihren Mittelpunkt zu drehen, legen Sie für RotateTransform einen CenterX-Wert von 100 und einen CenterY-Wert von 75 fest.

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

Verarbeiten Sie den Inhalt des Pinsels. Für einen GradientBrush müssen Sie dazu den Farbverlaufsbereich bestimmen. Für einen TileBrush wird Viewbox dem Viewport zugeordnet. Dies wird die Ausgabe des Pinsels.
Projizieren Sie die Ausgabe des Pinsels auf das 1x1-Transformationsrechteck.
Wenden Sie die RelativeTransform des Pinsels an, sofern vorhanden.
Projizieren Sie die transformierte Ausgabe auf den Bereich, der gezeichnet werden soll.
Wenden Sie die Transform des Pinsels an, sofern vorhanden.

Weil die Anwendung der RelativeTransform erfolgt, während die Ausgabe des Pinsels einem 1x1-Rechteck zugeordnet ist, scheinen die Werte für Mittelpunkt und Offset relativ zu sein. Wenn Sie beispielsweise eine RotateTransform verwenden, um die Pinselausgabe um 45 Grad um ihren Mittelpunkt zu drehen, legen Sie für RotateTransform einen CenterX-Wert von 0,5 und einen CenterY-Wert von 0,5 fest.

In der folgenden Abbildung werden die Ausgaben verschiedener Pinsel veranschaulicht, die mit der RelativeTransform-Eigenschaft und der Transform-Eigenschaft um 45 Grad gedreht wurden.

RelativeTransform- und Transform-Eigenschaften

Verwenden von RelativeTransform mit einem TileBrush-Objekt

Da TileBrush-Objekte komplexer als andere Pinsel sind, kann die Anwendung einer RelativeTransform zu unerwarteten Ergebnissen führen. Ein Beispiel hierfür stellt das folgende Bild dar:

Das Quellbild

Im folgenden Beispiel wird ein ImageBrush verwendet, um einen rechteckigen Bereich mit dem vorherigen Bild zu zeichnen. Dabei wird eine RotateTransform auf die RelativeTransform-Eigenschaft des ImageBrush-Objekts angewendet und die Stretch-Eigenschaft auf UniformToFill festgelegt. Auf diese Weise sollte das Seitenverhältnis des Bilds beibehalten werden, wenn es zum vollständigen Ausfü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 folgende Ausgabe:

Die transformierte Ausgabe

Beachten Sie, dass das Bild verzerrt ist, obwohl die Stretch-Eigenschaft des Pinsels auf UniformToFill festgelegt wurde. Das liegt daran, 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:

Projizieren Sie den Inhalt des Pinsels (Viewbox) auf seine Basiskachel (Viewport), und verwenden Sie dazu die Stretch-Einstellung des Pinsels.
Projizieren Sie die Basiskachel auf das 1x1-Transformationsrechteck.
Wenden Sie die RotateTransform an.
Projizieren Sie die transformierte Basiskachel auf den Bereich, der gezeichnet werden soll.

Beispiel: Drehen eines ImageBrush um 45 Grad

Im folgenden Beispiel wird eine RotateTransform auf die RelativeTransform-Eigenschaft eines ImageBrush-Elements angewendet. Die Eigenschaften CenterX und CenterY des RotateTransform-Objekts sind beide auf 0,5, d. h. auf die relativen Koordinaten des Inhaltsmittelpunkts, festgelegt. Als Ergebnis wird der Inhalt des Pinsels um seinen Mittelpunkt gedreht.

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

Im nächsten Beispiel wird ebenfalls eine RotateTransform auf einen ImageBrush angewendet. Dieses Beispiel verwendet jedoch die Transform-Eigenschaft anstelle der RelativeTransform-Eigenschaft. Um den Pinsel um seinen Mittelpunkt zu drehen, müssen die Eigenschaften CenterX und CenterY des RotateTransform-Objekts auf absolute Koordinaten festgelegt werden. Da das vom Pinsel gezeichnete Rechteck eine Größe von 175 mal 90 Pixel aufweist, liegt sein Mittelpunkt bei (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>

Die Abbildung enthält die folgenden Darstellungen: Pinsel ohne Transformation, mit der Transformation angewendet auf die RelativeTransform-Eigenschaft und mit der Transformation angewendet auf die Transform-Eigenschaft.

RelativeTransform- und Transform-Pinseleinstellungen

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