[MFC] 그림판(mspaint) 만들기 프로젝트 #4 (예제 포함)

이제 그림판 프로젝트의 마지막 포스팅입니다. 이번 포스팅에서는 MFC에서의 동작을 설명합니다. 본문의 하단에는 샘플 코드가 첨부되어 있으니 참고해주세요.

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

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

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

캔버스(Canvas) 초기화

캔버스는 현재 그리고 있는 것(m_canvasDuringDraw)과, 마지막으로 그린 것을 백업하는 것(m_canvasAfterDrawing) 두 개가 있다고 설명했습니다. initializeCanvas() 함수는 캔버스를 Dialog 크기만큼 생성하고 하얗게 채우는 작업을 수행합니다. 함수 인자로 Width, Height를 넘겨 자유로운 크기로 생성하게 하는 것도 좋은 방법입니다.

//ExamPaintDlg.h
std::shared_ptr<Gdiplus::Bitmap> m_canvasAfterDrawing;
std::shared_ptr<Gdiplus::Bitmap> m_canvasDuringDraw;

//ExamPaintDlg.cpp
void CExamPaintDlg::initializeCanvas()
{
	CRect rect;
	this->GetClientRect(&rect);

	m_canvasAfterDrawing = std::make_shared<Bitmap>(rect.Width(), rect.Height());
	m_canvasDuringDraw = std::make_shared<Bitmap>(rect.Width(), rect.Height());

	Gdiplus::Graphics graphicsOfcanvasAfterDrawing(m_canvasAfterDrawing.get());
	Gdiplus::Graphics graphicsOfcanvasDuringDraw(m_canvasAfterDrawing.get());

	SolidBrush whiteBrush(Color(255, 255, 255, 255));
	graphicsOfcanvasAfterDrawing.FillRectangle(&whiteBrush, 0, 0, rect.Width(), rect.Height());
	graphicsOfcanvasDuringDraw.FillRectangle(&whiteBrush, 0, 0, rect.Width(), rect.Height());
}

이 함수는 프로그램 최초 실행 시 호출되는 OnInitDialog()와 New 메뉴를 클릭했을 때 호출되는 OnFileNew()에서 사용됩니다.

BOOL CExamPaintDlg::OnInitDialog()
{
	CDialogEx::OnInitDialog();

	// ...

	initializeCanvas();

	return TRUE;  // 포커스를 컨트롤에 설정하지 않으면 TRUE를 반환합니다.
}

void CExamPaintDlg::OnFileNew()
{
	initializeCanvas();

	Invalidate(FALSE);
}

마우스 이벤트

사실 마우스 이벤트 부분이 제일 까다롭습니다. 마우스 이벤트는 왼쪽 버튼이 내려갔을 때(LButtonDown), 왼쪽 버튼이 올라왔을 때(LButtonUp) 그리고 마우스가 움직일 때(OnMouseMove)를 사용합니다. 참고로 도형은 시작 점과 끝 점 두 개만 있으면 그릴 수 있습니다.

마우스 이벤트 설명

왼쪽 버튼이 눌렸을 때(LButtonDown)

버튼이 눌리면 좌표(Point)를 보관하고, 나중에 OnMouseMove()에서 현재 커서의 이동 량(Offset)을 계산할 때 사용됩니다.

마우스 좌표 계산

void CExamPaintDlg::OnLButtonDown(UINT nFlags, CPoint point)
{
	if (m_figure == nullptr) return;
	
	m_pointOfLeftDown = point;
	
	m_isLButtonUp = false;
	
    //도형을 클릭해서 Moving 중이라면 넘어갑니다.
	if (m_isInBound == true)
	{
		CDialogEx::OnLButtonDown(nFlags, point);
		return;
	}
	
    //도형을 그리기 위한 두 점을 설정합니다.
	m_figure->SetPoint(0, point.x, point.y);
	m_figure->SetPoint(1, point.x, point.y);
	
	m_isAddNewObject = true;

	//마지막에 그려진 Canvas를 백업하는 부분.
	Gdiplus::Graphics memG(m_canvasAfterDrawing.get());
	memG.DrawImage(m_canvasDuringDraw.get(), 0, 0, m_canvasDuringDraw->GetWidth(), m_canvasDuringDraw->GetHeight());

	Invalidate(FALSE);

	CDialogEx::OnLButtonDown(nFlags, point);
}

왼쪽 버튼이 올라왔을 때(LButtonUp)

CropBox는 조금 까다롭습니다. 원본 이미지에서 잘라내는 영역을 설정해야 하기 때문에 현재 위치 기준으로 Crop 영역을 설정하는 함수를 호출합니다.

void CExamPaintDlg::OnLButtonUp(UINT nFlags, CPoint point)
{
	if (m_figure == nullptr) return;

	//CropBox가 선택되었고 도형을 추가하는 중이라면,
	//SetCropPoints를 호출하여 Crop 영역을 지정합니다.
	if (m_isCropping == true && m_isAddNewObject == true)
	{
		std::shared_ptr<Figure::CropRectangle> crop = std::dynamic_pointer_cast<Figure::CropRectangle>(m_figure);
		crop->SetCropPoints();
	}

	m_isAddNewObject = false;
	m_isLButtonUp = true;
	
	Invalidate(FALSE);

	CDialogEx::OnLButtonUp(nFlags, point);
}

