Brush 变换概述

项目
08/12/2011

Brush 类提供了两个变换属性：Transform 和 RelativeTransform。使用这些属性可以旋转、缩放、扭曲和平移画笔的内容。本主题描述了这两个属性之间的区别，并提供了它们的用法示例。

先决条件

若要了解本主题，您应当了解要变换的画笔的功能。对于 LinearGradientBrush 和 RadialGradientBrush，请参见使用纯色和渐变进行绘制概述。对于 ImageBrush、DrawingBrush 或 VisualBrush，请参见使用图像、绘图和 Visual 进行绘制。您还应当熟悉变换概述中所描述的二维变换。

Transform 和 RelativeTransform 属性的区别

向画笔的 Transform 属性应用变换时，如果您想要绕画笔的中心变换画笔内容，则需要知道所绘制区域的大小。假设绘制区域的宽度为 200，高度为 150（以与设备无关的像素为单位）。如果使用一个 RotateTransform 将画笔输出绕其中心旋转约 45 度，您将为 RotateTransform 指定 CenterX 100，CenterY 75。

向画笔的 RelativeTransform 属性应用变换时，变换会在其输出映射到绘制区域之前应用于画笔。下面的列表描述了处理和变换画笔内容的顺序。

处理画笔的内容。对于 GradientBrush，这意味着确定渐变区域。对于 TileBrush，Viewbox 映射到 Viewport。这将成为画笔的输出。
将画笔输出投影到 1 x 1 变换矩形上。
应用画笔的 RelativeTransform（如果有）。
将变换后的输出投影到要绘制的区域。
应用画笔的 Transform（如果有）。

由于是在画笔的输出映射到 1 x 1 矩形的情况下应用 RelativeTransform，因此变换中心和偏移量值是相对的。例如，如果使用一个 RotateTransform 将画笔输出绕其中心旋转 45 度，您将为 RotateTransform 指定 CenterX 0.5，CenterY 0.5。

下图演示已使用 RelativeTransform 和 Transform 属性旋转了 45 度的几个画笔的输出。

RelativeTransform 和 Transform 属性

与 TileBrush 一起使用 RelativeTransform

由于图块画笔比其他画笔更复杂，因此向这种画笔应用 RelativeTransform 可能会产生意外结果。以下面的图像为例。

源图像

下面的示例使用一个 ImageBrush 来绘制一个包含前面的图像的矩形区域。它将 RotateTransform 应用于 ImageBrush 对象的 RelativeTransform 属性，并将其 Stretch 属性设置为 UniformToFill，以便在拉伸图像以完全填充矩形时保留图像的纵横比。

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

该示例产生下面的输出：

变换后的输出

请注意，即使画笔的 Stretch 设置为 UniformToFill，图像也会扭曲。这是因为在将画笔的 Viewbox 映射到其 Viewport 之后应用了相对变换。下面的列表描述该过程的各个步骤：

使用画笔的 Stretch 设置将画笔内容 (Viewbox) 投影到其基本图块 (Viewport)。
将基本图块投影到 1 x 1 变换矩形上。
应用 RotateTransform。
将变换后的基本图块投影到要绘制的区域。

示例：将一个 ImageBrush 旋转 45 度

下面的示例将 RotateTransform 应用于 ImageBrush 的 RelativeTransform 属性。 RotateTransform 对象的 CenterX 和 CenterY 属性均设置为 0.5，这是此内容的中心点的相对坐标。这样，将绕画笔的中心来旋转画笔内容。

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

下面的示例还将 RotateTransform 应用于 ImageBrush，但使用的是 Transform 属性而不是 RelativeTransform 属性。若要使画笔围绕其中心旋转，必须将 RotateTransform 对象的 CenterX 和 CenterY 设置为绝对坐标。由于画笔要绘制的矩形为 175 x 90 像素，因此其中心点为 (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>

下图演示画笔未进行变换的情况、变换应用于 RelativeTransform 属性的情况以及变换应用于 Transform 属性的情况。

画笔的 RelativeTransform 和 Transform 设置