18 장 그래픽 다루기

이번 강의에서 배울 내용

• 그래픽 객체의 이해 • 펜 다루기 • 시스템 컬러 사용하기 • 직사각형 다루기 • 도형 그리기 • 텍스트 그리기 • 폼의 그래픽 유지

Graphics 객체 이해하기

• GDI(Graphics Device Interface)– 텍스트 , 선 , 도형을 포함하여 화면에 그려지는 모든 것들을 처리하는 Wi

ndows 운영체제 내의 코드– 응용 프로그램뿐만 아니라 Windows 자체로부터 전달받은 모든 그리기

명령을 처리하여 현재 화면에 대한 보여주는 결과를 만들어줌– GDI 에게 어떤 내용을 출력하도록 알려주는 코드만 작성하면 , GDI 가

결과물을 만들 때 필요한 모든 일들을 대신 처리해줌– 특정 디스플레이 장치와 상관없는 독립적인 코드를 사용하여 GDI 에게

텍스트와 그래픽을 출력하도록 지시 ( 장치독립적 :Device Independence)• Graphics 객체를 통해 GDI 와 통신하는 기본 흐름

– Graphics 객체에 대한 참조를 저장하기 위해 , 객체 변수 생성– 유효한 Graphics 객체 ( 새로운 또는 기존의 ) 를 객체 변수에 지정– Graphics 객체의 메서드를 호출하여 그림을 그리거나 출력 .

폼이나 컨트롤의 Graphics 객체 만들기

• 폼이나 컨트롤에 직접 그림을 그리고자 하는 경우 , 원하는 객체의 CreateGraphics() 메서드 호출

• 텍스트 상자에 그림을 그리는 Graphics 객체를 생성하는 코드System.Drawing.Graphics objGraphics; objGraphics = this.textBox1.CreateGraphics();

새로운 비트맵의 Graphics 객체 만들기

• 메모리에만 저장되는 새로운 비트맵 작성을 위해 Graphics 객체 사용하기Bitmapvariable = new Bitmap(width, height, pixelformat); – Width, height : 비트맵의 너비와 높이– Pixelformat 의 값

objMyBitMap = new Bitmap(640, 480, System.Drawing.Imaging.PixelFormat.Format24bppRgb); ‘ 640*480 픽셀의 24 비트 비트맵 생성

값 설명Format16bppGrayScale

이 픽셀 형식은 픽셀이 16 비트로 구성된다 . 색상 정보는 65,536 단계의 음영을 갖는다 .

Format16bppRgb555이 픽셀 형식은 픽셀이 16 비트로 구성된다 . 색상 정보는 32,768가지 색을 가지며 , 이들 중 5 비트는 빨강 , 5 비트는 녹색 , 5 비트는 파랑을 나타낸다 .

Format24bppRgb이 픽 셀 형 식 은 픽 셀 이 24 비 트 로 구 성 된 다 . 색 상 정 보 는 16,777,216 가지 색을 가지며 , 이들 중 8 비트는 빨강 , 8 비트는 녹색 , 8 비트는 파랑을 나타낸다 .

