Untitled

Color Picker (SDI에서 Dialog 로 나타낸 것)

위의 그림은 컬러 선택을 위한 셀프 드로잉 컨트롤입니다. CodeGuru에도 있구, 비주얼 C++ 6 완벽가이드 책에도 나와있더군요. 거긴 다이얼로그 베이스로 만들어져 있었는데 그걸 SDI에서 모달 다이얼로그 박스로 출력되게 만들어 보았습니다. 뭐 같은 거니까 바꾸는 건 간단하지요..

1. 우선 소스를 받습니다. 예제 소스도 있어요.. ColorPicker.h / cpp, ColorPopup.h / cpp 이렇게 4개의 파일이 들어있습니다. 그리고는 복사해 넣은 다음에 프로젝트에 추가...

2. 컬러 선택을 할 다이얼로그를 하나 만듭니다. 다이얼로그 ID 는 IDD_COLORDLG 로 하기로 하죠.

3. 위의 그림처럼 다이얼로그 위에다 컨트롤들을 배치합니다.
간단히 설명하자면 우선 제일 위에 Static Text 컨트롤이 위치하고, 그 오른쪽에 셀프 드로잉 컨트롤로 둔갑할 버튼 컨트롤을 하나 둡니다. 보이기엔 콤보박스 비스무레하게 보이지만 버튼이 둔갑한 겁니다. 아래를 Group Box로 감싸고 그 안 왼쪽에는 picture 컨트롤을 놓고, 오른쪽에는 RGB를 표시할 Static Text와 Edit Box를 3개씩 놓습니다.

Button Control - ID : IDC_COLORPICK   캡션 : 컬러 선택
Group Box       - ID : IDC_STATIC          캡션 : 선택된 컬러
Picture Control - ID : IDC_FRAME
Static Control   - ID : IDC_STATIC          캡션 : RED :
                          ID : IDC_STATIC          캡션 : GREEN:
                          ID : IDC_STATIC          캡션 : BLUE:
Edit Box          - ID : IDC_RED , IDC_GREEN ,   IDC_BLUE

4. 컨트롤들을 다 올려놓았으면 이 다이얼로그 박스에 연결될 클래스를 만듭니다. 클래스 이름은 CColorPickerDlg 라고 하죠. 그리고는 다이얼로그 헤더파일의 위에 #include "ColorPicker.h" 를 써넣어 줍니다.

5. 클래스 위저드를 사용해서 컨트롤들을 변수와 연결시켜 줍니다. Edit Box들은 각각 int 형 m_nRed, m_nGreen, m_nBlue 로 정해준 후, 최소값 0, 최대값 255로 정해줍니다. 그런 다음 버튼 컨트롤은 우선 CButton 형으로 하고, m_ctrlColorPicker 라는 변수이름을 주죠. 그리고는 ColorPickerDlg.h 파일을 열어

CButton m_ctrlColorPicker; ---> CColorPicker m_ctrlColorPicker

로 바꾸어 줍니다. 여기까지만 하고 컴파일하면 컬러 선택 컨트롤을 볼 수 있습니다. 물론 CView 같은 다른 클래스에서 이 다이얼로그를 DoModal() 같은 함수를 써서 불러 주어야만 하겠지요..

6. 컨트롤 초기화

컬러 선택 컨트롤에는 SetDefaultText, SetCustomText 라는 함수가 있는데, 이건 컬러 선택 컨트롤의 아래위로 출력될 문자열을 지정할 수 있습니다.

클래스 위저드에서 CColorPickerDlg 클래스의 WM_INITDIALOG 메시지를 오버라이딩 합니다.

BOOL CColorPickerDlg::OnInitDialog()
{
        CDialog::OnInitDialog();

        // TODO: Add extra initialization here
        m_ctrlColorPicker.SetDefaultText("자동");
        m_ctrlColorPicker.SetCustomText("다른 색");

return TRUE; // return TRUE unless you set the focus to a control
// EXCEPTION: OCX Property Pages should return FALSE
}

7. 컬러 선택 컨트롤에 입력된 값을 얻어내기 위해 CColorPickerDlg 클래스에 COLORREF 형 m_crColor 변수를 선언합니다.

8. ColorPickerDlg 함수의 다음 부분을 고칩니다. 컬러 값 초기화와 컬러 선택 콘트롤과의 연결을 위한 코드입니다. DDX_ColorPicker 함수는 MFC에서 지원하는 함수가 아니고, 따로 만들어준 함수입니다.

CColorPickerDlg::CColorPickerDlg(CWnd* pParent /*=NULL*/)
        : CDialog(CColorPickerDlg::IDD, pParent)
{
        //{{AFX_DATA_INIT(CColorPickerDlg)
        m_nRed = 255;
        m_nGreen = 255;
        m_nBlue = 0;
        //}}AFX_DATA_INIT
        m_crColor = RGB(m_nRed, m_nGreen, m_nBlue);
}

void CColorPickerDlg::DoDataExchange(CDataExchange* pDX)
{
        CDialog::DoDataExchange(pDX);
        //{{AFX_DATA_MAP(CColorPickerDlg)
        DDX_Control(pDX, IDC_COLORPICK, m_ctrlColorPicker);
        DDX_Text(pDX, IDC_RED, m_nRed);
        DDV_MinMaxInt(pDX, m_nRed, 0, 255);
        DDX_Text(pDX, IDC_GREEN, m_nGreen);
        DDV_MinMaxInt(pDX, m_nGreen, 0, 255);
        DDX_Text(pDX, IDC_BLUE, m_nBlue);
        //}}AFX_DATA_MAP
        DDX_ColorPicker(pDX, IDC_COLORPICK, m_crColor);
}

