[MFC] 그림판(mspaint) 만들기 프로젝트 #3

지난 포스팅에 이어 GDI+, 더블 버퍼링 그리고 어떻게 그릴 것인지에 대한 내용을 설명하겠습니다.

[MFC] 그림판(mspaint) 만들기 프로젝트 #1

[MFC] 그림판(mspaint) 만들기 프로젝트 #2

도형을 어떻게 그릴 것인가

사실 처음에는 vector를 사용하여 IFigure를 차례대로 그리도록 구현했었습니다. 이렇게 구현하면, 여러 도형을 순차적으로 그리고 난 후 특정 도형 편집이 가능해집니다. 또는 삭제도 가능하겠죠? 뒤로 되돌리기 작업도 가능해 보입니다. 하지만 CropBox를 사용하여 도형이 편집된 경우, vector에 있는 도형을 다시 그리게 되면 원복 되겠죠?

그래서 본문의 그림판 프로젝트에서는 vector를 사용하지 않고, 그때그때 추가한 도형을 이미지에 덧 그리기 형태로 구현했습니다. 되돌리기는 기능은 안되지만 CropBox 지정 후 편집하면 그대로 유지가 됩니다. 물론, vector로 구현하고 CropBox로 편집된 경우의 Canvas도 따로 관리하고... 코드를 보완하면 Windows 그림판처럼 동작할 수 있습니다.

//인덱스 별 선택을 위한 경우.
std::vector<std::shared_ptr<Figure::IFigure>> m_figures;

//일회성으로 사용하는 경우.
std::shared_ptr<Figure::IFigure> m_figure;

GDI 또는 GDI+

사실 GDI든 GDI+든 무엇을 사용하는지는 상관없습니다. 그저 GDI+에 Drawing 관련 예쁜 효과가 더 많기 때문에 사용한 것입니다. GDI+는 불투명 효과라든가 Smoothing, Anti-Aliasing 등의 각종 효과를 지원하고, 개인적으론 GDI+ 사용 법이 더 편하더군요.

더블 버퍼링(Double Buffering)

더블 버퍼링이 무엇인지는 알고 계신가요? 아래의 링크를 참고하면 이해하는데 도움이 됩니다.

[GDI] 더블 버퍼링(Double Buffering) 소개

[GDI+] 더블 버퍼링(Double Buffering) 사용하기

즉, 깜빡임 현상(Flicker) 때문에 더블 버퍼링을 사용하는 것입니다. 배경 색상을 채우고, 그 위에 이미지를 그리고(Drawing), 그 위에 도형을 그리는 동작이 마우스 Drag 움직임에 따라 계속해서 반복된다면 시각적으로 깜빡이듯이 나타날 것입니다. 이를 방지하기 위해 하나의 캔버스(Canvas)에 배경을 그리고, 그림을 그리고, 도형을 그리는 순으로 보여줄 것입니다.

그래서 Draw() 함수는 아래와 같이 동작합니다.

void CExamPaintDlg::OnDrawImage()
{
	//View 영역의 DC를 얻는다.
	CPaintDC dc(this);

	//얻어진 DC의 Graphics를 얻는다.
	Gdiplus::Graphics mainG(dc.GetSafeHdc()); 
    
	//현재 그리는 Canvas의 Graphics를 얻는다.
	Gdiplus::Graphics memG(m_canvasDuringDraw.get());
    
	//현재 그리는 Canvas에 마지막에 백업한 Canvas를 그린다.
	memG.DrawImage(m_canvasAfterDrawing.get(), 0, 0, m_canvasAfterDrawing->GetWidth(), m_canvasAfterDrawing->GetHeight());
	
	//도형이 존재하면 현재 Graphics에 그린다.
	if (m_figure != nullptr)
		m_figure->Draw(&memG);
	
	//View DC의 Graphics에 현재 그려진 Canvas를 그린다(최종본을 그린다).
	mainG.DrawImage(m_canvasDuringDraw.get(), 0, 0);
}

만약, 위 코드에서 mainG에만 Draw 한다면 이는 더블 버퍼링이 아닌 덧 그리기 형태입니다. 즉, 깜빡임 현상이 나타나겠죠?

백업할 캔버스(Canvas)와 그려질 캔버스

동일한 캔버스에 그릴 경우 발생하는 문제

앞에서 언급된 코드에 m_canvasDuringDraw와 m_canvasAfterDrawing이 보입니다. 이는 현재 그려지고 있는 캔버스(m_canvasDuringDraw)와 마지막에 그려진 캔버스(m_canvasAfterDrawing, 백업할 캔버스)를 의미하는데요. 똑같은 캔버스에 연달아서 계속 그리게 되면, 도형의 움직임이 흔적으로 남아 위와 같은 현상이 나타납니다. 그래서 마우스 이벤트와 연동하여, 그리는 동작이 완료되면 그려진 캔버스를 백업하는 작업이 필요합니다.

아래 코드는 왼쪽 마우스 버튼이 클릭될 때, 현재까지 그려진 그림을 백업 캔버스에 보관하는 내용입니다.

void CExamPaintDlg::OnLButtonDown(UINT nFlags, CPoint point)
{
	//...

	//마지막 캔버스를 가져와서
	Gdiplus::Graphics memG(m_canvasAfterDrawing.get());
	//현재 캔버스를 덧 그린다.
	memG.DrawImage(m_canvasDuringDraw.get(), 0, 0, m_canvasDuringDraw->GetWidth(), m_canvasDuringDraw->GetHeight());
	//...
}

이제 거의 다 왔습니다. 다음 포스팅에서는 MFC에서 각종 이벤트를 어떻게 연동하여 구현하는지 설명하겠습니다.