4.펜

가.펜의 생성

펜은 GDI에서와 마찬가지로 선을 그을 때 사용하는 그래픽 오브젝트이며 GDI+에서는 Pen 객체로 표현한다. 외곽선을 그리는 Draw* 함수의 첫 번째 인수로 전달되므로 선을 그리기 전에 항상 펜을 먼저 만들어야 한다. Pen의 생성자는 다음 두 가지가 있다.

Pen(const Color &color, REAL width);

Pen(const Brush *brush, REAL width);

첫 번째 생성자는 펜의 색상과 두께를 지정하는데 두께를 생략하면 1이 적용된다. 가장 일반적인 펜이라고 할 수 있다.

예 제 : GdiPlusPen

GdiPlusPen 프로젝트를 만들고 펜 오브젝트의 여러가지 속성을 테스트해 보자. 다음 코드는 굵기 3의 빨간색 펜을 만들어 수평선을 그린다.

Pen P(Color(255,0,0),3);

G.DrawLine(&P,10,10,200,10);

두 번째 생성자는 브러시로부터 펜을 생성한다. 펜의 두께가 굵어지면 선에도 면이 생기는데 이 면을 채워줄 브러시를 지정하는 것이다. 다음 코드는 해치 브러시로부터 굵은 펜을 만들어 타원을 그린다.

HatchBrush H(HatchStyleWeave,Color(255,0,0),Color(0,255,0));

Pen P(&H,20);

G.DrawEllipse(&P,20,20,300,200);

인수로 전달되는 브러시만 바꾸면 펜에 의해 그려지는 두꺼운 선의 채색 모양을 다양하게 지정할 수 있다. Pen 클래스의 생성자는 색상과 굵기만을 지정할 수 있지만 이 외에도 펜은 아주 다양한 속성을 가질 수 있으며 Pen 클래스에는 속성을 조사하거나 변경하는 멤버 함수들이 정의되어 있다. 다음 함수는 실행중에 펜의 색상과 브러시, 펜의 두께 등을 변경한다.

Status SetColor(const Color &color);

Status SetBrush(const Brush *brush);

Status SetWidth(REAL width);

물론 반대 함수인 Get~도 정의되어 있어서 펜의 속성을 조사할 수도 있다. 다음 코드는 검정색으로부터 출발하여 점점 파란색으로 펜의 색상을 변경해 가면서 수평선을 연속적으로 출력한다.

int i;

Pen P(Color(0,0,0));

for (i=0;i<256;i++) {

P.SetColor(Color(0,0,255-i));

G.DrawLine(&P,0,i,300,i);

}

설치 화면 등에서 흔히 볼 수 있는 그라데이션 모양이다. GDI+에는 이런 모양의 브러시를 만들 수도 있으므로 일일이 펜을 바꿔 가며 그라데이션을 그릴 필요는 없다.

나.선의 모양

펜은 처음 생성될 때 실선으로 생성되지만 다음 함수를 사용하면 선의 모양을 점선이나 일점 쇄선 등으로 변경할 수 있다.

Status SetDashStyle(DashStyle dashStyle);

지정 가능한 선의 모양은 다음과 같은 열거형으로 정의되어 있다.

typedef enum {

DashStyleSolid = 0,

DashStyleDash = 1,

DashStyleDot = 2,

DashStyleDashDot = 3,

DashStyleDashDotDot = 4,

DashStyleCustom = 5

} DashStyle;

선을 구성하는 끊어진 작은 선분들을 대쉬라고 하는데 대쉬간의 간격은 선의 두께와 같다. 얇은 펜에서는 대쉬도 촘촘하지만 펜이 굵으면 대쉬간의 간격도 그만큼 넓어진다. 다음 코드는 GDI+가 기본적으로 지원하는 펜 스타일을 모두 출력해 본 것이다.

Pen P(Color(0,0,0),5);

int i;

for (i=0;i<5;i++) {

P.SetDashStyle((DashStyle)i);

G.DrawLine(&P,10,i*20+20,300,i*20+20);

}

왼쪽은 선의 두께가 5일 때의 출력 결과이고 오른쪽은 선의 두께를 2로 조정했을 때의 결과이다.

대쉬의 간격이 선의 두께에 영향을 받는다는 것을 알 수 있는데 이는 무척 합리적이다. GDI도 펜의 모양을 변경할 수는 있지만 두께가 1일 때만 선의 모양이 유지되는데 비해 GDI+는 펜이 굵어도 스타일이 적용된다는 장점이 있다. GDI+가 미리 정의해 놓은 대쉬 모양은 다섯 개에 불과하지만 다음 함수를 사용하면 사용자가 원하는 어떤 스타일의 펜도 만들 수 있다.

Status SetDashPattern(const REAL *dashArray, INT count);

실수형 배열에 점선 길이와 공백 길이를 작성하여 그 포인터를 전달하고 count에 배열 크기를 알려 주면 배열에 저장된 길이대로 대쉬를 만든다. 다음 코드는 아주 불규칙한 모양의 대쉬를 생성한다.