펜 사용하기• 펜 (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 클래스 사용

값 설명Dash 대쉬 (-) 로 구성된 선을 지정한다 .

DashDot 대쉬와 점의 패턴으로 구성된 선을 지정한다 .

DashDotDot 대쉬와 두 개의 점으로 구성된 선을 지정한다 .

Dot 점으로 구성된 선을 지정한다 .

Solid 실선을 지정한다 .

Custom사용자 정의 대쉬 형식을 지정한다 . Pen 객체는 사용자 정의 선을 정의할 때 사용할 수 있는 속성들을 갖고 있다 .

시스템 컬러 사용하기

• 시스템 컬러 : Windows 인터페이스 요소의 색상– 바탕화면에서 마우스 오른쪽 버튼 누르고 단축 메뉴에서 [ 속성 ] 선택– [ 디스플레이 등록 정보 ] 대화상자에서 , [ 화면 배색 ] 탭 클릭– 특정 항목의 색상을 바꾸려면 [ 고급 ] 버튼을 클릭하고 , 변경하고자 하는 색을

선택하고 새로운 색 지정– 자신이 작성하는 프로그램의 인터페이스 색을 시스템 색과 일치하도록 하려면 원하는

항목의 색상 속성에 시스템 색 지정

시스템 색열거형 설명

ActiveCaption 활성 타이틀바의 배경색

ActiveCaptionText 활성 타이틀바의 텍스트 색

Control 버튼과 다른 3D 요소들의 배경색

ControlDark 3D 요소의 그림자 색

ControlLight 3D 요소의 강조 색

ControlText 버튼과 다른 3D 요소의 텍스트 색

Desktop Windows 데스크탑 색

GrayText 사용자 인터페이스 요소가 비활성화 되었을 때의 텍스트 색

Highlight 강조된 텍스트의 배경색 . 선택된 텍스트 뿐만 아니라 선택된 메뉴 항목을 포함한다 .

HighlightText 강조된 텍스트의 전경색 . 선택된 텍스트 뿐만 아니라 선택된 메뉴 항목을 포함한다 .

InactiveBorder 비활성 창의 테두리 색

InactiveCaption 비활성 타이틀바의 배경색

InactiveCaptionText 비활성 타이틀바의 텍스트 색

Menu 메뉴 배경색

MenuText 메뉴 텍스트 색

Window 창의 사용자 영역의 배경색

직사각형 다루기

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

정사각형 직사각형

원 타원

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);

도형 그리기

• 선 그리기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);

텍스트 그리기• 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);

X, Y

좌표는 텍스트의 왼쪽 상단 모서리에 대한 상대값이다 .

폼에 그래픽 유지하기

• 사용자가 폼을 최소화하거나 다른 창으로 폼을 일부 가리고 나서 , 폼을 다시 표시해보면 앞에서 가려졌던 모든 그래픽 요소들이 사라짐

• 폼의 그래픽 내용을 계속해서 유지하는 방법– 폼에 그림을 그리는 모든 코드를 폼의 Paint 이벤트에 입력– 메모리 비트맵에 그림을 그려놓고 , 폼의 Paint 이벤트에서 메모리 비트맵의

내용을 폼에 복사

Graphics 프로젝트 예제• 사용자가 버튼을 클릭하면 텍스트 상자의 내용이 폼에서 임의의

위치와 임의의 글꼴 크기로 그려지도록 하는 프로젝트 예제

1. Persisting Graphics 라는 제목으로 새로운 Windows 응용 프로그램 생성

2. 솔루션 탐색기에서 Form1.cs 이름을 frmMain.cs 로 바꾸고 , 폼의 Text 속성에는 Persisting Graphics Example 이라고 입력

3. 폼에 텍스트 상자 추가하고 , 속성을 다음과 같이 설정4. 폼에 버튼을 추가하고 , 속성을 다음과 같이 설정

속성 값Name txtInput

Location 56,184

Size 100,20

속성 값Name btnDrawText

Location 160,184

Text 텍스트 그리기

텍스트 상자 속성 버튼 속성

5. 폼을 더블클릭하고 , Form_Load 프로시저 선언부 앞에 다음 코드 입력private Bitmap m_objDrawingSurface;

6. 커서를 Load 이벤트 내부로 이동하여 다음 코드 입력// 폼의 사용자 영역과 같은 크기의 그리기 표면을 만든다 . m_objDrawingSurface = new Bitmap(this.ClientRectangle.Width, this.ClientRectangle.Height, System.Drawing.Imaging.PixelFormat.Format24bppRgb); InitializeSurface();

7. 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(); }

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

• 폼 디자이너로 돌아가서 버튼을 더블클릭하고 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();

예제 실행 결과

• 코드에서 Invalidate() 메서드는 클라이언트의 Rectangle 영역을 무효화시킴– 폼의 모습이 잘못되었으므로 , 폼을 다시 그려야 한다고 Windows 에게

알려주는 역할• <F5> 눌러서 프로젝트 실행