筆刷轉換概觀

Brush 類別提供兩個轉換屬性： Transform 和 RelativeTransform 。 上述屬性可讓您旋轉、縮放、扭曲及平移筆刷的內容。 本主題說明這兩種屬性之間的差異並提供使用方式範例。

必要條件

若要了解本主題，您應該了解您要轉換的筆刷功能。 針對 LinearGradientBrush 和 RadialGradientBrush ，請參閱 使用純色和漸層概觀 小畫家。 針對 ImageBrush 、 DrawingBrush 或 VisualBrush ，請參閱 使用影像、繪圖和視覺效果 小畫家。 您也應該熟悉轉換概觀中所述的 2D 轉換。

Transform 和 RelativeTransform 屬性之間的差異

當您將轉換套用至筆刷的 Transform 屬性時，如果您想要轉換筆刷內容的中心，則必須知道繪製區域的大小。 假設繪製的區域寬度為 200 裝置獨立像素且高度為 150。 如果您使用 來 RotateTransform 將筆刷的輸出旋轉其中心 45 度，則會提供 RotateTransformCenterX 100 和 CenterY 75 的 。

當您將轉換套用至筆刷的 RelativeTransform 屬性時，該轉換會在其輸出對應至繪製區域之前套用至筆刷。 下列清單說明筆刷內容的處理和轉換順序。

1. 處理筆刷的內容。 GradientBrush針對 ，這表示判斷漸層區域。 TileBrush針對 ，會 Viewbox 對應至 Viewport 。 這會成為筆刷的輸出。

2. 將筆刷的輸出投影至 1 x 1 轉換矩形。

3. 如果筆刷有筆刷，請套用筆刷 RelativeTransform 的 。

4. 將轉換後的輸出投影至要繪製的區域。

5. 如果筆刷有筆刷，請套用筆刷 Transform 的 。

RelativeTransform由於 會在筆刷的輸出對應至 1 x 1 矩形時套用 ，因此轉換置中和位移值似乎相對。 例如，如果您使用 RotateTransform 來旋轉筆刷的輸出 45 度，其中心會提供 RotateTransformCenterX 0.5 和 CenterY 0.5 的 。

下圖顯示使用 和 Transform 屬性旋轉 45 度 RelativeTransform 之數個筆刷的輸出。

搭配 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. 使用筆刷 Stretch 的設定，將筆刷的內容 （ Viewbox ） 投影到其基底磚上。 Viewport

   

2. 將基底的並排顯示投影至 1 x 1 轉換矩形。

   

3. 套用 RotateTransform 。

   

4. 將轉換後基底的並排顯示投影至要繪製的區域。

   

範例︰ 旋轉 ImageBrush 45 度

下列範例會將 RotateTransform 套用至 RelativeTransform 的 ImageBrush 屬性。 物件的 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 屬性。 若要繞其中心旋轉筆刷，物件的 RotateTransformCenterX 和 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 轉換。

這個範例是某完整範例的一部分。 如需完整的範例，請參閱 Brush 範例。 如需筆刷的詳細資訊，請參閱 WPF 筆刷概觀。

另請參閱

• Transform
• RelativeTransform
• Transform
• Brush
• 使用純色和漸層繪製的概觀
• 使用影像、繪圖和視覺效果繪製
• 轉換概觀