Win32_API_GDI로 자유곡선 그리기2(지우기/지우개 기능 추가)

서론

지난 글에서 MS사에서 제공하는 그림판처럼 일종의 Pen을 구현해서 자유롭게 선을 그려봤습니다.

그렇다면 사용자의 의도대로 자유롭게 그려진 선을 지우려면 어떻게 해야 될까요? 

크게 두 가지 방법이 있습니다.

1. 특정 동작이 이루어졌을 때 선택된 곳을 배경색으로 칠한다.
2. 특정 동작이 이루어졌을 때 선택된 곳의 선정보를 제거한다.

1번의 경우 간단하게 DC를 얻어 처리할 수 있지만, 무효화 영역이 발생했을 때 원하는 의도와 다르게 동작할 수 있습니다.

2번은 1번보다는 조금 복잡하지만 실제 기록된 그릴 정보를 제거함으로써 조금 더 원하는 의도대로 작동할 수 있습니다.

본문에서는 2번을 이용하여 지우기 기능을 추가해 보도록 하겠습니다.

 

지난 글의 소스코드를 이용하여 추가하도록 하겠습니다.

 

Win32_API - GDI로 자유 곡선 그리기 (마우스로 글씨 쓰기)

 

지우기 기능 개요

우선 지우기 기능을 조금 더 정리해서 생각해 보도록 합시다.

본문에서 구현할 지우개 기능을 정리하면 다음과 같습니다.

 

• 마우스 우클릭을 하면 지우기 (배경색으로 칠하기)
  • 마우스 우클릭 동작 메시지 처리 WM_RBUTTONDOWN:
    • 상태 코드 지우기 활성화
  • 마우스 우클릭 동작 후 움직이는 경우 연속적인 지우기 처리 WM_MOUSEMOVE:
    • 좌표를 받아 전체 저장된 정보에서 제거하기
  • 마우스 우클릭 동작이 끝나는 시점의 메시지 처리 WM_RBUTTONUP:
    • 상태 코드 지우기 해제
  • 그리기 과정에서의 수정

 

0. 상태 변수 확인 및 정의

지난 글에서 전역 변수 status를 통해 그리고 있는지 없는지 판단을 했습니다. 하나의 상태를 추가하기로 약속하도록 하겠습니다.

int status;  // 0:비활성화 1:그리기ON 2:지우기ON
std::vector<std::vector<POINT>> list; //그리기 정보가 담겨져 있는 vector

 

1. 마우스 우클릭 동작상태에 따른 처리 - WM_RBUTTONDOWN / WM_RBUTTONUP

• WM_RBUTTONDOWN

우클릭 동작시 마우스 상태 변수를 처리해주며, 해당 좌표를 받아 전체 등록되어 있는 그리기 저장 좌표에서 값을 제거해 줍니다.

    case WM_RBUTTONDOWN:
    {
        //마우스 상태 활성화
        status = 2;
        //지우는 좌표 받아오기
        POINT pos;
        pos.x = GET_X_LPARAM(lParam);
        pos.y = GET_Y_LPARAM(lParam);

        //전체 리스트에서 지우는 좌표 제거하기

                //전체 리스트를 확인하여 지우는 좌표와 일치하는 값 제거하기
                for (int i = 0; i < list.size(); i++)
                {
                    for (int j = 0; j < list[i].size(); j++)
                    {
                        POINT erasepos = list[i].at(j);
                        if (erasepos.y-5 <= pos.y && pos.y  <= erasepos.y + 5 && erasepos.x - 5 <= pos.x && pos.x <= erasepos.x + 5)
                        {
                            //특정 값으로 블랭크 처리
                            (list[i])[j].x = -999;
                            (list[i])[j].y = -999;

                        }
                    }
                }
        break;
    }

• WM_RBUTTONUP

우클릭 동작이 끝난다면 상태 변수를 비활성화해주도록 합시다.

    case WM_RBUTTONUP:
    {
        status = 0;
        break;
    }

 

2. 마우스 움직이는 과정에서 연속적인 지우기 - WM_MOUSEMOVE

우클릭을 한 상태에서 마우스를 움직이면 연속적으로 지우기 기능이 작동되어야 합니다. 