Pen P(Color(0,0,0),5);

REAL arDash[]={3.0f,1.0f,8.0f,2.0f,5.0f,1.0f};

P.SetDashStyle(DashStyleCustom);

P.SetDashPattern(arDash,sizeof(arDash)/sizeof(arDash[0]));

G.DrawLine(&P,10,50,300,50);

처음 3단위만큼 대쉬를 만들고 다음 1단위는 공백, 다음 8단위는 대쉬, 다음 2단위는 공백 등으로 대쉬 모양을 지정했다. 배열의 짝수번째 수는 대쉬의 길이이고 홀수번째 수는 공백의 길이이다. 이때 각 단위는 펜 굵기의 배수이다. 실행 결과는 다음과 같다.

대쉬와 공백의 길이를 마음대로 지정할 수 있으므로 어떤 스타일의 펜이든지 만들 수 있는 셈이다. 데쉬는 선의 시작 좌표에서부터 무늬가 나타나며 대쉬 길이보다 더 긴 선을 그으면 무늬가 반복된다. 대쉬의 시작이 선의 시작부터인데 다음 함수로 오프셋을 변경하면 대쉬의 시작 위치를 조정할 수 있다.

Status SetDashOffset(REAL dashOffset);

지정한 오프셋만큼 건너뛴 자리에서 대쉬가 시작된다. 대개의 경우는 대쉬가 어디서부터 시작되는가가 중요하지 않지만 선의 모양이 아주 독특하다면 주변의 출력 모양과 조화를 이루기 위해 대쉬의 시작 위치가 중요할 수도 있다. 일점 쇄선의 경우 긴줄, 짧은줄이 반복되는데 오프셋을 변경하면 짧은줄부터 시작할 수도 있다. 다음 예제는 대쉬의 오프셋을 주기적으로 변화시킴으로써 선택 영역을 애니메이션하는 효과를 낸다.

예 제 : DashAnimation

REAL Offset = 0;

void OnPaint(HDC hdc)

{

Graphics G(hdc);

Pen P(Color(0,0,0),2);

P.SetDashStyle(DashStyleDash);

P.SetDashOffset(Offset);

G.DrawRectangle(&P,10,10,200,150);

}

LRESULT CALLBACK WndProc(HWND hWnd,UINT iMessage,WPARAM wParam,LPARAM lParam)

{

HDC hdc;

PAINTSTRUCT ps;

switch(iMessage) {

case WM_CREATE:

hWndMain=hWnd;

SetTimer(hWnd,1,200,NULL);

return 0;

case WM_TIMER:

Offset--;

if (Offset < 0) Offset = 3;

InvalidateRect(hWnd,NULL,TRUE);

return 0;

case WM_PAINT:

hdc=BeginPaint(hWnd, &ps);

OnPaint(hdc);

EndPaint(hWnd, &ps);

return 0;

case WM_DESTROY:

PostQuitMessage(0);

return 0;

}

return(DefWindowProc(hWnd,iMessage,wParam,lParam));

}

OnPaint에서 점선으로 사각형을 그리되 대쉬의 시작 위치를 전역 변수 Offset으로 지정했다. WndProc에서 0.2초 간격의 타이머를 설치하고 Offset을 0~3 사이로 주기적으로 변화시킴으로써 똑같은 사각형이라도 모양이 달라진다. 초당 다섯 번씩 대쉬가 시계 방향으로 회전하는 것처럼 보인다. 포토샵같은 그래픽 프로그램에서 이런 꾸물대는 도형으로 선택 영역을 표시한다.

대쉬의 오프셋을 변경하는 기능이 없다면 각 선분을 일일이 그려야 하므로 이와 같은 효과를 구현하기가 상당히 어렵다. 이 예제는 단순한 사각형을 그려 별로 멋이 없지만 패스를 사용하면 글자나 임의의 곡선 영역에 대해서도 애니메이션을 수행할 수 있다.

다.선의 끝모양

선의 끝모양은 별다른 지정이 없으면 밋밋한 사각형이다. 그러나 다음 함수들을 사용하면 끝 모양에 약간의 장식을 달 수 있다.

Status SetStartCap(LineCap startCap);

Status SetEndCap(LineCap endCap);

Status SetDashCap(DashCap dashCap);

Status SetLineCap(LineCap startCap, LineCap endCap, DashCap dashCap);

선의 끝 모양은 다음 열거형 중 하나로 지정한다.

typedef enum {

LineCapFlat = 0,

LineCapSquare = 1,

LineCapRound = 2,

LineCapTriangle = 3,

LineCapNoAnchor = 0x10,

LineCapSquareAnchor = 0x11,

LineCapRoundAnchor = 0x12,

LineCapDiamondAnchor = 0x13,

LineCapArrowAnchor = 0x14,

LineCapCustom = 0xff

} LineCap;

SetStartCap, SetEndCap 함수는 선의 양쪽 끝 장식을 지정하는데 LineCap 열거형 중 하나를 지정한다. 간단한 테스트 코드를 작성해 보자.

