Übersicht über PinseltransformationenBrush Transformation Overview

Die Brush-Klasse bietet zwei Transformationseigenschaften: Transform und RelativeTransform.The Brush class provides two transformation properties: Transform and RelativeTransform. Diese Eigenschaften ermöglichen Ihnen den Inhalt eines Pinsels zu drehen, zu skalieren, zu neigen und zu übersetzen.The properties enable you to rotate, scale, skew, and translate a brush's contents. Dieses Thema beschreibt die Unterschiede zwischen diesen beiden Eigenschaften sowie Beispiele für deren Verwendung.This topic describes the differences between these two properties and provides examples of their usage.

VorraussetzungenPrerequisites

Um dieses Thema zu verstehen, sollten Sie die Features des Pinsels kennen, den Sie transformieren.To understand this topic, you should understand the features of the brush that you are transforming. Für LinearGradientBrush und RadialGradientBrush, finden Sie unter den Zeichnen mit Volltonfarben und Farbverläufen.For LinearGradientBrush and RadialGradientBrush, see the Painting with Solid Colors and Gradients Overview. Für ImageBrush, DrawingBrush, oder VisualBrush, finden Sie unter Zeichnen mit Bildern, Zeichnungen und visuellen Elementen.For ImageBrush, DrawingBrush, or VisualBrush, see Painting with Images, Drawings, and Visuals. Sie sollten auch mit den 2D- Transformationen, die unter Übersicht über Transformationen beschrieben werden, vertraut sein.You should also be familiar with the 2D transforms described in the Transforms Overview.

Unterschiede zwischen den Eigenschaften Transform und RelativeTransformDifferences between the Transform and RelativeTransform Properties

Wenn Sie eine Transformation auf eines Pinsels anwenden Transform -Eigenschaft müssen Sie die Größe des gezeichneten Bereichs kennen, wenn Sie den Inhalt des Pinsels zu seinen Mittelpunkt transformieren möchten.When you apply a transform to a brush's Transform property, you need to know the size of the painted area if you want to transform the brush contents about its center. Angenommen, der gezeichnete Bereich ist 200 geräteunabhängige Pixel breit und 150 hoch.Suppose the painted area is 200 device independent pixels wide and 150 tall. Bei Verwendung einer RotateTransform den Pinsel zu drehen Sie die Ausgabe um 45 Grad um seinen Mittelpunkt, die Sie erhalten würde die RotateTransform eine CenterX von 100 und ein CenterY von 75.If you used a RotateTransform to rotate the brush's output 45 degrees about its center, you'd give the RotateTransform a CenterX of 100 and a CenterY of 75.

Wenn Sie eine Transformation auf eines Pinsels anwenden RelativeTransform -Eigenschaft, diese Transformation auf den Pinsel angewendet, bevor seine Ausgabe dem gezeichneten Bereich zugeordnet ist.When you apply a transform to a brush's RelativeTransform property, that transform is applied to the brush before its output is mapped to the painted area. Die folgende Liste beschreibt die Reihenfolge, in welcher der Inhalt eines Pinsels verarbeitet und transformiert wird.The following list describes the order in which a brush’s contents are processed and transformed.

  1. Verarbeiten Sie den Inhalt des Pinsels.Process the brush’s contents. Für eine GradientBrush, dies bedeutet, dass der Farbverlauf Bereich.For a GradientBrush, this means determining the gradient area. Für eine TileBrush, Viewbox zugeordnet ist die Viewport.For a TileBrush, the Viewbox is mapped to the Viewport. Dies ergibt die Ausgabe des Pinsels.This becomes the brush’s output.

  2. Projizieren Sie die Ausgabe des Pinsels auf das 1 x 1-Transformationsrechteck.Project the brush’s output onto the 1 x 1 transformation rectangle.

  3. Anwenden des Pinsels RelativeTransform, sofern vorhanden.Apply the brush’s RelativeTransform, if it has one.

  4. Projizieren Sie die transformierte Ausgabe auf den zu zeichnenden Bereich.Project the transformed output onto the area to paint.

  5. Anwenden des Pinsels Transform, sofern vorhanden.Apply the brush’s Transform, if it has one.

Da die RelativeTransform angewendet wird, während die Ausgabe des Pinsels einem 1 x 1-Rechteck Transformationsmittelpunkts zugeordnet ist und Offset-Werte scheinen relativ sein.Because the RelativeTransform is applied while the brush’s output is mapped to a 1 x 1 rectangle, transform center and offset values appear to be relative. Angenommen, Sie verwendet eine RotateTransform den Pinsel zu drehen Sie die Ausgabe um 45 Grad um seinen Mittelpunkt, die Sie erhalten würde die RotateTransform eine CenterX von 0,5 und ein CenterY von 0,5.For example, if you used a RotateTransform to rotate the brush's output 45 degrees about its center, you'd give the RotateTransform a CenterX of 0.5 and a CenterY of 0.5.

Die folgende Abbildung zeigt die Ausgabe verschiedener Pinsel, der mit um 45 Grad gedreht wurden die RelativeTransform und Transform Eigenschaften.The following illustration shows the output of several brushes that have been rotated by 45 degrees using the RelativeTransform and Transform properties.