정확히는 지운 다기보다 해당 영역을 안 그릴 수 있게 표시를 하는 것입니다.

    case WM_MOUSEMOVE:
    {
        //만약 좌클릭중인 상태이면
        if (status == 1)
        {
            //좌표를 받아서 값을 추가합니다.
            POINT pos;
            pos.x = GET_X_LPARAM(lParam);
            pos.y = GET_Y_LPARAM(lParam);
            list[list.size()-1].push_back(pos);
        }

        //만약 우클릭중인 상태이면
        if (status == 2)
        {
            POINT pos;
                pos.x = GET_X_LPARAM(lParam);
                pos.y = GET_Y_LPARAM(lParam);

                //전체 리스트를 확인하여 지우는 좌표와 일치하는 값 제거하기
                for (int i = 0; i < list.size(); i++)
                {
                    for (int j = 0; j < list[i].size(); j++)
                    {
                        POINT erasepos = list[i].at(j);
                        if (erasepos.y - 5 <= pos.y && pos.y <= erasepos.y + 5 && erasepos.x - 5 <= pos.x && pos.x <= erasepos.x + 5)
                        {
                            //특정 값으로 블랭크 처리
                            (list[i])[j].x = -999;
                            (list[i])[j].y = -999;

                        }
                    }
                }
        }
        //이후 그리기 갱신
        InvalidateRect(hWnd, NULL, FALSE);
        UpdateWindow(hWnd);
        break;
    }

3. 그리기 과정 수정

자유로운 곡선을 그리기 위해서 등록된 배열에서 연속적으로 데이터를 받아서 한 땀 한 땀 그려냈습니다.

하지만 지금처럼 특정 값들을 지우게 되면 해당 부분들을 연속적으로 그릴 수 없게 됩니다.

때문에 하나의 트리거를 추가해 주도록 합시다.

 

    case WM_PAINT:
        {
            PAINTSTRUCT ps;
            hdc = BeginPaint(hWnd, &ps);

            //메모리에 DC 가지고 생성
            HDC memdc = CreateCompatibleDC(hdc);
            //현재 윈도우 창 크기 받아오기
            RECT rect; 
            GetClientRect(hWnd, &rect);

            // !! 더블 버퍼링 사용 !!
            //메모리에 윈도우 창과 동일한 그기에 그릴수 있도록 셋팅하기 
            HBITMAP memBitmap = CreateCompatibleBitmap(memdc, rect.right, rect.bottom);
            //HBITMAP또한 하나의 그리기 도구이므로 선택하기 및 예전 그리기 도구 저장
            HBITMAP oldBitmap = (HBITMAP)SelectObject(memdc, memBitmap);
            //가상공간 그리는 공간 백그라운드 컬러 설정해주기
            FillRect(memdc, &rect, (HBRUSH)GetStockObject(WHITE_BRUSH));
            //메모리공간에 그림 그리기

            //vector에 저장된 좌표정보로 계속해서 그리기 
            for (int i = 0; i < list.size(); i++)
            {
                // n번째 vector에서 초기 값 받아오기 
                POINT st_pos = list[i].at(0);

                //2중 반복문을 통해 계속해서 vector의 다음값 받아오기 and 다음 값을 시작값으로 저장
                for (int j = 0; j < list[i].size(); j++)
                {


                    POINT next_pos = list[i].at(j);
                    //**!!! 트리거 추가 !!!!!
                    if (st_pos.x == -999 && st_pos.y == -999 || next_pos.x == -999 && next_pos.y == -999) 
                    {
                        st_pos = next_pos;
                        continue;
                    }
                    MoveToEx(memdc, st_pos.x, st_pos.y, NULL);
                    LineTo(memdc, next_pos.x, next_pos.y);
                    st_pos = next_pos;
                }
            }
            //넘겨주고자 하는 메인 윈도우로 전달하기 (메모리공간 그림 --> 메인 화면)
            BitBlt(hdc, 0, 0, rect.right, rect.bottom, memdc, 0, 0, SRCCOPY);
            //생성해둔 메모리 공간 제거
            SelectObject(memdc,oldBitmap);
            DeleteObject(memBitmap);
            DeleteDC(memdc);
            EndPaint(hWnd, &ps);
        }
        break;

 

전체 소스코드 및 결과

지우기 기능을 추가하여 구현한 소스코드 및 결과 화면입니다.

