[GDI] C# GDI 탐구 - 마우스로 도형 그리기 - 1

도형 그리는 방법을 알아보았으니 이제 마우스로 클릭해서 드래그하면 그릴 수 있는 프로그램을 만들어보겠습니다.

화면은 앞의 포스팅에서와 같고 panel의 속성 창에서 마우스 이벤트를 추가해 줍니다. 

        private void panel1_MouseDown(object sender, MouseEventArgs e)
        {
 
        }
 
        private void panel1_MouseMove(object sender, MouseEventArgs e)
        {
 
        }
 
        private void panel1_MouseUp(object sender, MouseEventArgs e)
        {
 
        }

간략하게 설명을 해보면

Mouse Down : 시작 좌표를 설정하게 됩니다. 앞의 포스팅에서 언급한바와 같이 Rectangle을 그리려면 시작 좌표가 있어야 하므로..

Mouse Down과 동시에 해당 좌표를 가져와서 변수에 저장합니다.

MouseEventArgs 파라미터인 e에서 e.Location <- 요런식으로 위치를 가져옵니다.

또한 마우스가 Hold 됬다는 여부를 저장해야겠죠? bool 값인 isHold로 저장합니다.

MouseMove : 가장 까다로울 수도 있는 부분인데 이 부분에서는 지속적으로 크기가 변하는 사각형을 계속 그려주어야합니다.

마우스의 움직임에 따라서 사각형의 크기가 달라지니까 어찌보면 당연한 수순이겠죠?

그리는 도중이라면 isHold는 true입니다.

MouseUp : 그리기가 완료되는 시점입니다.

사각형의 크기가 정해지게 되는 지점이죠. Mouse Up 포인트를 가져와서 시작포인트와 비교하고

그 차이값(폭, 너비)를 사용해서 Rectangle을 지정할 수 있습니다.

마우스 사용을 다했으므로 isHold는 false 입니다.

자, 이제 순서대로 코딩을 해보겠습니다.

우선 Mouse Down부터

        private void panel1_MouseDown(object sender, MouseEventArgs e)
        {
            rect.Location = e.Location;
            isHold = true;  
        }

위에서 언급한바와 같이 rectangle에 시작위치를 지정해줍니다. 그리고 isHold = true로 설정하죠.

true로 설정하지 않으면 클릭하지 않은 상태인 때도 계속 사각형을 그리게됩니다.

        private void panel1_MouseMove(object sender, MouseEventArgs e)
        {
            if (isHold)            
            {
                int width = e.Location.X - rect.Location.X;
                int height = e.Location.Y - rect.Location.Y;
 
                rect.Width = width;
                rect.Height = height;
 
                panel1.Invalidate();
            }
        }

다음은 MouseMove입니다.

Hold가 된 상태에서 시작 위치와 현재 마우스 포인트의 위치를 비교해가면서 Rectangle의 폭과 너비를 계산하고

invalidate로 계속 그려줍니다.

마지막으로 MouseUp입니다.

        private void panel1_MouseUp(object sender, MouseEventArgs e)
        {
            int width = e.Location.X - rect.Location.X;
            int height = e.Location.Y - rect.Location.Y;
 
            rect.Width = width;
            rect.Height = height;
 
            isHold = false;
 
            panel1.Invalidate();
        }

마우스 업에서는 isHold를 false로 전환하여 그리기를 완료합니다.

일단 기본적인 구성은 위와 같구요.

만약 다른 도형을 그린다거나 하게 되면 추가적인 설정이 필요하겠군요.

다음포스팅에서는 저질러 놓은 버튼들을 마무리 해보겠습니다.