Pen P(Color(0,0,0),10);

P.SetStartCap(LineCapArrowAnchor);

P.SetEndCap(LineCapDiamondAnchor);

G.DrawLine(&P,30,30,300,30);

P.SetStartCap(LineCapRound);

P.SetEndCap(LineCapTriangle);

G.DrawLine(&P,30,60,300,60);

P.SetStartCap(LineCapSquareAnchor );

P.SetEndCap(LineCapRoundAnchor );

G.DrawLine(&P,30,90,300,90);

세 개의 수평선을 그리되 각 선의 끝 모양을 모두 다르게 지정해 보았다.

선 끝에 화살표를 달거나 둥근 장식, 네모 장식 등을 붙일 수 있다. 각 장식의 크기도 선의 굵기에 비례해서 커진다. SetDashCap 함수를 사용하면 대쉬의 모양도 다음 중 하나로 지정할 수 있다.

typedef enum {

DashCapFlat = 0,

DashCapRound = 2,

DashCapTriangle = 3

} DashCap;

실선이 아닐 경우 끊어진 각각의 대쉬 양쪽은 이 열거형이 지정하는 모양으로 바뀐다. 간단한 테스트 코드를 작성해 보자.

Pen P(Color(0,0,0),10);

P.SetDashStyle(DashStyleDashDot);

P.SetDashCap(DashCapFlat);

G.DrawLine(&P,10,20,300,20);

P.SetDashCap(DashCapRound);

G.DrawLine(&P,10,40,300,40);

P.SetDashCap(DashCapTriangle);

G.DrawLine(&P,10,60,300,60);

대쉬의 끝 부분이 둥글게 또는 삼각형 모양으로 나타난다. 대쉬 스타일은 선 굵기가 1일 때는 아무 효과도 없을 것이다. SetLineCap 함수는 시작, 끝, 대쉬의 모양을 한꺼번에 지정한다. 화면에서는 대쉬 모양이 무척 거칠게 표현되지만 프린터같은 고해상도 장비에서는 훨씬 더 섬세한 모양으로 그려질 것이다.

라.조인 모양

조인 모양은 두 선분이 만나 꺽어지는 부분의 모양을 지정한다. 별다른 지정이 없으면 두 선분이 직교하는 모양을 그리지만 다음 함수로 조인 모양을 바꾸면 다른 모양으로 그릴 수도 있다.

Status SetLineJoin(LineJoin lineJoin);

테스트 코드를 작성하여 결과를 보도록 하자. 말로 스타일을 설명하는 것보다는 스타일에 따라 그려지는 모양을 직접 눈으로 보는 것이 더 쉽다.

Pen P(Color(0,0,0),15);

P.SetLineJoin(LineJoinMiter);

G.DrawRectangle(&P,10,10,60,60);

P.SetLineJoin(LineJoinBevel);

G.DrawRectangle(&P,110,10,60,60);

P.SetLineJoin(LineJoinRound);

G.DrawRectangle(&P,10,110,60,60);

P.SetLineJoin(LineJoinMiterClipped);

G.DrawRectangle(&P,110,110,60,60);

직사각형처럼 두 선분이 만나는 모난 부분의 장식이 둥그스럼해지기도 하고 깍인 모양이 되기도 한다. 다음 함수는 선의 정렬 방식을 변경한다.

Status SetAlignment(PenAlignment penAlignment);

정렬 방식이란 지정한 좌표에 대해 펜의 두께가 어느쪽으로 확장될 것인가를 지정하는 것이다. 중앙과 안쪽으로 정렬할 수 있는데 디폴트는 중앙이다. 그래서 펜이 굵을 경우 지정한 좌표보다 더 바깥에 선이 그려질 수도 있다. 정렬 방식을 안쪽으로 변경하면 도형의 안쪽으로만 선의 두께가 확장되어 경계밖을 벗어나지 않는다.

Pen P(Color(192,192,192),15);

Pen P2(Color(0,0,0),1);

// 중심에 정렬

P.SetAlignment(PenAlignmentCenter);

G.DrawRectangle(&P,10,10,100,100);

G.DrawLine(&P,10,150,300,150);

// 안쪽으로 정렬

P.SetAlignment(PenAlignmentInset);

G.DrawRectangle(&P,200,10,100,100);

G.DrawLine(&P,10,200,300,200);

// 확인을 위한 안내선

G.DrawRectangle(&P2,10,10,100,100);

G.DrawRectangle(&P2,200,10,100,100);

G.DrawLine(&P2,10,150,300,150);

G.DrawLine(&P2,10,200,300,200);

펜이 아주 굵을 경우는 이 정렬 방식에 따라 그려지는 도형의 모양이 상당히 달라진다. 정렬 방식은 닫힌 도형을 그릴 때만 적용되며 직선이나 원호처럼 내부/외부의 구분이 없는 도형에 대해서는 항상 중앙으로 정렬된다. 안쪽 정렬 방식은 GDI의 PS_INSIDEFRAME과 개념적으로 동일하다.