// Windows 헤더 파일
#include <windows.h>
// C 런타임 헤더 파일입니다.
#include <stdlib.h>
#include <malloc.h>
#include <memory.h>
#include <tchar.h>
#include <Windowsx.h>
#include <vector>
#include <algorithm>







// 전역 변수:
HINSTANCE hInst;                                // 현재 인스턴스입니다.
//그리기를 상태를 파악하기 위한변수
int status;  // 0:비활성화 1:그리기ON 2:지우기ON
std::vector<std::vector<POINT>> list; //그리기 정보가 담겨져 있는 vector
// 이 코드 모듈에 포함된 함수의 선언을 전달합니다:
LRESULT CALLBACK    WndProc(HWND, UINT, WPARAM, LPARAM);
int APIENTRY wWinMain(_In_ HINSTANCE hInstance,
                     _In_opt_ HINSTANCE hPrevInstance,
                     _In_ LPWSTR    lpCmdLine,
                     _In_ int       nCmdShow)
{

    //윈도우 창 구조체 정의 및 적용
    WNDCLASSEXW wcex;
    wcex.cbSize = sizeof(WNDCLASSEX);
    wcex.style = CS_HREDRAW | CS_VREDRAW;
    wcex.lpfnWndProc = WndProc;
    wcex.cbClsExtra = 0;
    wcex.cbWndExtra = 0;
    wcex.hInstance = hInstance;
    wcex.hIcon = NULL;
    wcex.hCursor = LoadCursor(nullptr, IDC_ARROW);
    wcex.hbrBackground = (HBRUSH)(COLOR_WINDOW + 1);
    wcex.lpszMenuName = NULL;
    wcex.lpszClassName = L"Test";
    wcex.hIconSm = NULL;
    RegisterClassExW(&wcex);
    //적용한 윈도우 생성 및 업데이트
    hInst = hInstance; // 인스턴스 핸들을 전역 변수에 저장합니다.
    HWND hWnd = CreateWindowW(L"Test", L"Test", WS_OVERLAPPEDWINDOW,
        CW_USEDEFAULT, 0, CW_USEDEFAULT, 0, nullptr, nullptr, hInstance, nullptr);
    if (!hWnd)
    {
        return FALSE;
    }
    ShowWindow(hWnd, nCmdShow);
    UpdateWindow(hWnd);
    MSG msg;
    // 기본 메시지 루프입니다:
    while (GetMessage(&msg, nullptr, 0, 0))
    {
            TranslateMessage(&msg);
            DispatchMessage(&msg);
    }
    return (int) msg.wParam;
}

