브러시 변환 개요

아티클
08/10/2011

브러시 클래스에서는 두 개의 변환 속성인 Transform 및 RelativeTransform을 제공합니다. 이 속성을 사용하여 브러시 내용에 대해 회전, 배율 조정, 기울이기 및 변환을 수행할 수 있습니다. 이 항목에서는 이러한 두 속성 간의 차이점에 대해 설명하고 사용 예를 제공합니다.

사전 요구 사항

이 항목을 이해하려면 변환하는 브러시의 기능을 잘 알고 있어야 합니다. LinearGradientBrush 및 RadialGradientBrush에 대해서는 단색 및 그라데이션을 사용한 그리기 개요를 참조하십시오. ImageBrush, DrawingBrush 또는 VisualBrush에 대해서는 이미지, 그림 및 시각적 표시로 그리기를 참조하십시오. Transform 개요에 설명되어 있는 2D 변환에 대해서도 잘 알고 있어야 합니다.

Transform 속성과 RelativeTransform 속성의 차이점

브러시의 Transform 속성에 변환을 적용할 때 중심 점을 기준으로 브러시 내용을 변환하려면 그려지는 영역의 크기를 알고 있어야 합니다. 그려지는 영역이 장치 독립적 픽셀 단위로 너비 200, 높이 150이라고 가정하십시오. RotateTransform을 사용하여 중심 점을 기준으로 브러시의 출력을 45도 회전한 경우에는 RotateTransform의 CenterX 값을 100으로, CenterY 값을 75로 지정한 것입니다.

브러시의 RelativeTransform 속성에 변환을 적용할 때 해당 변환은 그려지는 영역에 출력이 매핑되기 전에 브러시에 적용됩니다. 다음 목록에서는 브러시의 내용을 처리하고 변환하는 순서를 설명합니다.

브러시의 내용을 처리합니다. GradientBrush의 경우 그라데이션 영역을 결정하는 것을 의미합니다. TileBrush의 경우 Viewbox가 Viewport에 매핑됩니다. 이것이 브러시의 출력이 됩니다.
브러시의 출력을 1 x 1 변환 직사각형에 반영합니다.
브러시에 RelativeTransform이 있으면 이를 적용합니다.
변환된 출력을 그릴 영역에 반영합니다.
브러시에 Transform이 있으면 이를 적용합니다.

RelativeTransform은 브러시의 출력이 1 x 1 직사각형에 매핑되어 있는 동안 적용되기 때문에 변환 중앙 및 오프셋 값은 상대적인 것으로 나타납니다. 예를 들어 RotateTransform을 사용하여 중심 점을 기준으로 브러시의 출력을 45도 회전한 경우에는 RotateTransform의 CenterX 값을 0.5로, CenterY 값을 0.5로 지정한 것입니다.

다음 그림은 RelativeTransform 및 Transform 속성을 사용하여 45도 회전한 여러 브러시의 출력을 보여 줍니다.

RelativeTransform 및 Transform 속성

RelativeTransform과 TileBrush 함께 사용

바둑판식 배열 브러시는 다른 브러시보다 더 복잡하기 때문에 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 x 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 x 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 속성에 적용된 변환과 함께 보여 줍니다.

Brush RelativeTransform 및 Transform 설정