ブラシの変換の概要

[アーティクル]
09/17/2008

更新 : 2007 年 11 月

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

必要条件

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

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

ブラシの Transform プロパティに変換を適用する場合、ブラシのコンテンツをその中心を軸に変換するときは、塗りつぶされる領域のサイズを認識しておく必要があります。塗りつぶされる領域は、幅が 200 デバイス非依存ピクセルで、高さが 150 であると仮定します。RotateTransform を使用して、ブラシの中心を軸に出力を 45 度回転した場合は、RotateTransform で CenterX に 100、CenterY に 75 を指定したことになります。

ブラシの RelativeTransform プロパティに変換を適用する場合は、この変換がブラシに適用されてから、塗りつぶされる領域に出力がマップされます。ブラシのコンテンツが処理および変換される順序を次に示します。

ブラシのコンテンツを処理します。これは、GradientBrush では、グラデーション領域を決定することを意味します。TileBrush では、Viewbox が Viewport にマップされます。これがブラシの出力になります。
ブラシの出力を 1 × 1 の変換四角形に投影します。
ブラシの RelativeTransform がある場合は、それを適用します。
塗りつぶす領域に、変換された出力を投影します。
ブラシの Transform がある場合は、それを適用します。

ブラシの出力が 1 × 1 の四角形にマップされている間に RelativeTransform が適用されるため、変換の中心とオフセット値は相対的に表されます。たとえば、RotateTransform を使用して、ブラシの中心を軸に出力を 45 度回転した場合は、RotateTransform で CenterX に 0.5、CenterY に 0.5 を指定したことになります。

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

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

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 にマップされた後に相対変換が適用されるためです。プロセスの手順を次に示します。

ブラシの Stretch を設定して、ブラシのコンテンツ (Viewbox) を基本タイル (Viewport) に投影します。
基本タイルを 1 × 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.
//
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 に適用していますが、RelativeTransform プロパティの代わりに Transform プロパティを使用しています。ブラシをその中心を軸に回転するには、RotateTransform オブジェクトの CenterX および CenterY を絶対座標に設定する必要があります。ブラシで描画される四角形は 175 × 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;

<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 と変換の設定