LRESULT CALLBACK WndProc(HWND hWnd, UINT message, WPARAM wParam, LPARAM lParam)
{
    HDC hdc;
    switch (message)
    {
    case WM_CREATE:
        break;
    case WM_PAINT:
        {
            PAINTSTRUCT ps;
            hdc = BeginPaint(hWnd, &ps);

            //메모리에 DC 가지고 생성
            HDC memdc = CreateCompatibleDC(hdc);
            //현재 윈도우 창 크기 받아오기
            RECT rect; 
            GetClientRect(hWnd, &rect);

            // !! 더블 버퍼링 사용 !!
            //메모리에 윈도우 창과 동일한 그기에 그릴수 있도록 셋팅하기 
            HBITMAP memBitmap = CreateCompatibleBitmap(memdc, rect.right, rect.bottom);
            //HBITMAP또한 하나의 그리기 도구이므로 선택하기 및 예전 그리기 도구 저장
            HBITMAP oldBitmap = (HBITMAP)SelectObject(memdc, memBitmap);
            //가상공간 그리는 공간 백그라운드 컬러 설정해주기
            FillRect(memdc, &rect, (HBRUSH)GetStockObject(WHITE_BRUSH));
            //메모리공간에 그림 그리기

            //vector에 저장된 좌표정보로 계속해서 그리기 
            for (int i = 0; i < list.size(); i++)
            {
                // n번째 vector에서 초기 값 받아오기 
                POINT st_pos = list[i].at(0);

                //2중 반복문을 통해 계속해서 vector의 다음값 받아오기 and 다음 값을 시작값으로 저장
                for (int j = 0; j < list[i].size(); j++)
                {


                    POINT next_pos = list[i].at(j);
                    //**!!! 트리거 추가 !!!!!
                    if (st_pos.x == -999 && st_pos.y == -999 || next_pos.x == -999 && next_pos.y == -999) 
                    {
                        st_pos = next_pos;
                        continue;
                    }
                    MoveToEx(memdc, st_pos.x, st_pos.y, NULL);
                    LineTo(memdc, next_pos.x, next_pos.y);
                    st_pos = next_pos;
                }
            }
            //넘겨주고자 하는 메인 윈도우로 전달하기 (메모리공간 그림 --> 메인 화면)
            BitBlt(hdc, 0, 0, rect.right, rect.bottom, memdc, 0, 0, SRCCOPY);
            //생성해둔 메모리 공간 제거
            SelectObject(memdc,oldBitmap);
            DeleteObject(memBitmap);
            DeleteDC(memdc);
            EndPaint(hWnd, &ps);
        }
        break;
    case WM_MOUSEMOVE:
    {
        //만약 좌클릭중인 상태이면
        if (status == 1)
        {
            //좌표를 받아서 값을 추가합니다.
            POINT pos;
            pos.x = GET_X_LPARAM(lParam);
            pos.y = GET_Y_LPARAM(lParam);
            list[list.size()-1].push_back(pos);
        }

        //만약 우클릭중인 상태이면
        if (status == 2)
        {
            POINT pos;
                pos.x = GET_X_LPARAM(lParam);
                pos.y = GET_Y_LPARAM(lParam);

                //전체 리스트를 확인하여 지우는 좌표와 일치하는 값 제거하기
                for (int i = 0; i < list.size(); i++)
                {
                    for (int j = 0; j < list[i].size(); j++)
                    {
                        POINT erasepos = list[i].at(j);
                        if (erasepos.y - 5 <= pos.y && pos.y <= erasepos.y + 5 && erasepos.x - 5 <= pos.x && pos.x <= erasepos.x + 5)
                        {
                            //특정 값으로 블랭크 처리
                            (list[i])[j].x = -999;
                            (list[i])[j].y = -999;

                        }
                    }
                }
        }
        //이후 그리기 갱신
        InvalidateRect(hWnd, NULL, FALSE);
        UpdateWindow(hWnd);
        break;
    }
    case WM_LBUTTONDOWN:
    {
        //마우스 상태 활성화
        status = 1;
        //시작 좌표 저장
        POINT pos;
        pos.x = GET_X_LPARAM(lParam);
        pos.y = GET_Y_LPARAM(lParam);
        std::vector<POINT> tempv;
        list.push_back(tempv);
        list[list.size()-1].push_back(pos);

        //tempvector 제거 
        tempv.clear();
        std::vector<POINT>().swap(tempv);
        break;
    }
    case WM_LBUTTONUP:
    {
        status = 0;
        break;
    }
    case WM_RBUTTONDOWN:
    {
        //마우스 상태 활성화
        status = 2;
        //지우는 좌표 받아오기
        POINT pos;
        pos.x = GET_X_LPARAM(lParam);
        pos.y = GET_Y_LPARAM(lParam);

        //전체 리스트에서 지우는 좌표 제거하기

        //전체 리스트를 확인하여 지우는 좌표와 일치하는 값 제거하기
        for (int i = 0; i < list.size(); i++)
        {
            for (int j = 0; j < list[i].size(); j++)
            {
                if (list[i].at(j).y == pos.y && list[i].at(j).x  == pos.x)
                {
                    list[i].erase(list[i].begin() + j);
                }
            }
        }
        break;
    }
    case WM_RBUTTONUP:
    {
        status = 0;
        break;
    }

    case WM_DESTROY:
        PostQuitMessage(0);
        break;
    default:
        return DefWindowProc(hWnd, message, wParam, lParam);
    }
    return 0;
}

문제점

위처럼 구현을 하면 하나의 문제점이 발생합니다. 바로 빠른 속도로 그린 그림은 구현한 소스코드로는 지울 수 없습니다. 

이유는 WM_MOUSEMOVE 메시지를 처리하면서 list에 좌표 정보를 입력하는 과정이 1픽셀 단위로 저장되지 않기 때문입니다.

이 방법을 어떻게 극복해야 될지 생각해 보도록 합시다.