그라데이션 효과를 그려보자

.NET 에선 그래픽 작업도 아주 강력하고 사용하기 편하도록 만들어놓았습니다.

그 결과 Graphics 클래스를 이용하여 아주, 아주~ 다양한 작업을 할 수 있게 되었습니다.

선, 사각형, 원, 부채꼴 그리기 등 다양한 그리기 작업이 가능한데요~

.NET의 그래픽 클래스에서 그릴 때 사용되는 것은 Pen, Brush 이 두개만 잘 알고 넘어가시면 OK!

Pen 클래스의 경우 Draw~~~ 로 시작하는 메서드에 주로 사용됩니다.

단어 그대로 '펜을 긋는다' 라고 생각하시면 되겠네요~

Brush 클래스의 경우엔 Fill~~~ 로 시작하는 메서드에 주로 사용됩니다.

마찬가지로 채운다. 라고 생각하시면 되겠습니다.

이 게시글에서 다루는 것은 LinearGradientBrush 클래스입니다. (Brush 클래스를 구현하는 클래스)

클래스 이름만 봐도 아~ 이 클래스는 선형 그라데이션을 그릴 때 사용하는구나 라고 짐작가시는 분들이 계실거라 생각됩니다.

LinearGradientBrush 클래스는 System.Drawing.Drawing2D 네임스페이스에 포함되어 있습니다.

LinearGradientBrush 클래스 (MSDN)

생성자가 상당히 많은데, 4가지만 알고 계시면 됩니다.

LinearGradientBrush 생성자 (Rectangle, Color, Color, LinearGradientMode)

LinearGradientBrush 생성자 (Rectangle, Color, Color, Single)

LinearGradientBrush 생성자 (RectangleF, Color, Color, LinearGradientMode)

LinearGradientBrush 생성자 (RectangleF, Color, Color, Single)

Rectangle, RectangleF 매개변수의 경우 그라데이션으로 칠할 영역을 설정해주는 것입니다.

그리고자 하는 도형이나 개체의 크기만큼 지정해주시면 되구요~

Color 매개변수의 경우 아무 색으로 해도 상관 없습니다.

어차피 제가 다루는 주제에서는 사용되지 않기 때문에 Black, White 아무 색이나 넣어도 상관 없어요!

LinearGradientMode, Single 매개변수의 경우 어떻게 그라데이션을 칠할 것인지를 결정하는 것입니다.

꽤 중요하죠.

Single 형식 매개변수의 경우 그라데이션을 그릴 각도를 입력할 수 있으므로 굉장히 유용하게 사용될 수 있죠.

하지만! LinearGradientBrush 클래스만으로는 원하는 다채로운 색의 그라데이션 효과를 만들 수 없습니다.

그래서 존재하는게 바로 ColorBlend 클래스입니다! ColorBlend 클래스도 마찬가지로 System.Drawing.Drawing2D 네임스페이스에 포함되어 있습니다.

ColorBlend 클래스 (MSDN)

ColorBlend 클래스는 기본 생성자가 있기 때문에 매개변수를 전달해줄 필요가 없습니다.

가장 중요시 봐야할 속성은 바로 Colors 속성과 Positions 속성입니다.

Colors 속성의 경우 그라데이션에 사용할 색의 배열이고,

Positions 속성의 경우 그라데이션 색이 멈출 위치를 담고있는 배열입니다.

그리고 Position의 경우 0.0 ~ 1.0 사이의 값이 되어야 합니다. (0.0 = 시작, 1.0 = 끝)

검은색에서 흰색으로 그려지는 그라데이션의 경우 이렇게 표현될 수 있습니다.

ColorBlend cb = new ColorBlend();
cb.Colors = new Color[] {Color.Black, Color.White};
cb.Positions = new Single[] {0.0F, 1.0F};

ColorBlend 클래스는 LinearGradientBrush 클래스의 InterpolationColors 속성에 할당될 수 있고 전체 코드는 이렇게 표현됩니다.

LinearGradientBrush lgb = new LinearGradientBrush(new Rectangle(0, 0, 100, 100), Color.Black, Color.Black, LinearGradientMode.Vertical);
ColorBlend cb = new ColorBlend();
cb.Colors = new Color[] {Color.Black, Color.White};
cb.Positions = new Single[] {0.0F, 1.0F};
lgb.InterpolationColors = cb;

하지만, 이렇게 했다고 그라데이션이 그려지는 것은 아닙니다.

왜냐구요? 그리기 작업을 안했으니까요!

그럼~ 폼의 그래픽 개체를 만들고 그라데이션을 그려보죠.

폼의 그래픽 개체를 만들려면 CreateGraphics 메서드를 사용하시면 됩니다.

(여기서는 테스트를 위해서 CreateGraphics 메서드를 사용하였습니다. 보다 나은 성능을 위해서는 OnPaint 이벤트 부분의 Graphics 개체를 사용하는 것이 좋습니다)

Graphics g = CreateGraphics();
LinearGradientBrush lgb = new LinearGradientBrush(new Rectangle(0, 0, 100, 100), Color.Black, Color.Black, LinearGradientMode.Vertical);
ColorBlend cb = new ColorBlend();
cb.Colors = new Color[] {Color.Black, Color.White};
cb.Positions = new Single[] {0.0F, 1.0F};
lgb.InterpolationColors = cb;

g.FillRectangle(lgb, new Rectangle(0, 0, 100, 100));
lgb.Dispose();
g.Dispose();

자!! 그리기의 결과는?!?!?!

검은색에서 흰색으로 Vertical(수직) 방향으로 그라데이션이 그려졌네요~

그럼 Vertical(수직) 방향이 아닌 Horizontal(수평) 방향으로 그라데이션을 그려볼까요?

Graphics g = CreateGraphics();
LinearGradientBrush lgb = new LinearGradientBrush(new Rectangle(0, 0, 100, 100), Color.Black, Color.Black, LinearGradientMode.Horizontal);
ColorBlend cb = new ColorBlend();
cb.Colors = new Color[] {Color.Black, Color.White};
cb.Positions = new Single[] {0.0F, 1.0F};
lgb.InterpolationColors = cb;

g.FillRectangle(lgb, new Rectangle(0, 0, 100, 100));
lgb.Dispose();
g.Dispose();

WOW!!! 성공입니다.

ColorBlend 클래스의 큰 장점은 여러 가지 색을 넣을 수 있다는 것이죠.

그래서 이런식으로 조합을 하면.....

Graphics g = CreateGraphics();
LinearGradientBrush lgb = new LinearGradientBrush(new Rectangle(0, 0, 100, 100), Color.Black, Color.Black, LinearGradientMode.Vertical);
ColorBlend cb = new ColorBlend();
cb.Colors = new Color[] {Color.White, Color.LightGray, Color.DarkGray, Color.White};
cb.Positions = new Single[] {0.0F, 0.5F, 0.5F, 1.0F};
lgb.InterpolationColors = cb;

g.FillRectangle(lgb, new Rectangle(0, 0, 100, 100));
lgb.Dispose();
g.Dispose();

이런식의 효과도 낼 수 있게되죠!

전체화면을 그릴 경우엔 LinearGradientBrush 클래스의 생성자 부분에 영역을 그릴 크기만큼 잡아주면 됩니다.

그럼... 이만!

다음 게시글에선 엄~~~~~~~~~~~~~~~~~~청 큰 수를 다루는 방법에 대해서 설명해보도록 하겠습니다!