RelativeTransform- und Transform-EigenschaftenRelativeTransform and Transform properties

Verwenden von RelativeTransform mit einem TileBrush-ObjektUsing RelativeTransform with a TileBrush

Da TileBrush-Objekte komplexer als andere Pinsel sind, Anwenden einer RelativeTransform auf eine möglicherweise zu unerwarteten Ergebnissen führen.Because tile brushes are more complex than other brushes, applying a RelativeTransform to one might produce unexpected results. Ziehen Sie z.B. die folgende Abbildung heran.For example, take the following image.

Das  QuellbildThe source image

Im folgenden Beispiel wird ein ImageBrush um einen rechteckigen Bereich mit der obigen Abbildung zu zeichnen.The following example uses an ImageBrush to paint a rectangular area with the preceding image. Es gilt eine RotateTransform auf die ImageBrush des Objekts RelativeTransform Eigenschaften der Stretch Eigenschaft, um UniformToFill, das Seitenverhältnis des Bilds beibehalten soll, wenn es zum kompletten Füllen des Rechtecks gestreckt wird.It applies a RotateTransform to the ImageBrush object's RelativeTransform property, and sets its Stretch property to UniformToFill, which should preserve the image's aspect ratio when it is stretched to completely fill the 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>

Dieses Beispiel erzeugt die folgende Ausgabe:This example produces the following output:

Die transformierte  AusgabeThe transformed output

Beachten Sie, dass das Bild, obwohl verzerrt ist der des Pinsels Stretch wurde UniformToFill.Notice that the image is distorted, even though the brush's Stretch was set to UniformToFill. Das ist da die relative Transformation angewendet wird, nach dem des Pinsels Viewbox zugeordnet ist seine Viewport.That's because the relative transform is applied after the brush's Viewbox is mapped to its Viewport. In der folgenden Liste werden die einzelnen Schritte des Prozesses beschrieben:The following list describes each step of the process:

  1. Projizieren Sie den Inhalt des Pinsels (Viewbox) auf seine Basiskachel (Viewport) mithilfe des Pinsels Stretch festlegen.Project the brush's contents (Viewbox) onto its base tile (Viewport) using the brush's Stretch setting.

    Dehnen Sie Viewbox, um Viewport einzupassenStretch the Viewbox to fit the Viewport

  2. Projizieren Sie die Basiskachel auf das 1 x 1-Transformationsrechteck.Project the base tile onto the 1 x 1 transformation rectangle.

    Ordnen Sie Viewport dem Transformationsrechteck zuMap the Viewport to the transformation rectangle

  3. Anwenden der RotateTransform.Apply the RotateTransform.

    Wenden Sie die relative  Transformation anApply the relative transform

  4. Projizieren Sie die transformierte Basiskachel auf den zu zeichnenden Bereich.Project the transformed base tile onto the area to paint.

    Projizieren Sie den transformierten Pinsel auf den  AusgabebereichProject the transformed brush onto the output area

Beispiel: Drehen eines ImageBrush um 45 GradExample: Rotate an ImageBrush 45 Degrees

Im folgenden Beispiel wird eine RotateTransform auf die RelativeTransform Eigenschaft eine ImageBrush.The following example applies a RotateTransform to the RelativeTransform property of an ImageBrush. Die RotateTransform des Objekts CenterX und CenterY Eigenschaften sind beide auf 0,5 festgelegt, zeigen Sie die relativen Koordinaten des Inhalts Center.The RotateTransform object's CenterX and CenterY properties are both set to 0.5, the relative coordinates of the content's center point. Als Folge, wird der Inhalt des Pinsels wird um seinen Mittelpunkt gedreht.As a result, the brush's contents are rotated about its center.

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

Im nächste Beispiel gilt auch für eine RotateTransform auf eine ImageBrush, verwendet jedoch die Transform -Eigenschaft anstelle der RelativeTransform Eigenschaft.The next example also applies a RotateTransform to an ImageBrush, but uses the Transform property instead of the RelativeTransform property. Den Pinsel seinen Mittelpunkt zu drehen der RotateTransform des Objekts CenterX und CenterY muss auf absolute Koordinaten festgelegt werden.To rotate the brush about its center, the RotateTransform object's CenterX and CenterY must be set to absolute coordinates. Da das vom Pinsel gezeichnete Rechteck 175 mal 90 Pixel beträgt, liegt sein Mittelpunkt bei (87,5, 45).Because the rectangle being painted by the brush is 175 by 90 pixels, its center point is (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, mit der Transformation angewendet auf die RelativeTransform -Eigenschaft, und klicken Sie mit der Transformation angewendet auf die Transform Eigenschaft.The following illustration shows the brush without a transform, with the transform applied to the RelativeTransform property, and with the transform applied to the Transform property.

RelativeTransform- und Transform-PinseleinstellungenBrush RelativeTransform and Transform settings

Dieses Beispiel ist Teil eines umfangreicheren Beispiels.This example is part of a larger sample. Das vollständige Beispiel finden Sie unter der Beispiel für Pinsel.For the complete sample, see the Brushes Sample. Weitere Informationen zu Pinseln, finden Sie unter der Übersicht über WPF-Pinsel.For more information about brushes, see the WPF Brushes Overview.

Siehe auchSee also