[GDI] 이미지에 움직이는 직선 그리기

 

이미지의 특정 행(Row) 또는 열(Column)에서 프로파일(Profile) 데이터를 획득하는 경우가 종종 있습니다.

주로 조명 또는 카메라의 균일도, 이물 유무 등을 보기 위함인데요.

단순히 에디트 컨트롤(Edit control)에 라인의 위치 값을 입력해서 데이터를 얻을 수 있지만, 

사용자 입장에서는 스크롤바 또는 슬라이더 컨트롤을 이용하여 프로파일 라인을 움직이는 방법이 더욱 사용하기 편리합니다.

 

이번 글에서는 이미지를 불러오고 슬라이더 컨트롤로 Vertical Line을 움직이는 예제를 보여드리려고 합니다.

※ 예제 코드는 하단에 첨부되어 있습니다.

 

이해를 돕기 위해 아래 링크를 꼭 읽어주세요.

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

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

 

따라하기

Dialog Base의 프로젝트를 생성해주세요. 이름은 'DoubleBuffering'으로 지었습니다.

그리고 UI 배치는 간단하게 Button / Picture Control / Slider Control(Horizontal) 이렇게 3개만 추가합니다.

 

헤더에 아래와 같이 변수와 함수를 정의합니다.

// DobuleBufferingDlg.h
public :
	CImage m_img; // 이미지를 불러오기 위한 CImage 객체.
	int m_nPos; // Horizontal Slider Control의 위치.
	float m_fHorizontalRatio; // Picture Control과 이미지와의 배율.

	void OnDrawImage(); // Double Buffering 그리는 작업.
	void DrawVerticalLine(CDC* pDC); // Double Buffering 내 Vertical Line을 그리는 작업.
	void DrawImage(CDC* pDC); // Double Buffering 내 이미지를 그리는 작업.

 

그리고 변수를 초기화 합니다.

// DoubleBufferingDlg.cpp
CDoubleBufferingDlg::CDoubleBufferingDlg(CWnd* pParent /*=NULL*/)
	: CDialogEx(IDD_DOUBLEBUFFERING_DIALOG, pParent)
{
	m_hIcon = AfxGetApp()->LoadIcon(IDR_MAINFRAME);

	m_nPos = 0;
	m_fHorizontalRatio = 0;
}

버튼을 더블 클릭하여 이벤트를 추가합니다.

이미지를 불러온 후 그려지는 Picture Control의 크기와 이미지의 크기 비율을 계산하여, 슬라이드 컨트롤의 범위를 지정합니다.

// DoubleBufferingDlg.cpp
void CDoubleBufferingDlg::OnBnClickedBtnLoadimage()
{
	// 이미지 불러오기.
	m_img.Load(_T("test.jpg"));

	// Picture Control 크기 얻기.
	CRect rect;
	GetDlgItem(IDC_PC_IMAGE)->GetClientRect(&rect);

	// Picture Control 가로 크기 & 이미지 가로 크기 비율 계산하기.
	m_fHorizontalRatio = (float)rect.Width() / m_img.GetWidth();

	// Slider Control의 범위 지정하기.
	CSliderCtrl* pCtrl = (CSliderCtrl*)GetDlgItem(IDC_HSL_VERTICALLINE);
	pCtrl->SetRange(0, m_img.GetWidth()*m_fHorizontalRatio);
	
	//Invalidate();
}

이번에는 더블 버퍼링으로 그리는 작업을 정의합니다.

