ブラシ設定変更の概要

Brush クラスには、 Transform と RelativeTransformの 2 つの変換プロパティがあります。 このプロパティを使用すると、ブラシの内容を回転、拡大縮小、傾斜、および平行移動できます。 このトピックでは、これら 2 つのプロパティの違いについて説明し、その使用例を示します。

[前提条件]

このトピックを理解するには、変換するブラシの機能を理解する必要があります。 LinearGradientBrushとRadialGradientBrushについては、「純色とグラデーションによる塗りつぶしの概要」を参照してください。 ImageBrush、DrawingBrush、またはVisualBrushについては、「イメージ、描画、ビジュアルを使用した描画」を参照してください。 また、「変換の概要」で説明されている 2D 変換についても理解 している必要があります。

Transform プロパティと RelativeTransform プロパティの違い

ブラシの Transform プロパティに変換を適用する場合、ブラシの内容を中心に変換する場合は、塗りつぶされた領域のサイズを把握する必要があります。 塗りつぶされた領域が幅200ピクセル、高さ150ピクセルであると仮定します。このピクセルはデバイスに依存しないものです。 RotateTransformを使用してブラシの出力を中心に 45 度回転した場合は、RotateTransformに 100 のCenterXと 75 のCenterYを与えます。

ブラシの RelativeTransform プロパティに変換を適用すると、その変換がブラシに適用されてから、その出力がペイント領域にマップされます。 次の一覧では、ブラシの内容の処理と変換の順序について説明します。

1. ブラシの内容を処理します。 GradientBrushの場合、これはグラデーション領域を決定することを意味します。 TileBrushの場合、ViewboxはViewportにマップされます。 これがブラシの出力になります。

2. ブラシの出力を 1 x 1 変換四角形に投影します。

3. ブラシが RelativeTransformを持っている場合は、適用してください。

4. 変換された出力を塗装する領域に投影します。

5. ブラシが 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. ブラシのViewbox設定を使用して、ブラシの内容 (Viewport) を基本タイル (Stretch) に投影します。

   する

2. 基本タイルを 1 x 1 変換四角形に投影します。

   

3. RotateTransformを適用します。

   

4. 変換された基本タイルを領域に投影して塗装します。

   

例: ImageBrush を 45 度回転する

次の例では、RotateTransformの RelativeTransform プロパティにImageBrushを適用します。 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;

'
' 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 プロパティを使用します。 ブラシを中心に回転させるには、 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;

'
' 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 プロパティに変換が適用されたブラシを示しています。

この例は、より大きなサンプルの一部です。 完全なサンプルについては、ブラシのサンプルを参照してください。 ブラシの詳細については、「 WPF ブラシの概要」を参照してください。

こちらも参照ください

• Transform
• RelativeTransform
• Transform
• Brush
• 単色とグラデーションを用いた描画の概要
• 画像、イラスト、視覚要素を用いた描画
• 変換の概要