개요
이번 장에서는 이전 게시물에서 알아본 그래픽 작업 방법을 통하여 그래프를 그려보고자 합니다. 이 작업을 진행하기 위해서는 C#의 GDI 작업 또는 Graphics 객체를 선언해야 합니다. 자세한 것은 이전 게시물을 참조하세요.
정규화된 데이터 선언
먼저 그래프에 그릴 데이터를 선언해야 합니다. 파형 데이터 든 뭐든 X에 대응되는 Y 값이 존재할 것이고, 그에 대한 데이터는 배열에 담겨 있을 것 입니다. 여기에서는 double[] 배열에 담겨 있다고 가정하고 double[] 배열에 대해서 x 값을 y로 출력하는 방법에 대해서 알아 볼 것 입니다. 특히 이번 절에서는 화면상에 맞춰서 출력하기 위해 데이터를 정규화해야 하며, 그 범위는 0~1로 가정합니다.
난수 데이터
여기서는 난수 데이터를 선언하고 배열에 담습니다.
double[] data;
public Form1()
{
InitializeComponent();
Random random = new Random();
int dataSize = 500;
data = new double[dataSize];
for(int i=0;i<dataSize; i++)
{
data[i] = random.NextDouble();
}
}
난수 데이터를 생성하기 위해서 Random 클래스를 인스턴스화합니다. 데이터 크기는 500으로, double[] 배열에 할당하기 위하여 new 키워드를 사용합니다. 그런다음 for문을 통해서 data 배열에 순서대로 담습니다.
화면에 그리기
데이터를 화면에 그리기 위해서는 panel의 Paint 이벤트에 그래프 데이터를 순회하면서 그려줘야 합니다. 그러기 위해서 for문을 사용해 데이터 개수만큼 반복하며, 데이터의 x 값, y 값을 가져옵니다. 이때 주의할 점은 선을 순서대로 그리기 때문에 데이터는 x 값으로 정렬되어 있어야 합니다. 여기서는 double[]의 index를 x 값으로 가정 했기에 정렬할 필요는 없습니다.
출력 대칭
위 결과 이미지는 완벽한 것 같지만 사실상 그렇지 않습니다. 우리가 그래프를 볼 때에는 위로 올라갈 수록 높은 수치의 데이터를 가집니다. 하지만 상기 그래프는 스크린 좌표계에서 출력된 것이기 때문에 아래로 갈수록 높은 y를 가집니다. 따라서 우리는 y 값을 대칭 해줄 필요가 있습니다.
여기서는 panel의 아래에서 부터 출력 해 주기 위해 panel의 높이를 가져오고, 그 높이에서 value 값을 빼주기로 합니다.
Point targetPoint = new Point(i,panel1.Height - (int)(data*scale));
기본적으로 panel1 내에 존재하는 Height Getter은 panel 의 높이를 가져옵니다. 즉 그래픽이 그릴 수 있는 범위인 흰색 영역의 높이를 가져오며, 그 높이에서 부터 데이터를 뺌으로써 데이터가 제일 높은 값일 때 제일 낮은 좌표 영역에 출력할 수 있도록 합니다.