ブラシの変換の概要

[アーティクル]
08/09/2011

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.
            '
            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 に適用していますが、RelativeTransform プロパティの代わりに Transform プロパティを使用しています。ブラシをその中心を軸に回転するには、RotateTransform オブジェクトの CenterX および CenterY を絶対座標に設定する必要があります。ブラシで描画される四角形は 175 × 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 と変換の設定