ブラシの変換の概要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 に、CenterY を 75 にします。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. TileBrush の場合、ViewboxViewport にマップされます。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 に、CenterY を 0.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.

次の図は、RelativeTransform プロパティと Transform プロパティを使用して 45 度回転された複数のブラシの出力を示しています。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

ブラシの StretchUniformToFill に設定されているにもかかわらず、イメージがゆがんでいることに注意してください。Notice that the image is distorted, even though the brush's Stretch was set to UniformToFill. これは、ブラシの ViewboxViewport にマップされた後で、相対変換が適用されたためです。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. ブラシの Stretch の設定を使用して、ブラシの内容 (Viewbox) を基本タイル (Viewport) に投影します。Project the brush's contents (Viewbox) onto its base tile (Viewport) using the brush's Stretch setting.

    ビューポートに合わせて Viewbox を拡大Stretch the Viewbox to fit the Viewport

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

    ビューポートを変換四角形にマップ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

次の例では、ImageBrushRelativeTransform プロパティに RotateTransform を適用します。The following example applies a RotateTransform to the RelativeTransform property of an ImageBrush. RotateTransform オブジェクトの CenterX プロパティと CenterY プロパティは、どちらも、この内容の中心点の相対座標である 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 に適用していますが、RelativeTransform プロパティの代わりに Transform プロパティを使用しています。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