ブラシの変換の概要Brush Transformation Overview

Brush クラスには 2 つの変換プロパティ:TransformRelativeTransformします。The Brush class provides two transformation properties: Transform and RelativeTransform. これらのプロパティを使うと、ブラシの内容を回転、拡大縮小、傾斜、移動できます。The properties enable you to rotate, scale, skew, and translate a brush's contents. このトピックでは、これら 2 つのプロパティの違いについて説明し、それらの使用例を示します。This topic describes the differences between these two properties and provides examples of their usage.

必須コンポーネントPrerequisites

このトピックを理解するには、変換するブラシの機能を理解している必要があります。To understand this topic, you should understand the features of the brush that you are transforming. LinearGradientBrush および RadialGradientBrush については、「純色およびグラデーションによる塗りつぶしの概要」を参照してください。For LinearGradientBrush and RadialGradientBrush, see the Painting with Solid Colors and Gradients Overview. ImageBrushDrawingBrush、または VisualBrush については、「イメージ、描画、およびビジュアル」を参照してください。For ImageBrush, DrawingBrush, or VisualBrush, see Painting with Images, Drawings, and Visuals. また、「変換の概要」で説明されている 2D 変換についても理解しておく必要があります。You should also be familiar with the 2D transforms described in the Transforms Overview.

Transform プロパティと RelativeTransform プロパティの違いDifferences between the Transform and RelativeTransform Properties

ブラシの変換を適用するTransformプロパティ、その中心の周りのブラシの内容を変換する場合は、塗りつぶされる領域のサイズを把握する必要があります。When you apply a transform to a brush's Transform property, you need to know the size of the painted area if you want to transform the brush contents about its center. 描画領域の幅が 200 デバイス独立ピクセル、高さが 150 ピクセルであるものとします。Suppose the painted area is 200 device independent pixels wide and 150 tall. 使用した場合、RotateTransformブラシの回転の中心の周りに 45 度を出力、指定、 RotateTransformCenterX 100 とCenterY75 の。If you used a RotateTransform to rotate the brush's output 45 degrees about its center, you'd give the RotateTransform a CenterX of 100 and a CenterY of 75.

ブラシの変換を適用するRelativeTransformプロパティ、その出力が塗りつぶされる領域にマップされる前に、その変換がブラシに適用されます。When you apply a transform to a brush's RelativeTransform property, that transform is applied to the brush before its output is mapped to the painted area. 次の一覧では、ブラシの内容が処理および変換される順序を説明します。The following list describes the order in which a brush’s contents are processed and transformed.

  1. ブラシの内容を処理します。Process the brush’s contents. GradientBrush、これは、グラデーションの領域を決定することを意味します。For a GradientBrush, this means determining the gradient area. TileBrushViewboxにマップされて、Viewportします。For a TileBrush, the Viewbox is mapped to the Viewport. これがブラシの出力になります。This becomes the brush’s output.

  2. ブラシの出力を 1 x 1 の変換四角形に投影します。Project the brush’s output onto the 1 x 1 transformation rectangle.

  3. ブラシの適用RelativeTransformがあるいずれかの場合。Apply the brush’s RelativeTransform, if it has one.

  4. 変換された出力を描画領域に投影します。Project the transformed output onto the area to paint.

  5. ブラシの適用Transformがあるいずれかの場合。Apply the brush’s Transform, if it has one.

RelativeTransformブラシの出力は 1 x 1 サイズの四角形、変換の中心にマップされ、相対オフセット値が表示されるときに適用されます。Because the RelativeTransform is applied while the brush’s output is mapped to a 1 x 1 rectangle, transform center and offset values appear to be relative. 使用した場合など、RotateTransformブラシの回転の中心の周りに 45 度を出力、指定、 RotateTransformCenterX 0.5 とCenterY0.5 の。For example, if you used a RotateTransform to rotate the brush's output 45 degrees about its center, you'd give the RotateTransform a CenterX of 0.5 and a CenterY of 0.5.

次の図は、使って 45 度回転されたいくつかのブラシの出力、RelativeTransformTransformプロパティ。The following illustration shows the output of several brushes that have been rotated by 45 degrees using the RelativeTransform and Transform properties.

RelativeTransform プロパティと Transform プロパティRelativeTransform and Transform properties

