筆刷轉換概觀

發行項
08/12/2011

Brush 類別提供兩種轉換屬性：Transform 和 RelativeTransform。這些屬性可讓您旋轉、縮放、扭曲和轉譯筆刷的內容。本主題描述這兩個屬性的差異，並提供它們使用方式的範例。

必要條件

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

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，所以轉換中心和位移 (Offset) 值會是相對的。例如，如果使用 RotateTransform 在筆刷的中心將筆刷輸出旋轉 45 度，則會看到 RotateTransform 的 CenterX 為 0.5，而 CenterY 為 0.5。

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

RelativeTransform 和 Transform 屬性

搭配使用 RelativeTransform 與 TileBrush

因為並排顯示筆刷比其他筆刷還要複雜，所以將 RelativeTransform 套用至並排顯示筆刷可能會產生未預期的結果。以下列影像為例。

影像來源

下列範例使用 ImageBrush 來繪製內含先前影像的矩形區域。它會將 RotateTransform 套用至 ImageBrush 物件的 RelativeTransform 屬性，並將它的 Stretch 屬性設定為 UniformToFill，而在將影像自動縮放為完全填滿矩形時，應該保留影像的外觀比例 (Aspect Ratio)。

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