C# 에서 간단하게 선 도형을 그릴 수 있는 그래픽 작업 방법

개요

기본적으로 C#의 Windows Forms 앱 에서는 원하는 컨트롤을 드래그하여 배치하고, 구성할 수 있기에 빠르고 효율적으로 UI를 구성할 수 있습니다. 선을 그리거나 좌표 값에 직접 데이터를 그리기 위해서는 컨트롤을 배치하기에는 비효율적이므로, 별도의 그래픽 작업이 필요합니다. C# Forms에서는 그래픽 작업을 할 수 있도록 라이브러리를 제공하는데요, 그 부분에 대해서 정보를 공유 해 보고자 합니다.

Panel 배치

먼저 그래픽을 그리고자 하는 부분에 Panel을 배치해야 합니다. Panel이 아니더라도 그래픽을 세팅할 수 있지만, 보통 Panel 로 그래픽 구성을 자주합니다.

Form 구성 화면 인용 사진

상기 그림의 중앙에 Panel을 배치한 것을 확인할 수 있습니다. 여기서 Panel 의 컨트롤 명은 panel1로 지정하였습니다.

그리기 이벤트 설정

Panel을 배치했다면, 이제 이 패널 내에 무언가를 그릴 수 있도록 그래픽 작업을 해 주어야 합니다. 이 작업을 진행하기 위해서는 해당 패널이 그려질 때의 이벤트에 다른 객체를 그려주면 됩니다. 그러기 위해서는 패널의 Paint 이벤트를 등록해야 합니다. 그러기 위해서는 Panel을 더블클릭 합니다.

패널의 그리기 이벤트

그러면 panel1_Paint 라는 함수 명으로 이벤트가 생성됩니다. 이 이벤트는 이제 Panel1의 그리기 작업이 요청될 때 호출됩니다. 예를 들어, 창이 열리거나, 창이 그리는 영역에 존재하게 되었을 때, 또는 최소화에서 기본 모드로 창이 전환되었을 때 호출합니다. 이 때 우리가 그리고 싶은 것을 직접 그려주면 되는 것 입니다.

패널의 그리기 이벤트에 그래픽 명령어를 넣습니다.

//그래픽 변수 선언 Graphics graphic; private void Form1_Load(object sender, EventArgs e) { //그래픽 변수에 panel1 의 그래픽을 생성하고 넣습니다. graphic = panel1.CreateGraphics(); //그래픽을 초기 흰색으로 칠합니다. graphic.Clear(Color.White); }

기본적으로 그래픽 객체를 생성하면, 그 그래픽 객체를 통해서 원하는 데이터를 그리거나 관리할 수 있습니다. panel1의 그래픽 객체를 생성하고 graphic 변수에 담아줍니다. 그런 후 grpahic을 흰색으로 색칠합니다. 그런후 프로그램을 실행하면 소스코드 상에서 지정한 흰색으로 색칠된 것을 볼 수 있습니다.

참고

기본적으로 그래픽을 직접 그리더라도 내부에 존재하는 컨트롤은 그대로 표시됩니다. 예를 들어 위 케이스에서 Panel 안에 버튼을 배치한 경우, 흰색 위에 버튼이 표시됩니다. 아무래도 Panel의 배경에 그리는 것으로 보입니다.

선 그리기

선을 그리기 위해서는 Graphics 클래스 내에 있는 DrawLine()이라는 함수를 사용하면 됩니다.

기본적으로 DrawLine()의 인자 값은 순서대로 Penstart point1end point1 입니다. Pen은 그릴 때 사용할 Pen 클래스로 색상, 두께를 지정할 수 있습니다. 먼저 Pen을 그리기 위해 Pen 인스턴스를 생성합니다. Pen 클래스의 인자값은 순서대로 Color Width이며 여기서는 Black 그리고 두께는 2로 지정합니다. 그리고 Point 객체를 만드면서 초기 (x, y) 좌표 그리고 목적지 (x, y) 좌표를 지정합니다.

최종적인 소스코드는 다음과 같습니다.

private void panel1_Paint(object sender, PaintEventArgs e) { //그래픽 변수에 panel1 의 그래픽을 생성하고 넣습니다. Graphics graphic = panel1.CreateGraphics(); //그래픽을 초기 흰색으로 칠합니다. graphic.Clear(Color.White); Pen pen = new Pen(Color.Black, 2); graphic.DrawLine(pen, new Point(5,5),new Point(100,100)); }

결과는 깨끗한 선이 출력됩니다.

색상 변경

색상을 변경하기 위해서는 Color 객체를 변경하면 됩니다. Color 클래스를 입력하고 .을 누르면 내부에 상수로 선언된 색상들이 뜹니다.

색상들이 뜬 모습

만약 직접 색상을 기입하고 싶다면, Color.FromArgb()라는 static 함수를 사용하면 됩니다.

직접 색상 넣기

Color.FromArgb(255,255,0,0)

Color.FromArgb()의 인자는 순서대로 알파, Red, Green, Blue 입니다. 알파는 255가 최대 불투명이며, 0이 투명합니다. 예를 들어, 위 상황에서는 빨강 255, 초록 0, 파랑 0 로 섞어, 빨강 색상을 나타냅니다.

다음 목표

이번 장에서 배운 선 그리기를 통해 다음 장에서는 배열의 값을 그래프로 출력 해 보겠습니다.