마우스 커서가 움직일 때(OnMouseMove)

마우스 커서에 따른 동작의 의미는 아래 코드에 주석으로 설명합니다.

void CExamPaintDlg::OnMouseMove(UINT nFlags, CPoint point)
{
	if (m_figure == nullptr)
		return;

	if (point.x < 0 || point.x > m_canvasDuringDraw->GetWidth() || point.y < 0 || point.y > m_canvasDuringDraw->GetHeight())
		return;

	if (nFlags == MK_LBUTTON && m_isAddNewObject == true)
	{
		//왼쪽 버튼이 눌렸고 마우스 커서가 움직여 도형을 그리는 중을 의미.
        
		//도형을 그리기 위한 두 번째 포인트를 지정.
		m_figure->SetPoint(1, point.x, point.y);

		Invalidate(FALSE);
	}
	else if (nFlags == MK_LBUTTON && m_isAddNewObject == false && m_isInBound == true)
	{
		//왼쪽 버튼이 눌렸고, 버튼이 한번 올라왔었고, 커서가 도형 내에 있으므로
		//도형을 클릭해서 Dragging 중이라는 의미.
        
		//시작 점과 현재 점과의 이동 량을 계산.
		Point offset;
		offset.X = point.x - m_pointOfLeftDown.x;
		offset.Y = point.y - m_pointOfLeftDown.y;

		m_figure->Drag(offset.X, offset.Y);
			
		Invalidate(FALSE);

		m_pointOfLeftDown.x = point.x;
		m_pointOfLeftDown.y = point.y;
	}
	else
	{
		//도형을 그리거나 움직이는 중이 아니므로
		//현재 마우스 커서가 도형 위에 있는지 확인하고,
		//위치에 따라 커서를 지정.
		m_isInBound = m_figure->IsInBound(point.x, point.y);
		if (m_isInBound == true)
			SetCursor(AfxGetApp()->LoadStandardCursor(IDC_SIZEALL));
		else
			SetCursor(AfxGetApp()->LoadStandardCursor(IDC_ARROW));
	}

	CDialogEx::OnMouseMove(nFlags, point);
}

GDI+ 이미지 불러오기/저장하기

이미지를 파일로부터 불러오고, 불러온 이미지를 m_canvasAfterDrawing에 그려줍니다.

void CExamPaintDlg::OnFileOpen()
{
	CString filter = _T("Bitmap(*.BMP)|*.BMP|JPEG(*.JPG)|*.JPG|All Files(*.*)|*.*||");
	CFileDialog dlg(TRUE, _T(""), _T(""), OFN_HIDEREADONLY, filter);
	if (dlg.DoModal() == IDOK)
	{
		Image* img = Image::FromFile(dlg.GetPathName());
		
		m_canvasAfterDrawing = std::make_shared<Bitmap>(img->GetWidth(), img->GetHeight());
		m_canvasDuringDraw = std::make_shared<Bitmap>(img->GetWidth(), img->GetHeight());

		Graphics g(m_canvasAfterDrawing.get());
		g.DrawImage(img, 0, 0, img->GetWidth(), img->GetHeight());
		
		Invalidate(FALSE);
	}
}

GDI+로 이미지를 저장하는 부분이 조금 까다롭습니다. 저장하는 이미지 포맷에 따라 CLSID 정보를 가져와야 합니다.

void CExamPaintDlg::OnFileSave()
{
	CString filter = _T("Bitmap(*.BMP)|*.BMP|JPEG(*.JPG)|*.JPG|PNG Files(*.png)|*.png||");
	CFileDialog dlg(FALSE, _T(""), _T(""), OFN_HIDEREADONLY, filter);
	if (dlg.DoModal() == IDOK)
	{
		CLSID clsid;
		CString extension = dlg.GetFileExt();
		if (extension == _T("BMP"))
			CLSIDFromString(_T("{557cf400-1a04-11d3-9a73-0000f81ef32e}"), &clsid);
		else if (extension == _T("JPG"))
			CLSIDFromString(_T("{557cf401-1a04-11d3-9a73-0000f81ef32e}"), &clsid);
		else if (extension == _T("PNG"))
			CLSIDFromString(_T("{557cf406-1a04-11d3-9a73-0000f81ef32e}"), &clsid);

		m_canvasAfterDrawing.get()->Save(dlg.GetPathName(), &clsid, NULL);
	}
}

정리

이번 그림판 프로젝트 잘 따라오셨나요? 제가 봐도 설명이나 코드에 부족한 점이 많아 보입니다. 그래도 첨부된 샘플 코드를 보면 대충 감은 잡히리라 생각됩니다. 그리고 원리만 이해하면 MFC나 C#, 다른 UI 플랫폼에서도 동일하게 만들 수 있습니다.

ExamMspaint.zip

0.14MB