3.그리기 함수
가.색상
그리기 함수를 공부하기 전에 출력 도구의 일종인 색상과 펜, 브러시를 만드는 기본적인 방법부터 알아 보자. 화면에 뭐라도 나와야 그리기 함수의 동작을 확인할 수 있으며 아무리 간단한 함수도 호출해서 결과를 확인해 봐야 실습의 재미가 있는 법이다. 그래서 핵심적인 구조나 고급 기법에 앞서 기본적인 출력 방법부터 익힐 필요가 있다.
GDI+는 색상을 Color 클래스로 표현한다. Color 클래스는 32비트의 정수로 색상을 관리하는데 8비트씩 잘라 A,R,G,B 요소를 표현한다. R,G,B는 각각 빨간색, 초록색, 파란색의 강도를 지정하며 A는 불투명도인 알파를 지정한다. 알파가 0이면 완전히 투명해서 보이지 않는 상태이며 255이면 불투명한 상태이다.
GDI의 색상 모델은 RGB인데 비해 GDI+의 색상 모델은 알파가 추가된 ARGB라고 부른다. 색상에 투명도에 대한 정보가 들어가 있으므로 GDI+는 반투명한 출력을 할 수 있는 것이다. Color 클래스의 생성자는 다음 4가지가 있다.
Color(VOID);
Color(BYTE a, BYTE r, BYTE g, BYTE b);
Color(BYTE r, BYTE g, BYTE b);
Color(ARGB argb);
디폴트 생성자는 불투명한 검정색을 생성하며 RGB만 주거나 아니면 ARGB를 각각 생성자로 전달할 수도 있다. 마지막 생성자는 DWORD로 정의된 ARGB 타입의 16진값으로 색상을 간단하게 지정한다. 예를 들어 0xff00ff00은 불투명한 초록색이며 0xff0000ff는 파란색이다. 16진수에 익숙하다면 솔직히 제일 편리한 생성자라고 할 수 있다.
Color의 멤버 함수로는 각 색상 요소를 추출하는 GetA, GetR, GetG, GetB 등이 있고 ARGB형태로 값을 읽거나 쓰는 GetValue, SetValue와 GDI의 COLORREF형으로 상호 변환하는 SetFromCOLORREF, ToCOLORREF 등이 있다. 가장 기본적인 그리기 오브젝트인 펜과 브러시를 만들려면 일단 색상을 표현하기 위한 Color 객체를 생성해야 한다. 그리고 Pen과 SolidBrush의 생성자로 Color 객체의 레퍼런스를 전달하여 만들고 싶은 오브젝트의 색상을 지정한다.
다양한 모양의 펜, 브러시를 만드는 방법은 다음절부터 상세하게 배워 보기로 하고 일단은 색상이 화면에 잘 표현되는지 예제를 만들어 봐야 하므로 기본적인 객체 생성문부터 알아보자. 다음 코드는 빨간색을 C 객체로 정의하고 굵기 3의 빨간색 펜 P와 빨간색 단색 브러시 S를 생성한다. 색상 객체를 펜과 브러시의 생성자 인수로 전달하기만 하면 된다.
Color C(255,0,0);
Pen P(C,3);
SolidBrush S(C);
GDI+가 GDI에 비해 기능적으로 우월한 점은 반투명한 출력이 가능하다는 점인데 이는 Color 객체가 투명도를 지정할 수 있기 때문이다. 다음 예제는 파란색 사각형 위에 빨간색 타원을 겹쳐 그리되 투명도를 바꿔 가며 그린다. 이 예제를 통해 반투명한 출력의 예를 보도록 하자.
|
예 제 : TransTest |
BYTE Opa=128;
void OnPaint(HDC hdc)
{
Graphics G(hdc);
Color C1(0,0,255);
Color C2(Opa,255,0,0);
SolidBrush B1(C1);
SolidBrush B2(C2);
G.FillRectangle(&B1,10,10,300,200);
G.FillEllipse(&B2,50,50,400,200);
}
LRESULT CALLBACK WndProc(HWND hWnd,UINT iMessage,WPARAM wParam,LPARAM lParam)
{
HDC hdc;
PAINTSTRUCT ps;
TCHAR str[128];
switch(iMessage) {
case WM_KEYDOWN:
switch (wParam) {
case VK_UP:
Opa=min(255,Opa+32);
InvalidateRect(hWnd,NULL,TRUE);
break;
case VK_DOWN:
Opa=max(0,Opa-32);
InvalidateRect(hWnd,NULL,TRUE);
break;
}
return 0;
case WM_CREATE:
hWndMain=hWnd;
return 0;
case WM_PAINT:
hdc=BeginPaint(hWnd, &ps);
OnPaint(hdc);
wsprintf(str,TEXT("불투명도 : %d"),Opa);
TextOut(hdc,10,300,str,lstrlen(str));
EndPaint(hWnd, &ps);
return 0;
case WM_DESTROY:
PostQuitMessage(0);
return 0;
}
return(DefWindowProc(hWnd,iMessage,wParam,lParam));
}
투명도를 나타내는 Opa 변수는 최초 128로 초기화되어 있으므로 C2 색상은 반쯤 투명한 빨간색이 된다. 이 색상으로 브러시를 만들어 타원을 그렸으므로 아래쪽의 사각형이 타원 뒤쪽으로 보이게 된다. 상하 커서 이동키로 Opa값을 조절할 수 있으므로 투명도를 조정해 보면서 출력 결과를 비교해 보자.
직접 실험해 보면 알겠지만 반투명 출력의 속도는 그다지 만족스럽지 못하다. 불투명하게 출력하려면 배경의 비트맵을 읽은 후 그려질 도형과 비트 조합해서 다시 기록해야 하므로 느릴 수밖에 없다. 또한 이런 연산을 거치게 되면 하드웨어 그래픽 가속 기능의 지원을 받을 수 없으며 순수한 소프트웨어 코드만으로 출력해야 하므로 더욱 느려진다.
나.표준 색상
색상을 정의하고 펜과 브러시를 만들어 사용하는 절차는 지극히 상식적이다. 그러나 여러 단계를 거쳐야 하므로 조금 번거로운 면이 있다. 조금 더 편리하고 간단한 방법은 없는지 연구해 보자.
|
예 제 : Colors |
다음 코드는 파란색으로 원을 그리는 가장 정석적인 방법이다.
Color Blue(0,0,255);
Pen P(Blue);
G.DrawEllipse(&P,10,10,100,100);
파란색 객체 정의하고 이 색으로 펜 만들고, 펜을 사용하여 원을 그렸다. 원을 그리려면 펜이 필요하고 펜을 만들려면 색상을 먼저 정의해야 하므로 순서대로 객체를 생성하는 수밖에 없다. 원 하나 그리는데 세 줄이나 필요하다는 게 마음에 안드는데 좀 더 간단하게 줄일 수 있다.
Pen 클래스의 생성자에서 Color 클래스의 생성자를 명시적으로 호출하여 이름이 없는 임시 객체를 만들었다. 이름이 없는 임시 객체는 펜을 만드는 동안에만 잠시 사용되며 함수를 빠져 나갈 때 자동으로 제거된다. 코드는 두 줄로 줄어 든다.
Pen P(Color(0,0,255));
G.DrawEllipse(&P,10,10,100,100);
"파란색 만들어, 그 색으로 펜 만들어" 라는 명령이 "파란색 펜 만들어" 하나로 줄어든 것이다. 일단 코드 길이가 짧아졌고 객체의 이름을 지정할 필요가 없으므로 훨씬 더 편리하다. 그렇다면 Color 임시 객체를 사용했듯이 펜도 임시 객체로 선언해서 사용하면 되지 않을까? 어차피 펜도 원을 그리는 동안에만 잠시 사용되므로 굳이 이름을 주고 선언할 필요가 없다. 더 짧게 줄이면 한줄로 압축된다.
G.DrawEllipse(&Pen(Color(0,0,255)),10,10,100,100);
코드는 짧아졌지만 압축을 하다 보니 조금 복잡해 보이며 가독성이 떨어진다. 또 색상 요소를 일일이 조합하는 방법은 쉽기는 하지만 직관적이지 못하다. 빨간색이나 파란색은 쉽게 정의되지만 노란색이나 마젠타 색상은 항상 헷갈리며 갈색이나 아이보리색 등은 색상표를 찾아 봐야 RGB값을 알 수 있다. 자주 쓰는 색상은 좀 더 직관적인 방법으로 사용할 수 있었으면 하는 아쉬움이 있다.
GDI+는 C++로 작성되었지만 다른 언어에서도 사용할 수 있는 범용 라이브러리이다. 닷넷의 기본 언어인 C#에서도 GDI+를 사용할 수 있는데 기반 라이브러리가 같아도 인터페이스는 조금 다르다. C#에서는 자주 쓰는 색상들을 Color라는 클래스의 프로퍼티로 제공하며 표준 140개의 색상에 대한 이름이 정의되어 있다. 원색 계열은 물론이고 일상적으로 사용되는 웬만한 색상은 다 제공되는 셈이다.
Color.Blue, Color.Yellow 같이 색상 이름을 프로퍼티로 지정하면 된다. 노란색의 RGB값을 외우는 사람은 드물지만 Yellow가 노란색이라는 것은 누구나 알고 있으므로 기억이 훨씬 용이하고 코드를 읽기도 쉽다. 또 표준 색상으로 펜을 바로 생성할 수 있는 Pens라는 클래스도 제공된다. Pens.Blue 표현식으로 파란색 펜을 쉽게 만들 수 있다. 위의 C++ 코드를 C# 형식으로 바꾸면 다음과 같다.
G.DrawEllipse(Pens.Blue,10,10,100,100);
파란색 펜이라는 것을 직관적으로 알 수 있어 C++ 코드보다 길이도 짧고 가독성도 훨씬 더 높다. 별 차이 아닌 것 같지만 펜이나 브러시는 사용 빈도가 높기 때문에 이 작은 차이에 의해 생산성에는 상당한 격차가 발생한다.
다음은 시스템 색상을 사용해 보자. GDI+ 자체에는 시스템 색상을 조사하는 함수가 없으므로 운영체제의 표준 함수로 색상을 조사해야 한다. GetSysColor 함수는 COLORREF 타입으로 색상을 리턴하므로 Color 객체를 선언한 후 SetFromCOLORREF 함수를 호출하여 GDI+의 색상 타입으로 바꿔야 한다.
Color High;
High.SetFromCOLORREF(GetSysColor(COLOR_HIGHLIGHT));
G.FillEllipse(&SolidBrush(High),10,10,100,100);
가급적 짧게 줄여 보았는데 그래도 꽤 복잡해 보인다. C#의 경우는 시스템 색상을 조사하는 SystemColors 클래스와 시스템 색상으로 펜과 브러시를 만들 수 있는 SystemPens, SystemBrushes라는 클래스가 있어 이름으로부터 색상, 펜, 브러시를 쉽게 만들 수 있다. C# 코드로는 단 한 줄이면 되며 읽기도 훨씬 더 쉽다.
G.FillEllipse(SystemBrushes.HighLight,10,10,100,100);
C#이 살짝 부러워지는 순간인데 그렇다면 없다고 못 쓸소냐! C++에서도 직접 만들어 쓰면 될 것 아닌가? 클래스로 한번만 만들어 두면 두고 두고 재사용 가능하므로 C# 분위기를 낼 수 있을 것이다. 먼저 표준 색상을 정의하는 Colors 클래스를 만들어 보자. 닷넷에는 Color 클래스에 정적 프로퍼티가 포함된 형태이지만 C++에서는 이미 정의된 클래스를 같은 이름으로 확장할 수 없으므로 부득이하게 이름을 Colors로 정했다. 무수히 많은 색상을 정의할 수 있겠지만 일단은 파란색을 정의하는 Blue라는 함수만 정의해 보았다.
class Colors
{
public:
static Color Blue() { return Color(0,0,255); }
};
객체 없이 색상을 만들어 내야 하므로 static 함수로 선언했으며 파란색의 Color 객체 하나를 만들어서 리턴한다. 여기까지는 멋지다. 그러나 이 함수를 호출하는 구문을 작성해 보면 별로 멋지지 않다.
Pen P(Colors::Blue());
잘 동작하기는 하지만 Color.Blue와는 형태가 많이 다르다. 우선 클래스와 정적 멤버 함수 사이의 구분자가 . 이 아니라 :: 이라는 문법적 차이점이 있고 Blue가 함수이다 보니 뒤에 괄호를 붙여야 하는 번거로움도 있다. 색상 객체를 만드는 동작을 하므로 변수로는 안되고 함수여야 하는데 그러다 보니 괄호가 꼭 필요한 것이다. C#의 Blue는 프로퍼티여서 괄호를 붙이지 않고도 쓸 수 있지만 C++에는 프로퍼티에 해당하는 장치가 없어 어쩔 도리가 없다.
C#의 프로퍼티라는 문법은 C++ 프로그래머 입장에서 정말 탐나는 물건인데 이 대목에서는 무척 아쉽다. 그래도 어쨌든 원하는대로 동작하기는 한다. 다음은 표준 색상으로 펜을 생성하는 Pens 클래스를 만들어 보자. 역시 파란색 펜을 생성하는 정적 함수만 정의해 보았다. 파란색을 리턴하는 Colors 클래스를 만들어 두었으니 활용해 보자. 아마 다음과 같은 모양이 나올 것이다.
class Pens
{
public:
static Pen Blue() { return Pen(Colors::Blue()); }
};
파란색의 임시 펜 객체를 만들어서 리턴한다. 그러나 이 코드는 컴파일되지 않는다. 왜냐 하면 C++에서 객체를 리턴할 때 복사 생성자가 호출되는데 Pen 클래스의 복사 생성자가 private로 선언되어 있기 때문이다. 그래서 객체 자체를 리턴할 수는 없고 포인터를 리턴해야 한다. 다음과 같이 수정하면 제대로 컴파일된다.
class Pens
{
public:
static Pen* Blue() { return new Pen(Colors::Blue()); }
};
이 코드도 동작은 하지만 문제가 있는데 new로 동적 할당했으므로 쓰는 쪽에서 언젠가는 delete를 해야 한다는 점이다. 따라서 함수의 인수 자리에서 Pens::Blue() 따위로 호출할 수는 없으며 반드시 이름을 주고 대입받아야 하고 해제도 신경써야 한다. 이럴 바에야 차라리 임시 객체를 쓰는 편이 훨씬 더 편리하다. 그렇다면 C#의 경우는 어떨까? 객체를 동적으로 생성해서 리턴한다는 점은 똑같지만 C#은 가비지 컬렉터라는 강력한 장치가 있어서 delete를 할 필요가 없다. 그래서 할당만 하고 해제는 하지 않아도 된다.
결국 C++로 C# 흉내내기는 보기 좋게 실패했다. 어떻게 하든 좀 더 편한 방법을 찾을 수 있겠지만 문법적인 한계로 인해 C#만큼 간결한 코드가 나오기는 어렵다. 주요 원인은 프로퍼티와 가비지 컬렉터인데 역시 최신 언어와 스팩상으로는 경쟁이 되지 않는다. 하긴 애초에 C++로 가능한 기능이라면 마이크로소프트가 이 클래스들을 제공하지 않을 이유가 없을 것이다. 조금 불편하기는 하지만 C++은 속도가 2배 이상 빠르다는 것을 위안으로 삼도록 하자.
여기서 굳이 C# 언어와의 차이점을 보여 주는 이유는 C#을 먼저 공부한 사람들이 Color.Blue나 Pens.Red를 찾는 경우가 종종 있기 때문이다. 이 클래스들은 애초에 GDI+의 일부가 아니라는 점을 분명히 할 필요가 있다. C#은 C++로 작성된 GDI+를 사용하지만 단순히 사용만 하는 것이 아니라 래핑을 하기 때문에 좀 더 편리한 고수준의 클래스가 추가로 제공되는 것이다.
다.직선
GDI의 Rectangle, Ellipse 함수는 항상 현재 DC에 선택된 펜으로 외곽선을 그리고 그 내부는 DC에 선택된 브러시로 채운다. 한꺼번에 그리기와 채우기를 할 수 있는 편리함이 있기는 하지만 외곽선이 필요없을 때는 NULL_PEN을, 면을 채우지 않을 때는 NULL_BRUSH를 선택한 후 그려야 한다는 면에서는 불편하다.
이에 비해 GDI+는 외곽선을 그리는 함수와 내부를 채우는 함수가 완전히 분리되어 있어 별도의 조치가 없어도 외곽선만 따로 그리거나 외곽선없이 내부만 채울 수 있다. 만약 외곽선도 그리고 채우기도 해야 한다면 같은 인수로 두 함수를 연속적으로 호출해야 한다. 모든 그리기 함수는 Graphics의 멤버 함수로 포함되어 있으며 외곽선을 그리는 함수는 Draw로 시작하고 면을 채우는 함수는 Fill로 시작한다. 그리기 함수의 전체 목록은 다음과 같다.
|
|
외곽선 그리기 |
채우기 |
|
선 |
DrawLine(s) |
없음 |
|
사각형 |
DrawRectangle(s) |
FillRectangle(s) |
|
다각형 |
DrawPolygon |
FillPolygon |
|
타원 |
DrawEllipse |
FillEllipse |
|
원호 |
DrawArc |
없음 |
|
부채꼴 |
DrawPie |
FillPie |
|
카디널 곡선 |
DrawCurve |
없음 |
|
베지어 곡선 |
DrawBezier(s) |
없음 |
|
폐곡선 |
DrawClosedCurve |
FillClosedCurve |
|
문자열 |
DrawString |
없음 |
|
비트맵 |
DrawImage |
없음 |
|
패스 |
DrawPath |
FillPath |
|
리전 |
없음 |
FillRegion |
모든 함수가 다 정의되어 있지는 않으며 일부 없는 함수들도 있는데 왜 없는지는 상식적인 수준에서 이해할 수 있다. 직선이나 원호처럼 채울 면적이 없는 도형은 Fill 함수가 없으며 비트맵도 원래부터 채워진 모양이므로 채울 대상이 없다. 리전은 2차원의 영역이므로 채울수만 있을 뿐 외곽선을 그릴 수는 없다. 그리기 함수들을 테스트해 보기 위해 GdiPlusDraw 예제를 만들어 보자.
|
예 제 : GdiPlusDraw |
TCHAR Mode=TEXT('1');
void OnPaint(HDC hdc)
{
Graphics G(hdc);
if (Mode == TEXT('1')) {
// 직선 그리기
Pen P(Color(0,0,0));
G.DrawLine(&P,10,10,300,100);
//G.DrawLine(&P,Point(10,10),Point(300,100));
if (Mode == TEXT('2')) {
....
if (Mode == TEXT('3')) {
....
LRESULT CALLBACK WndProc(HWND hWnd,UINT iMessage,WPARAM wParam,LPARAM lParam)
{
HDC hdc;
PAINTSTRUCT ps;
switch(iMessage) {
case WM_KEYDOWN:
Mode=(TCHAR)wParam;
InvalidateRect(hWnd,NULL,TRUE);
return 0;
case WM_CREATE:
hWndMain=hWnd;
return 0;
case WM_PAINT:
hdc=BeginPaint(hWnd, &ps);
OnPaint(hdc);
EndPaint(hWnd, &ps);
return 0;
....
주로 출력 코드만을 작성하므로 테스트 코드들은 OnPaint에만 집중적으로 작성되어 있다. 이 예제의 형식이 다소 생소해 보이는데 Mode라는 전역 변수를 선언하고 OnPaint에서는 Mode에 따라 각각 다른 테스트 코드를 실행하도록 되어 있다. 그래서 OnPaint문은 전체적으로 if else if else if 구조를 띄는데 각 if 블록마다 테스트 코드가 하나씩 들어 있으며 본문에서는 이 블록의 코드만 보이기로 한다. switch case를 쓰지 않고 if else if를 쓰는 이유는 case문 내부에서는 고유한 지역 변수를 선언하는데 제약이 있기 때문이다.
Mode값은 키보드의 1, 2, 3, 4 숫자를 눌러 선택하도록 했으며 실행중에 언제라도 키보드의 숫자를 눌러 원하는 테스트 코드를 실행해 볼 수 있다. 숫자키를 누를 때마다 실행되는 출력 코드가 달라진다. 테스트 코드가 9개를 넘으면 알파벳 A, B, C를 누르면 된다. 이런 방식으로 예제를 작성하는 이유는 매 함수마다 예제 하나씩 만들기는 너무 번거롭기 때문이다. 몇 줄 되지도 않는 코드 때문에 프로젝트를 새로 만드는 것은 분명히 낭비이며 학습하기에도 좋지 않다. 이전에는 주석으로 각 코드를 묶어 놓고 주석을 풀어가며 테스트하는 방식을 썼는데 이 또한 매번 컴파일을 해야 하므로 불편하다.
그래서 부득이하게 키보드의 숫자키로 테스트 코드를 선택하는 방식을 선택했는데 처음 보기에는 어색해 보여도 구조를 파악하면 실습하는데는 대단히 편리하다. 이후에도 여러 벌의 테스트 코드를 한 예제에 작성할 때는 이와 비슷한 방식을 계속 사용할 것이므로 여기서 예제의 구조를 확실히 익혀 두기 바란다. 먼저 가장 간단한 도형인 선 그리기부터 해 보자. 선을 그리는 함수는 DrawLine이되 4개의 함수가 오버로딩되어 있다.
Status DrawLine(const Pen *pen, const Point &pt1, const Point &pt2);
Status DrawLine(const Pen *pen, INT x1, INT y1, INT x2, INT y2);
Status DrawLine(const Pen *pen, const PointF &pt1, const Point &pt2);
Status DrawLine(const Pen *pen, REAL x1, REAL y1, REAL x2, REAL y2);
첫 번째 인수는 항상 선을 그릴 때 사용할 펜 객체이며 나머지는 선의 시작점과 끝점을 지정하는 인수들이다. 두 개의 Point를 줄 수도 있고 각 점을 구성하는 x, y를 개별적으로 전달할 수도 있다. 나머지 두 함수는 실수를 인수로 취하는 함수들이다. 소수점 이하의 정밀한 좌표를 지정할 수 있다는 것 외에는 전혀 차이가 없으므로 이후부터 실수를 인수로 취하는 함수는 따로 언급하지 않기로 한다.
DrawLine 함수는 GDI의 MoveToEx, LineTo 호출과 기능상 동일하되 한 함수로 시작점과 끝점을 모두 지정하여 완전한 선을 그을 수 있다. GDI+에는 현재 위치에 해당하는 CP의 개념이 없으므로 항상 선의 시작점과 끝점을 모두 인수로 지정해야 한다. 다음 코드는 (10,10)을 시작점으로 하고 (300,100)까지 걸치는 직선을 검정색 펜으로 그린다.
Pen P(Color(0,0,0));
G.DrawLine(&P,10,10,300,100);
//G.DrawLine(&P,Point(10,10),Point(300,100));
좌표를 구성하는 x, y값을 따로 전달하든지 아니면 임시 Point 객체 두 개를 전달하든지 결과는 같다. 상황에 따라 호출하기 편리한 함수를 사용하면 된다. 복수 개의 선을 한꺼번에 그리고자 할 때는 다음 함수를 사용한다.
Status DrawLines(const Pen *pen, const Point *points, INT count);
직선들이 통과할 점의 배열을 두 번째 인수로 전달하고 이 점의 개수를 count로 전달하면 배열상의 모든 점을 직선으로 연결한다. 다각선을 그리는 함수라고 할 수 있으며 GDI의 PolyLine함수와 기능상 동일하다. 다음 코드는 삼각형을 그린다.
Pen P(Color(0,0,0));
Point pts[]={Point(100,10),Point(10,150),Point(190,150),Point(100,10)};
G.DrawLines(&P,pts,sizeof(pts)/sizeof(pts[0]));
닫힌 삼각형을 그리려면 시작점과 끝점을 연결해야 하므로 필요한 점의 개수는 4개이다. 점의 배열만 잘 작성하면 얼마든지 복잡한 모양을 그릴 수 있다.
라.면
다음 함수는 사각형을 그리는데 Rect 객체를 전달하거나 아니면 좌상단 좌표와 폭, 높이를 각각 전달한다.
Status DrawRectangle(const Pen *pen, const Rect &rect);
Status DrawRectangle(const Pen *pen, INT x, INT y, INT width, INT height);
타원을 그리는 함수 DrawEllipse도 이름만 다르고 원형은 동일하며 주어진 사각형에 내접하는 타원을 그린다.
Status DrawEllipse(const Pen *pen, const Rect &rect);
Status DrawEllipse(const Pen *pen, INT x, INT y, INT width, INT height);
사각형과 타원의 내부를 채우는 함수는 FillRectangle, FillEllipse인데 첫 번째 인수로 펜 대신 내부 채색에 사용할 브러시를 지정한다는 점이 다르다. 외곽선을 그리는 Draw 함수는 펜을 요구하며 면적을 채우는 Fill 함수는 브러시를 요구한다. 다음 코드는 사각형과 타원 그리기/채우기 함수를 테스트한다.
Pen P(Color(255,0,0),5);
SolidBrush S(Color(0,255,0));
G.DrawEllipse(&P,10,10,90,90);
G.DrawRectangle(&P,110,10,90,90);
G.FillEllipse(&S,10,110,90,90);
G.FillRectangle(&S,110,110,90,90);
굵기 5의 빨간색 펜으로 사각형과 타원을 그리고 초록색 브러시로 면을 채워 보았다. 이 외에 별로 실용성은 없지만 주어진 Rect 객체의 배열로부터 복수 개의 사각형을 한꺼번에 그리거나 채우는 Draw(Fill)Rectangles 함수도 있다. 함수명 끝에 복수를 지정하는 s가 있음을 주의하자. Rect의 배열과 개수를 전달하면 배열내의 모든 사각형을 그리거나 채운다.
Status DrawRectangles(const Pen *pen, const Rect *rects, INT count);
Status FillRectangles(const Brush *brush, const Rect *rects, INT count);
GDI의 Rectangle 함수와 GDI+의 DrawRectangle 함수는 사각형을 그린다는 면에서 동일한 동작을 하지만 몇 가지 차이점이 있다. GDI와 GDI+ 자체의 차이점이라고 할 수 있는데 이 두 함수에서 차이가 가장 명확하게 보이므로 여기서 그 차이점을 연구해 보자. 먼저 그리고자 하는 사각형을 입력받는 방법이 다른데 GDI는 LTRB 방식의 좌표를 쓰고 GDI+는 XYWH 방식을 쓴다.
앞쪽 두 개의 인수는 두 방식 모드 좌상단 좌표이지만 뒤쪽 두 인수의 의미는 다르다. Rectangle의 인수는 우하단점의 좌표를 지정하고 DrawRectangle은 사각형의 폭과 높이를 나타낸다. 이는 단순한 표현상의 차이일뿐이므로 간단한 수식으로 언제든지 변환 가능하다. 예를 들어 Rectangle(l,t,r,b)는 DrawRectangle(l,t,r-l,b-t)와 동일하며 반대쪽으로도 쉽게 변환된다.
인수의 형식적인 차이외에 끝점의 포함 여부가 다르다. GDI는 항상 끝점을 그리기에서 제외하는데 비해 GDI+는 포함한다는 중요한 차이점이 있다. 이 차이로 인해 최종적으로 그려지는 도형의 모양이 달라진다. 다음 코드를 보자.
G.DrawRectangle(&Pen(Color(0,0,0)),10,10,90,90);
Rectangle(hdc,110,10,200,100);
Rectangle(hdc,10,110,100,200);
int i;
for (i=0;i<=300;i+=50) {
G.DrawRectangle(&Pen(Color(0,0,0)),i,210,50,50);
Rectangle(hdc,i,270,i+50,320);
}
DrawRectangle로 90 크기의 정사각형을 그렸다. 그리고 그 오른쪽과 왼쪽에 똑같은 크기의 정사각형을 Rectangle로 그렸다. 인수의 형식만 다를 뿐 폭과 높이는 모두 90으로 정확하게 주었다. 그러나 막상 실행해 보면 그려진 사각형의 크기가 다르게 나타난다.
단 1픽셀 차이밖에 안나기 때문에 눈에 잘 띄지 않는데 세 사각형이 인전한 부분을 크게 확대해 보면 차이가 분명히 보인다.
DrawRectangle로 그린 사각형은 10부터 시작해서 폭 90만큼인 100픽셀 위치까지 사각형을 그리는데 비해 Rectangle로 그린 사각형은 y좌표 200을 지정해도 실제로는 199까지만 그리고 x좌표 100을 지정해도 99까지만 그린다. 단일 사각형을 그릴 때는 이 정도 차이를 거의 눈치챌 수 없지만 바둑판같은 연속된 사각형을 그려보면 차이가 분명히 나타난다.
아래쪽의 코드는 50픽셀 간격으로 사각형을 연속하여 그린 것인데 GDI+로 그린 사각형은 왼쪽 사각형의 끝 좌표와 오른쪽 사각형의 시작 좌표가 일치하여 두 사각형의 경계에 직선이 하나밖에 없다. 반면 GDI로 그린 사각형은 왼쪽 사각형의 끝 좌표가 오른쪽 사각형의 시작 좌표보다 1 작아 경계면에 선이 두 개로 나타난다. 수직으로도 사각형을 계속 출력한다면 아래 위 사각형의 변들도 이중으로 표시될 것이다.
그렇다면 GDI와 GDI+의 좌표 해석 방법중 과연 어떤 것이 옳은 것일까? 이에 대한 정답은 사실상 없다. 경우에 따라 끝 좌표를 포함하는게 맞을 수도 있고 제외하는게 어울리는 경우도 있다. 그러나 일반적으로 얘기하자면 GDI의 방식이 훨씬 더 상식적이고 실용적이다. 위 예제의 결과만 보면 경계 부근이 한줄로만 출력되는 GDI+의 출력이 더 좋아 보이는 것 같다. 그러나 만약 각 사각형의 색상이 모두 다르다고 가정해 보면 GDI의 방식이 당연히 옳다는 것을 알 수 있다.
중요한 것은 어떤 방식이 옳은가하는 논쟁이 아니라 GDI+는 끝 좌표를 포함한다는 것을 아는 것이다. 특성을 제대로 알고만 있다면 상황에 따라 조정이 가능해진다. 연속적인 도형을 그릴 때 끝 좌표를 제외하고 싶다면 폭을 1 더 작게 주면 원하는대로 할 수 있다. 이런 특성을 잘 모르면 좌표를 정확하게 주었는데도 출력이 이상하게 나오므로 주의할 필요가 있다.
마.다각형
다각형을 그릴 때는 DrawPolygon 함수를 사용하는데 원형은 DrawLines와 동일하되 시작점과 끝점을 강제로 연결한다는 점이 다르다. 다각형을 채울 때는 물론 FillPolygon 함수를 사용하는데 마지막 인수로 다각형 채우기 모드를 지정할 수도 있다.
Status DrawPolygon(const Pen *pen, const Point *points, INT *count);
Status FillPolygon(const Brush *brush, const Point *points, INT count);
배열에 다각형을 구성하는 점의 좌표를 작성하고 이 함수를 호출하면 된다. 다음 코드는 우리나라 지도를 다각형으로 그려 본 것이다.
Pen P(Color(0,0,255),2);
SolidBrush S(Color(200,200,200));
Point pts[]={Point(292,6),Point(331,45),Point(307,45),Point(269,77),
Point(274,111),Point(251,116),Point(207,149),Point(165,155),
Point(161,190),Point(201,206),Point(239,270),Point(258,287),
Point(257,306),Point(249,313),Point(251,335),Point(263,333),
Point(252,364),Point(231,380),Point(203,378),Point(201,392),
Point(181,391),Point(157,389),Point(143,404),Point(117,402),
Point(108,416),Point(95,403),Point(108,393),Point(96,378),
Point(121,341),Point(109,302),Point(96,303),Point(95,292),
Point(114,285),Point(132,292),Point(121,267),Point(114,243),
Point(74,231),Point(72,251),Point(26,231),Point(70,205),
Point(51,198),Point(71,166),Point(13,142),Point(90,103),
Point(132,73),Point(151,56),Point(161,71),Point(202,79),
Point(211,66),Point(206,51),Point(241,49),Point(266,30),
Point(282,26),Point(283,7)};
G.FillPolygon(&S,pts,sizeof(pts)/sizeof(pts[0]));
G.DrawPolygon(&P,pts,sizeof(pts)/sizeof(pts[0]));
모눈 종이에 원하는 도형을 그려 놓고 일일이 좌표를 구해 배열에 그 값을 써 주어야 이런 그림을 그릴 수 있다. 이 좌표를 따는데 한시간 정도가 걸렸는데 좌표만 잘 따면 어떠한 복잡한 도형도 그릴 수 있는 셈이다. 다음 함수들은 원호와 부채꼴을 그린다.
Status DrawArc(const Pen *pen, const Rect &rect, REAL startAngle, REAL sweepAngle);
Status DrawPie(const Pen *pen, const Rect &rect, REAL startAngle, REAL sweepAngle);
Status FillPie(const Brush *brush, const Rect &rect, REAL startAngle, REAL sweepAngle);
원의 외접 사각형을 지정하고 시작 각도와 길이를 인수로 지정한다. 각도는 세시방향을 원점으로 하는 360분법의 각도이되 양수이면 시계 방향을, 음수이면 반시계 방향을 지정한다. GDI의 원 함수들이 라디안을 사용하는데 비해 GDI+는 인간에게 좀 더 친숙한 각도를 사용하므로 편리하다. startAngle은 시작각도, sweepAngle은 원호의 지속각도이다. DrawPie 함수는 원호를 그리고 원주의 양 끝을 원의 중심과 연결하여 부채꼴을 그린다. 원호는 폐곡선이 아니므로 FillArc같은 채우기 함수가 없다. 다음은 테스트 코드이다.
Pen P(Color(0,0,0));
SolidBrush S(Color(128,128,128));
G.DrawArc(&P,10,10,90,90,15.0f,120.0f);
G.DrawPie(&P,110,10,90,90,-15.0f,45.0f);
G.FillPie(&S,10,110,90,90,-15.0f,45.0f);
GDI+가 원을 제대로 그리는지 테스트해 보기 위해 원호 하나와 부채꼴, 그리고 내부를 채운 부채꼴을 그려 보았다. 물론 잘 그린다.
바.곡선
GDI+는 카디널, 베지어 두 가지 종류의 곡선을 지원한다. 카디널 곡선은 책받침처럼 휘기 쉬운 물체의 중간을 잡고 구부릴 때 곡선이 만들어지는 원리를 사용하는 기본적인 곡선이다.
Status DrawCurve(const Pen *pen, const Point *points, INT count, REAL tension);
곡선이 통과하는 점의 배열을 주고 tension인수로 곡선에 적용될 장력을 지정하면 장력대로 곡선이 그려진다. 장력이 0이면 완전한 직선이 그려지며 1이면 경로점을 통과하는 부드러운 곡선이 그려진다. 다음 코드는 장력에 따라 어떤 곡선이 그려지는지를 테스트하는데 실행중에 키보드의 상하 커서 이동키로 장력을 조정하도록 했다.
#include <tchar.h>
float tension=0.0;
TCHAR Mode=TEXT('1');
void OnPaint(HDC hdc)
{
Graphics G(hdc);
....
// 카디널 곡선
{
Point pts[]={Point(10,100),Point(50,10),Point(100,150),Point(200,100)};
Pen P(Color(0,0,0));
G.DrawCurve(&P,pts,4,tension);
TCHAR str[128];
_stprintf_s(str,128,TEXT("장력 : %.1f"),tension);
TextOut(hdc,10,200,str,lstrlen(str));
}
break;
LRESULT CALLBACK WndProc(HWND hWnd,UINT iMessage,WPARAM wParam,LPARAM lParam)
{
HDC hdc;
PAINTSTRUCT ps;
switch(iMessage) {
case WM_KEYDOWN:
if (Mode == TEXT('7')) {
switch (wParam) {
case VK_UP:
tension += 0.1f;
InvalidateRect(hWnd,NULL,TRUE);
return 0;
case VK_DOWN:
tension -= 0.1f;
InvalidateRect(hWnd,NULL,TRUE);
return 0;
}
}
Mode=(TCHAR)wParam;
InvalidateRect(hWnd,NULL,TRUE);
return 0;
....
전역 변수 tension을 0으로 초기화하고 OnPaint에서는 이 변수를 카디널 곡선의 장력으로 사용한다. WndProc에서는 상하 커서 이동키로 tension 변수의 값을 0.1씩 증감시키며 화면을 다시 그린다. 예제를 실행해 보면 장력이 곡선의 모양에 어떤 영향을 미치는지를 알 수 있을 것이다.
카디널 폐곡선을 그릴 때는 Draw(Fill)ClosedCurve 함수를 사용하는데 시작점과 끝점을 강제로 연결하여 곡선을 닫고 내부를 채운다.
베지어 곡선은 시작점, 끝점과 두 개의 조절점으로 구성된다. DrawBezier 함수로 그리는데 Win32의 베지어 곡선과 동일한 곡선을 그린다. 다음은 테스트 코드이다.
Pen P(Color(0,0,0));
G.DrawBezier(&P,Point(10,150), Point(200,0), Point(100,400),Point(400,150));
시작점, 끝점을 두 번째, 다섯 번째 인수로 지정하고 그 사이에 두 개의 조절점의 좌표를 전달하면 된다. 여러 개의 베지어 곡선을 그리고 싶을 때는 DrawBeziers 함수를 사용한다.