Brush 变换概述
更新:2007 年 11 月
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 度的几个画笔的输出。
与 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 之后应用了相对变换。下面的列表描述该过程的各个步骤:
将基本图块投影到 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.
//
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.
//
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 属性的情况。
此示例摘自一个更大的示例。有关完整示例,请参见Brush 示例。有关画笔的更多信息,请参见 WPF 画笔概述。