18장 그래픽 다루기

1. 18장 그래픽 다루기

2. 이번 강의에서 배울 내용 • 그래픽 객체의 이해 • 펜 다루기 • 시스템 컬러 사용하기 • 직사각형 다루기 • 도형 그리기 • 텍스트 그리기 • 폼의 그래픽 유지

3. Graphics 객체 이해하기 • GDI(Graphics Device Interface) • 텍스트, 선, 도형을 포함하여 화면에 그려지는 모든 것들을 처리하는 Windows 운영체제 내의 코드 • 응용 프로그램뿐만 아니라 Windows 자체로부터 전달받은 모든 그리기 명령을 처리하여 현재 화면에 대한 보여주는 결과를 만들어줌 • GDI에게 어떤 내용을 출력하도록 알려주는 코드만 작성하면, GDI가 결과물을 만들 때 필요한 모든 일들을 대신 처리해줌 • 특정 디스플레이 장치와 상관없는 독립적인 코드를 사용하여 GDI에게 텍스트와 그래픽을 출력하도록 지시(장치독립적:Device Independence) • Graphics 객체를 통해 GDI와 통신하는 기본 흐름 • Graphics 객체에 대한 참조를 저장하기 위해, 객체 변수 생성 • 유효한 Graphics 객체(새로운 또는 기존의)를 객체 변수에 지정 • Graphics 객체의 메서드를 호출하여 그림을 그리거나 출력.

4. 폼이나 컨트롤의 Graphics 객체 만들기 • 폼이나 컨트롤에 직접 그림을 그리고자 하는 경우, 원하는 객체의 CreateGraphics() 메서드 호출 • 텍스트 상자에 그림을 그리는 Graphics 객체를 생성하는 코드 System.Drawing.Graphics objGraphics; objGraphics = this.textBox1.CreateGraphics();

5. 새로운 비트맵의 Graphics 객체 만들기 • 메모리에만 저장되는 새로운 비트맵 작성을 위해 Graphics 객체 사용하기 Bitmapvariable = new Bitmap(width, height, pixelformat); • Width, height : 비트맵의 너비와 높이 • Pixelformat의 값 objMyBitMap = new Bitmap(640, 480, System.Drawing.Imaging.PixelFormat.Format24bppRgb); ‘ 640*480픽셀의 24비트 비트맵 생성

6. 펜 사용하기 • 펜(pen) : 선의 특성을 정의하는 객체 • 펜을 만드는 형식 penvariable = new Pen(color, width); • DashStyle 속성 : 펜의 모양의 정하는 속성 • 펜 만들기 코드 예제(어두운 파란색의 점선이고, 두께가 3인 펜) Pen objMyPen = new Pen(System.Drawing.Color.DarkBlue, 3); objMyPen.DashStyle = System.Drawing.Drawing2D.DashStyle.Dot; • Visual C#의 표준 펜 사용 : System.Drawing.Pens 클래스 사용

7. 시스템 컬러 사용하기 • 시스템 컬러 : Windows 인터페이스 요소의 색상 • 바탕화면에서 마우스 오른쪽 버튼 누르고 단축 메뉴에서 [속성] 선택 • [디스플레이 등록 정보] 대화상자에서, [화면 배색] 탭 클릭 • 특정 항목의 색상을 바꾸려면 [고급] 버튼을 클릭하고, 변경하고자 하는 색을 선택하고 새로운 색 지정 • 자신이 작성하는 프로그램의 인터페이스 색을 시스템 색과 일치하도록 하려면 원하는 항목의 색상 속성에 시스템 색 지정

8. 시스템 색

9. 직사각형 다루기 • 직사각형 : 도형을 그릴 때 사용하는 경계 좌표를 저장하는 구조 • 도형 그리기 메서드에 지정하는 직사각형은 도형의 경계 정의 • 원하는 도형(원, 타원 등)이 직사각형 경계 내에서 그려짐

10. Rectangle 사용 예제 • 왼쪽 상단 모서리 좌표가 0,0이고 너비와 높이가 각각 100, 50인 Rectangle 생성 Rectangle rectBounding = new Rectangle(); rectBounding.X = 0; rectBounding.Y = 0; rectBounding.Width = 100; rectBounding.Height = 50; • 구조를 초기화할 때, X, Y, Height, Width 값을 함께 지정 Rectangle rectBounding = new Rectangle(0,0,100,50); • Rectangle을 확대 또는 축소하기 : Inflate 메서드 사용 object.Inflate(changeinwidth, changeinheight);

11. 도형 그리기 • 선 그리기 object.DrawLine(pen, x1, y1, x2, y2); • 사각형 그리기 object.DrawRectangle(pen, rectangle); object.DrawRectangle(pen, X, Y, width, height); • 원과 타원 그리기 object.DrawEllipse(pen, rectangle); object.DrawEllipse(pen, X, Y, Width, Height); • 그리기 표면 지우기 objGraphics.Clear(Drawing.SystemColors.Control);