TileBrush での RelativeTransform の使用Using RelativeTransform with a TileBrush

タイル ブラシは、その他のブラシより複雑であるために適用、RelativeTransformいずれかに予期しない結果が生じる可能性があります。Because tile brushes are more complex than other brushes, applying a RelativeTransform to one might produce unexpected results. たとえば、次のようなイメージについて考えます。For example, take the following image.

ソース イメージThe source image

次の例では、ImageBrush上の図で四角形の領域を描画します。The following example uses an ImageBrush to paint a rectangular area with the preceding image. 適用される、RotateTransformImageBrushオブジェクトのRelativeTransformプロパティ、およびセットのStretchプロパティをUniformToFill、四角形を完全にいっぱいに拡大、ときに、イメージの縦横比を保持する必要があります。It applies a RotateTransform to the ImageBrush object's RelativeTransform property, and sets its Stretch property to UniformToFill, which should preserve the image's aspect ratio when it is stretched to completely fill the rectangle.

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

この例を実行すると、次の出力が生成されます。This example produces the following output:

変換された出力The transformed output

イメージがゆがんで、たとえに注意してください、ブラシのStretchに設定されたUniformToFillします。Notice that the image is distorted, even though the brush's Stretch was set to UniformToFill. 相対変換がブラシの後に適用されるためですViewboxにマップされてそのViewportします。That's because the relative transform is applied after the brush's Viewbox is mapped to its Viewport. 次の一覧では、処理の各ステップについて説明します。The following list describes each step of the process:

  1. ブラシの内容をプロジェクト (Viewbox) 基本タイルに (Viewport) ブラシを使用してStretch設定します。Project the brush's contents (Viewbox) onto its base tile (Viewport) using the brush's Stretch setting.

    Viewport に合わせて Viewbox を拡大するStretch the Viewbox to fit the Viewport

  2. 基本タイルを 1 x 1 の変換四角形に投影します。Project the base tile onto the 1 x 1 transformation rectangle.

    Viewport を変換四角形にマップするMap the Viewport to the transformation rectangle

  3. 適用、RotateTransformします。Apply the RotateTransform.

    相対変換を適用するApply the relative transform

  4. 変換された基本タイルを描画領域に投影します。Project the transformed base tile onto the area to paint.

    変換されたブラシを出力領域に投影するProject the transformed brush onto the output area

例:ImageBrush の回転 45 度Example: Rotate an ImageBrush 45 Degrees

次の例では、適用、RotateTransformRelativeTransformのプロパティ、ImageBrushします。The following example applies a RotateTransform to the RelativeTransform property of an ImageBrush. RotateTransformオブジェクトのCenterXCenterYプロパティが両方とも設定である 0.5 に、コンテンツの中心の相対座標にポイントします。The RotateTransform object's CenterX and CenterY properties are both set to 0.5, the relative coordinates of the content's center point. その結果、ブラシの内容は中心の周りに回転されます。As a result, the brush's contents are rotated about its center.

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

次の例でも適用されます、RotateTransformImageBrushが使用して、Transformプロパティの代わりに、RelativeTransformプロパティ。The next example also applies a RotateTransform to an ImageBrush, but uses the Transform property instead of the RelativeTransform property. ブラシを中央の周りを回転させる、RotateTransformオブジェクトのCenterXCenterY絶対座標を設定する必要があります。To rotate the brush about its center, the RotateTransform object's CenterX and CenterY must be set to absolute coordinates. ブラシによって描画される四角形は 175 x 90 ピクセルなので、その中心点は (87.5, 45) です。Because the rectangle being painted by the brush is 175 by 90 pixels, its center point is (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プロパティ。The following illustration shows the brush without a transform, with the transform applied to the RelativeTransform property, and with the transform applied to the Transform property.

ブラシの RelativeTransform と Transform の設定Brush RelativeTransform and Transform settings

この例は、さらに大きなサンプルの一部です。This example is part of a larger sample. 完全なサンプルについては、「ブラシのサンプル」をご覧ください。For the complete sample, see the Brushes Sample. ブラシについて詳しくは、「WPF のブラシの概要」をご覧ください。For more information about brushes, see the WPF Brushes Overview.

関連項目See also