ApiDraw07까지는 도형을 픽셀 단위로 편집했다. 이렇게 하면 섬세한 이동 및 크기 변경이 가능한 것 같지만 실제로 써 보면 정렬하기 어려워서 대단히 불편하다. 예를 들어 사각형 도형 세 개를 똑같은 크기로 생성한다거나 도형을 일정한 기준선에 맞추어 나란히 배치하는 것도 쉽지 않다. 그래서 보통 픽셀 단위로 편집하지 않으며 일정한 칸 단위로 이동 및 크기 조정을 한다.
파워 포인트나 비지오같은 벡터 편집 프로그램을 사용해 보면 이런 편집 방식을 쉽게 이해할 수 있을 것이다. 우리가 지금 사용하고 있는 비주얼 C++의 리소스 편집기도 이런 그리드 편집 방법을 지원한다. 이동, 크기 조정의 단위를 그리드라고 하는데 도형은 그리드 단위로 배치된다. 그리드 기능을 추가하기 위해 ApiDraw08 프로젝트를 만들고 다음 전역 변수들을 선언하자.
int GridX, GridY;
BOOL bGrid;
int GridLineX, GridLineY;
BOOL bGridLine;
GridX, GridY는 말 그대로 그리드의 수평, 수직 단위이며 bGrid는 그리드 기능을 쓸 것인가 아닌가를 지정한다. GridLineX, GridLineY는 그리드를 보여줄 안내선의 수평, 수직 간격이며 bGridLine은 이 안내선을 보여줄 것인가 아닌가를 지정한다. 굳이 수평, 수직축의 간격을 따로 지정할 필요까지는 없지만 사용자에게 최대한의 선택권을 주기 위해서 각 방향으로 간격을 따로 지정할 수 있도록 했다.
만약 수평, 수직 간격과 안내선을 따로 지정하는 것이 번거로와 하나의 값으로 수평, 수직을 한꺼번에 지정하도록 하고 싶다면 코드는 수정할 필요없이 대화상자의 UI를 하나만 작성하면 된다. 즉, 캔버스는 각 방향의 옵션을 따로 입력받을 수 있고 이 옵션을 다 사용할 것인가 아닌가는 호스트가 결정할 수 있도록 해 두는 것이다. 이 변수들은 OnCreate에서 다음과 같이 초기화한다.
LRESULT OnCreate(HWND hWnd,WPARAM wParam,LPARAM lParam)
{
....
GridX=8;
GridY=8;
bGrid=TRUE;
GridLineX=8;
GridLineY=8;
bGridLine=TRUE;
그리드는 8픽셀 단위로 설정되며 안내선은 매 8그리드마다 그러니까 매 64픽셀마다 출력한다. 안내선이 너무 촘촘하게 그려지면 화면이 너무 번잡스러워 보이므로 적당한 간격을 두고 안내선을 표시하는 것이 보기에 좋다. OnPaint에서 안내선을 그리는데 단순한 바둑판 출력문일 뿐이다. 실제 도형이 아니므로 너무 진하지 않은 색상으로 그려야 눈에 거슬리지 않는다.
LRESULT OnPaint(HWND hWnd,WPARAM wParam,LPARAM lParam)
{
int x,y;
....
FillRect(hMemDC,&crt,GetSysColorBrush(COLOR_WINDOW));
if (bGridLine) {
hPen=CreatePen(PS_SOLID,1,RGB(192,192,192));
hOldPen=(HPEN)SelectObject(hMemDC,hPen);
for (y=0;y<crt.bottom;y=y+GridLineY*GridY) {
MoveToEx(hMemDC,0,y,NULL);
LineTo(hMemDC,crt.right,y);
}
for (x=0;x<crt.right;x=x+GridLineX*GridX) {
MoveToEx(hMemDC,x,0,NULL);
LineTo(hMemDC,x,crt.bottom);
}
DeleteObject(SelectObject(hMemDC,hOldPen));
}
for (idx=0;idx<arNum;idx++) {
....
안내선은 도형보다 더 아래쪽에 있어야 하므로 도형을 그리기 전에 미리 그려야 한다. 안내선도 더블 버퍼링의 대상이므로 메모리 DC에 그려지며 도형과 함께 화면 DC로 전송될 것이다. 여기까지 작성한 후 실행해 보면 안내선이 보이기는 하지만 아직 동작은 하지 않는다.