12. 텍스트 그리기 • Drawstring 메서드 사용 기본 형식 object.DrawString(stringoftext, font, brush, topX, leftY); • Brush 객체 : 텍스트 내부의 채우기 특성 정의 • System.Drawing.Brushes 클래스의 표준 브러쉬 사용 가능 • Font 객체 : 글꼴종류, 크기, 스타일 등 텍스트 형식의 특성 정의 • 글꼴 정의 Font objFont; objFont = new System.Drawing.Font("Arial", 30); 또는 objFont = new System.Drawing.Font("Arial Black", 30, FontStyle.Bold | FontSytle.Italic); • 텍스트 출력 예제 objGraphics.DrawString("이것은 출력할 문장입니다.", this.Font, System.Drawing.Brushes.Blue, 0, 0);

13. 폼에 그래픽 유지하기 • 사용자가 폼을 최소화하거나 다른 창으로 폼을 일부 가리고 나서, 폼을 다시 표시해보면 앞에서 가려졌던 모든 그래픽 요소들이 사라짐 • 폼의 그래픽 내용을 계속해서 유지하는 방법 • 폼에 그림을 그리는 모든 코드를 폼의 Paint 이벤트에 입력 • 메모리 비트맵에 그림을 그려놓고, 폼의 Paint 이벤트에서 메모리 비트맵의 내용을 폼에 복사

14. Graphics 프로젝트 예제 • 사용자가 버튼을 클릭하면 텍스트 상자의 내용이 폼에서 임의의 위치와 임의의 글꼴 크기로 그려지도록 하는 프로젝트 예제 • Persisting Graphics라는 제목으로 새로운 Windows 응용 프로그램 생성 • 솔루션 탐색기에서 Form1.cs 이름을 frmMain.cs로 바꾸고, 폼의 Text 속성에는 Persisting Graphics Example이라고 입력 • 폼에 텍스트 상자 추가하고, 속성을 다음과 같이 설정 • 폼에 버튼을 추가하고, 속성을 다음과 같이 설정 텍스트 상자 속성 버튼 속성

15. 폼을 더블클릭하고, Form_Load 프로시저 선언부 앞에 다음 코드 입력 private Bitmap m_objDrawingSurface; • 커서를 Load 이벤트 내부로 이동하여 다음 코드 입력 // 폼의 사용자 영역과 같은 크기의 그리기 표면을 만든다. m_objDrawingSurface = new Bitmap(this.ClientRectangle.Width, this.ClientRectangle.Height, System.Drawing.Imaging.PixelFormat.Format24bppRgb); InitializeSurface();

16. frmMain_Load 이벤트의 닫기 괄호 다음으로 옮기고 <Enter>를 눌러 새 행을 만든다. 다음 문장을 입력한다. private void InitializeSurface() { Graphics objGraphics; Rectangle rectBounds; // 비트맵을 참조하는 Graphics 객체를 생성하고 Clear한다. objGraphics = Graphics.FromImage(m_objDrawingSurface); objGraphics.Clear(SystemColors.Control); // 비트맵과 동일한 크기의 직사각형을 만든다. rectBounds = new Rectangle(0, 0, m_objDrawingSurface.Width,m_objDrawingSurface.Height); // 직사각형을 약간 줄인다. 그렇게 하지 않으면 타원의 경계가 보이지 않을 수 있다. rectBounds.Inflate(-1, -1); // 폼에 맞는 타원을 그린다. objGraphics.DrawEllipse(Pens.Orange, rectBounds); // 자원을 해제한다. objGraphics.Dispose(); }

17. 속성 창에서 이벤트를 클릭하고 Paint를 더블클릭하여 새 Paint 이벤트 프로시저를 만든다. 다음 코드를 Paint 이벤트에 입력한다. // 비트맵의 내용을 폼에 그린다. e.Graphics.DrawImage(m_objDrawingSurface, 0, 0, m_objDrawingSurface.Width, m_objDrawingSurface.Height); e.Graphics.Dispose();

18. 폼 디자이너로 돌아가서 버튼을 더블클릭하고 Click 이벤트에 다음 코드 추가 Graphics objGraphics; Font objFont; int intFontSize, intTextX, intTextY; Random randomGenerator = new Random(); // 입력한 텍스트가 없으면 빠져나간다. if (txtInput.Text == "") return; // 메모리 비트맵을 사용하여 Graphics 객체를 생성한다. objGraphics = Graphics.FromImage(m_objDrawingSurface); // 폰트 크기를 위한 임의의 숫자를 만든다. 8과 48 사이의 값을 유지한다. intFontSize = randomGenerator.Next(8,48); // 텍스트의 X 좌표를 위한 임의의 숫자를 만든다. intTextX = randomGenerator.Next(0,this.ClientRectangle.Width); // 텍스트의 Y 좌표를 위한 임의의 숫자를 만든다. intTextY = randomGenerator.Next(0,this.ClientRectangle.Height); // 새 폰트 객체를 생성한다. objFont = new System.Drawing.Font("Arial", intFontSize, FontStyle.Bold); // 사용자의 텍스트를 그린다. objGraphics.DrawString(txtInput.Text, objFont, System.Drawing.Brushes.Red, intTextX, intTextY); // 해제한다. objGraphics.Dispose(); // 폼을 강제로 다시 그린다. Paint 이벤트가 발생한다. this.Invalidate();

19. 예제 실행 결과 • 코드에서 Invalidate() 메서드는 클라이언트의 Rectangle 영역을 무효화시킴 • 폼의 모습이 잘못되었으므로, 폼을 다시 그려야 한다고 Windows에게 알려주는 역할 • <F5> 눌러서 프로젝트 실행