9. 컬러 선택 컨트롤은 상황에 따라 다음과 같은 통지 메시지를 발생시킵니다.

CPN_SELCHANGE : 선택 컬러가 바뀔 때
CPN_DROPDOWN : 드롭 다운 윈도우가 출력될 때
CPN_CLOSEUP : 드롭 다운 윈도우가 닫힐 때
CPN_SELENDOK : 새로운 컬러가 선택되었을 때
CPN_SELENDCANCEL : 컬러 선택이 취소되었을 때

여기서는 컬러 선택 컨트롤과 에디트 박스의 값이 바뀌었을 때 서로서로 값을 바꾸어 주기 위해 통지 메시지를 처리합니다. 에디트 박스의 통지메시지는 클래스 위저드에서 처리할 수 있지만 컬러 선택 컨트롤은 클래스 위저드에서 지원하지 않으므로 직접 코드를 써 주어야 합니다.

클래스 위저드를 열어 에디트 박스 3개(IDC_RED, IDC_GREEN, IDC_BLUE)의 EN_CHANGE 메시지를 처리하고, 컬러 선택 컨트롤을 처리한 코드는 우선 다음과 같습니다.

<ColorPickerDlg.h 에서>

...................

// Implementation
protected:

        // Generated message map functions
        //{{AFX_MSG(CColorPickerDlg)
        virtual BOOL OnInitDialog();
        afx_msg void OnChangeRed();
        afx_msg void OnChangeGreen();
        afx_msg void OnChangeBlue();
        //}}AFX_MSG
        DECLARE_MESSAGE_MAP()
};
....................

<ColorPickerDlg.cpp 에서>

.............

BEGIN_MESSAGE_MAP(CColorPickerDlg, CDialog)
        //{{AFX_MSG_MAP(CColorPickerDlg)
        ON_EN_CHANGE(IDC_RED, OnChangeRed)
        ON_EN_CHANGE(IDC_GREEN, OnChangeGreen)
        ON_EN_CHANGE(IDC_BLUE, OnChangeBlue)
        //}}AFX_MSG_MAP
        END_MESSAGE_MAP()
..............

이 코드를 다음과 같이 고칩니다.

<ColorPickerDlg.h 에서>

...................

// Implementation
protected:

        // Generated message map functions
        //{{AFX_MSG(CColorPickerDlg)
        virtual BOOL OnInitDialog();
        afx_msg void OnChangeEdit();
        //}}AFX_MSG
        DECLARE_MESSAGE_MAP()
};
....................

<ColorPickerDlg.cpp 에서>

.............

BEGIN_MESSAGE_MAP(CColorPickerDlg, CDialog)
        //{{AFX_MSG_MAP(CColorPickerDlg)
        ON_EN_CHANGE(IDC_RED, OnChangeEdit)
        ON_EN_CHANGE(IDC_GREEN, OnChangeEdit)
        ON_EN_CHANGE(IDC_BLUE, OnChangeEdit)
        //}}AFX_MSG_MAP
        ON_MESSAGE(CPN_SELENDOK, OnSelChange)
        // 직접 추가한 부분
END_MESSAGE_MAP()
..............

10. 직접 추가한 ON_MESSAGE의 핸들러를 CColorPickerDlg 클래스의 멤버함수처럼 추가합니다. --> LRESULT OnSelChange(WPARAM wParam, LPARAM lParam)

OnChangeEdit의 핸들러도 입력하구요.

그리고 CColorPickerDlg 클래스에 UpdateSelColor() 함수를 추가하고, 클래스 위저드를 사용하여 WM_PAINT 메시지를 오버라이딩합니다. 코드는 다음과 같습니다.

// 편집 박스 컨트롤의 내용이 바뀐 경우
void CColorPickerDlg::OnChangeEdit()
{
        // 편집 박스 컨트롤에 설정된 값 얻기
        if(UpdateData()) {
                // 컬러 선택 컨트롤에 값 설정
                m_crColor = RGB(m_nRed, m_nGreen, m_nBlue);

                // 화면 갱신
                UpdateData(FALSE);
                UpdateSelColor();
        }
}

// 컬러 선택 컨트롤에 설정된 값이 바뀐 경우
LRESULT CColorPickerDlg::OnSelChange(WPARAM wParam, LPARAM lParam)
{
        // 컬러 선택 컨트롤에 설정된 값 얻기
        UpdateData();
        m_nRed = GetRValue(m_crColor);
        m_nGreen = GetGValue(m_crColor);
        m_nBlue = GetBValue(m_crColor);

        // 화면 갱신
        UpdateData(FALSE);
        UpdateSelColor();
        return 0L;
}

void CColorPickerDlg::UpdateSelColor()
{
        CRect rect;
        GetDlgItem(IDC_FRAME)->GetWindowRect(&rect);
        ScreenToClient(&rect);
        InvalidateRect(rect, FALSE);
}

void CColorPickerDlg::OnPaint()
{
        CPaintDC dc(this); // device context for painting

        // TODO: Add your message handler code here
        CRect rect;
        GetDlgItem(IDC_FRAME)->GetWindowRect(&rect);
        ScreenToClient(&rect);

CBrush brush;
brush.CreateSolidBrush(m_crColor);

dc.FillRect(&rect, &brush);

// Do not call CDialog::OnPaint() for painting messages
}

11. 뷰에서 DoModal 함수를 불러서 실행시키거나 하며 잘 뜰 겁니다. 필요하다면 여기서 CColorPicker, CCoorPopup, CColorPickerDlg 클래스를 갤러리에 추가해 넣고 필요할 때마다 추가해 써도 편하겠죠..