画笔转换概述

Brush 类提供两个转换属性： Transform 和 RelativeTransform。 利用这些属性，可以旋转、缩放、倾斜和转换画笔的内容。 本主题介绍这两个属性之间的差异，并提供其用法示例。

先决条件

若要了解本主题，应了解要转换的画笔的功能。 有关 LinearGradientBrush 和 RadialGradientBrush，请参阅 具有纯色和渐变的绘图概述。 有关 ImageBrush、 DrawingBrush或 VisualBrush，请参阅 “使用图像、绘图和视觉对象进行绘制”。 还应熟悉 转换概述中所述的 2D 转换。

Transform 和 RelativeTransform 属性之间的差异

当您将变换应用到画笔的Transform属性时，如果希望围绕画笔内容的中心进行变换，则需要知道绘制区域的大小。 假设绘制区域是 200 个设备独立像素宽和 150 高。 如果你使用 RotateTransform 围绕其中心将画笔的输出旋转 45 度，那么你会将 RotateTransform 设置为 CenterX 的 100 和 CenterY 的 75。

将转换应用于画笔 RelativeTransform 的属性时，该转换将应用于画笔，然后再将其输出映射到绘制区域。 以下列表描述了处理和转换画笔内容的顺序。

1. 处理画笔的内容。 对于 a GradientBrush，这意味着确定渐变区域。 对于一个TileBrush，将Viewbox映射到Viewport。 这就是画笔的效果。

2. 将画笔的输出投影到 1 x 1 转换矩形上。

3. 如果画笔有刷头，则使用刷头 RelativeTransform。

4. 将转换后的输出投影到要绘制的区域。

5. 如果画笔有Transform，则应用它。

由于RelativeTransform在画笔输出映射到 1 x 1 矩形时被应用，因此转换中心和偏移值看起来是相对的。 例如，如果使用一个 RotateTransform 围绕其中心旋转画笔的输出45度，那么您会给RotateTransform的CenterX赋值为0.5，并给CenterY的值也为0.5。

下图显示了多个画笔的输出，这些画笔已使用 RelativeTransform 和 Transform 属性旋转 45 度。

将 RelativeTransform 与 TileBrush 配合使用

由于图块画笔比其他画笔更为复杂，因此应用 RelativeTransform 时可能会产生意外的结果。 例如，看下面的图片。

以下示例使用一个 ImageBrush 绘制具有上图的矩形区域。 它向ImageBrush对象的RelativeTransform属性应用RotateTransform，并将其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的情况下也出现了扭曲。 这是因为在画笔映射到Viewport该画笔Viewbox后应用相对转换。 以下列表描述了该过程的每个步骤：

1. 使用画笔Stretch设置将画笔的内容 (Viewbox) 投影到其基础磁贴 (Viewport) 上。

   

2. 将基磁贴投影到 1 x 1 转换矩形上。

   

3. 应用RotateTransform。

   

4. 将转换后的基磁贴投影到要绘制的区域。

   

示例：旋转 ImageBrush 45 度

以下示例将RotateTransform应用于ImageBrush的RelativeTransform属性。 对象的RotateTransformCenterX属性CenterY都设置为 0.5，即内容中心点的相对坐标。 因此，画笔的内容围绕其中心旋转。

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

下一个示例也将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.
//
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>

下图展示了画笔在不同状态下的效果：没有转换、转换应用于RelativeTransform属性以及转换应用于Transform属性。

此示例是较大示例的一部分。 有关完整示例，请参阅 画笔示例。 有关画笔的详细信息，请参阅 WPF 画笔概述。

另请参阅

• Transform
• RelativeTransform
• Transform
• Brush
• 使用纯色和渐变进行绘制概述
• 使用图像、绘图和视觉对象进行绘制
• 转换概述