// DoubleBufferingDlg.cpp
void CDoubleBufferingDlg::OnDrawImage()
{
	// Picture Control DC를 생성.
	CClientDC dc(GetDlgItem(IDC_PC_IMAGE));
	
	// Picture Control 크기를 얻는다.
	CRect rect;
	GetDlgItem(IDC_PC_IMAGE)->GetClientRect(&rect);

	CDC memDC;
	CBitmap *pOldBitmap, bitmap;

	// Picture Control DC에 호환되는 새로운 CDC를 생성. (임시 버퍼)
	memDC.CreateCompatibleDC(&dc);

	// Picture Control의 크기와 동일한 비트맵을 생성.
	bitmap.CreateCompatibleBitmap(&dc, rect.Width(), rect.Height());

	// 임시 버퍼에서 방금 생성한 비트맵을 선택하면서, 이전 비트맵을 보존.
	pOldBitmap = memDC.SelectObject(&bitmap);

	// 임시 버퍼에 검은색으로 채움.
	memDC.PatBlt(0, 0, rect.Width(), rect.Height(), BLACKNESS);

	// 임시 버퍼에 그리는 동작을 수행.
	DrawImage(&memDC);
	DrawVerticalLine(&memDC);

	// 임시 버퍼를 Picture Control에 그린다.
	dc.BitBlt(0, 0, rect.Width(), rect.Height(), &memDC, 0, 0, SRCCOPY);

	// 이전 비트맵으로 재설정.
	memDC.SelectObject(pOldBitmap);

	// 생성한 리소스 해제.
	memDC.DeleteDC();
	bitmap.DeleteObject();
}

DrawImage()와 DrawVerticalLine()도 정의합니다.

// DoubleBufferingDlg.cpp
void CDoubleBufferingDlg::DrawVerticalLine(CDC* pDC)
{
	CRect rect;
	GetDlgItem(IDC_PC_IMAGE)->GetClientRect(&rect);

	// 굵기 1, 빨간색, 실선 생성하기.
	CPen *pOldPen, pen;
	pen.CreatePen(PS_SOLID, 1, RGB(255, 0, 0));

	pOldPen = pDC->SelectObject(&pen);

	pDC->MoveTo(m_nPos, 0);
	pDC->LineTo(m_nPos, rect.Height());

	pDC->SelectObject(pOldPen);

	pen.DeleteObject();
}

void CDoubleBufferingDlg::DrawImage(CDC* pDC)
{
	CRect rect;
	GetDlgItem(IDC_PC_IMAGE)->GetClientRect(&rect);

	m_img.Draw(pDC->GetSafeHdc(), rect);
}

마지막으로, 'Ctrl+Shift+X' 또는 'Class Wizard'를 실행하여 'OnHScroll' 이벤트를 추가합니다.

그리고 다음과 같이 소스를 수정합니다.

// DoubleBufferingDlg.cpp
void CDoubleBufferingDlg::OnHScroll(UINT nSBCode, UINT nPos, CScrollBar* pScrollBar)
{
	CSliderCtrl* pCtrl = (CSliderCtrl*)GetDlgItem(IDC_HSL_VERTICALLINE);
	if (pScrollBar->GetSafeHwnd() == pCtrl->GetSafeHwnd())
	{
		m_nPos = pCtrl->GetPos();
		// OnPaint()에서 그리는 작업을 호출하는 경우.
		//Invalidate(FALSE);
		
		// 직접 Picture Control에 그리는 작업을 호출하는 경우.
		OnDrawImage();
	}

	CDialogEx::OnHScroll(nSBCode, nPos, pScrollBar);
}

모든 작업이 완료됐습니다. Build를 하고 실행해 볼까요?

 

OnPaint()에서 호출하는 경우

 

OnDrawImage()를 직접 호출하는 경우

 

혹시 차이점이 느껴지시나요?

OnPaint()에서 호출하게 되면 Picture Control 테두리가 리프레쉬(Refresh) 되는 것이 보입니다.

반면 OnDrawImage()를 직접 호출하게 되면 그런 문제가 전혀 없습니다.

 

보통 '그리는 작업'이라고 하면 OnPaint()에서 처리하라고 하는데요.

OnPaint()에서 그리는 작업을 호출하려면 Invalidate()를 호출해야 하는데,

이 경우 전체 컨트롤들에 영향을 주기 때문에 깜빡이는 현상이 발생할 수 있습니다.

그래서 저는 두 번째와 같이 그리는 함수를 직접 호출하는 편입니다.

DoubleBuffering.zip

다운로드