브러시 변환 개요

브러시 클래스는 두 가지 변환 속성(Transform 및 RelativeTransform)을 제공합니다. 이러한 속성을 사용하여 브러시의 콘텐츠를 회전, 비율 크기 조정, 기울이기 및 변환할 수 있습니다. 이 항목에서는 이러한 두 속성 간의 차이점을 설명하고 사용 예제를 제공합니다.

사전 요구 사항

이 항목을 이해하려면 변환하는 브러시의 기능을 이해해야 합니다. 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. 브러시의 RelativeTransform을 적용합니다(있는 경우).

RelativeTransform은 브러시의 출력이 1 x 1 사각형에 매핑되는 동안 적용되므로 변형 중심 및 오프셋 값은 상대적인 것으로 나타납니다. 예를 들어 RotateTransform을 사용하여 브러시의 출력을 중심을 기준으로 45도 회전시켰다면 RotateTransform에 0.5의 CenterX와 0.5의 CenterY를 제공합니다.

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

RelativeTransform 및 Transform 속성graphicsmm_brushrelativetransform_transform_small

TileBrush에서 RelativeTransform 사용

타일 브러시는 다른 브러시보다 더 복잡하기 때문에 RelativeTransform을 적용하면 예기치 않은 결과가 발생할 수 있습니다. 예를 들어 다음 이미지를 살펴보세요.

소스 이미지graphicsmm_reltransform_1_original_image

다음 예제는 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>

이 예제는 다음과 같은 출력을 생성합니다.

변환된 출력graphicsmm_reltransform_6_output

브러시의 Stretch가 UniformToFill로 설정되었음에도 이미지가 왜곡되어 있습니다. 그 이유는 브러시의 Viewbox가 Viewport에 매핑된 후에 상대 변형이 적용되었기 때문입니다. 다음 목록에서는 프로세스의 각 단계를 설명합니다.

1. 브러시의 Stretch 설정을 사용하여 브러시의 콘텐츠(Viewbox)를 브러시의 기본 타일(Viewport)에 프로젝션합니다.

   Viewbox를 뷰포트에 맞게 늘이기graphicsmm_reltransform_2_viewbox_to_viewport

2. 기본 타일을 1 x 1 변환 사각형에 프로젝션합니다.

   뷰포트를 변환 사각형에 매핑graphicsmm_reltransform_3_output_to_transform

3. RotateTransform을 적용합니다.

   상대 변환 적용graphicsmm_reltransform_4_transform_rotate

4. 변환된 기본 타일을 그릴 영역에 프로젝션합니다.

   변환된 브러시를 출력 영역으로 프로젝션graphicsmm_reltransform_5_transform_to_output

예제: 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;

'
' 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에 적용하지만 RelativeTransform 속성 대신 Transform 속성을 사용합니다. 중심을 기준으로 브러시를 회전시키려면 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 속성에 변형이 적용된 브러시를 보여 줍니다.

Brush RelativeTransform 및 Transform 설정wcpsdk_graphicsmm_transformandrelativetransform

이 예제는 더 큰 샘플의 일부입니다. 전체 샘플을 보려면 브러시 샘플을 참조하세요. 브러시에 대한 자세한 내용은 WPF 브러시 개요를 참조하세요.

참고 항목

• Transform
• RelativeTransform
• Transform
• Brush
• 단색 및 그라데이션을 사용한 그리기 개요
• 이미지, 그림 및 시각적 표시로 그리기
• Transform 개요