5-3 绘制图形

5-3 绘制图形

本节学习目标：

n绘制曲线基本要点

n图形类控件的使用

nSystem.Drawing.Drawing2D

5-3-1 绘制曲线

基本形状的绘制，我们可以从图形类提供的方法中找到解决方案，比如三角形即画三条相互连接的直线，心形则依次画几个半圆形组合，关键问题是找准其中的连接点位置，常见图形都可以通过基本方法调用画出。但是一些数学曲线的处理就较为繁琐，不是标准的形状组成，需要两点一线逐一绘制，这里我们以一些常用曲线及图表为例。

1． 案例学习：绘制正弦曲线y=sin(x)

本次实验目标是掌握绘制曲线的基本要领，可以在任意窗体或控件上找到各相关点，计算绘制曲线，以正弦曲线为例，首先应找到坐标原点，然后找到每一个曲线上的对应点的坐标，在两点之间画一条直线，如此反复直到曲线末尾。

u 实验步骤（1）：

先定制坐标轴，确定坐标原点，依次画两条直线分别作为X,Y轴。因为窗体的左上角坐标为（0，0），在代码中使用的坐标定位都是相对的，相对于窗体的左上角位置。为了看得清楚，在窗体的四周留出了一部分边缘，使用绝对像素值，将坐标原点定位在（30，窗体高度-100），按钮的上方。随着窗体大小的变化，横坐标轴根据窗体高度绘制在不同位置。

图5-7 坐标轴的绘制

u 实验步骤（2）：修改源代码如下所示：

Pen myPen = new Pen(Color.Blue, 3);
Point oo1 = new Point(30, this.ClientSize.Height-100);
Point oo2 = new Point(this.ClientSize.Width - 50, this.ClientSize.Height-100);
g.DrawLine(myPen, oo1, oo2);
Point oo3 = new Point(30, 30);
g.DrawLine(myPen, oo1, oo3);
Font f = new Font("宋体",12,FontStyle.Bold);
g.DrawString("x", f, myPen.Brush, oo2);
g.DrawString("y", f, myPen.Brush, 10,10);

这里也可以通过坐标平移直接指定坐标原点，然后从原点画出两条直线更为简练。

u 实验步骤（3）：

接着在坐标轴上画出正弦曲线，以坐标轴的原点为起点

图5-8 正弦曲线

u 实验步骤（4）：

因为窗体中纵坐标的正方向是垂直向下的，和我们在数学中画坐标轴的方向相反，因此，需对纵坐标的值做一些修改。在上面的代码后面添加:

x1 = x2 = 0;
y1 = 0;y2 = this.ClientSize.Height-100;
for (x2 = 0; x2 < this.ClientSize.Width ; x2++)
{
a = 2 * Math.PI * x2 / (this.ClientSize.Width);
y2 = Math.Sin(a);
y2 = (1 - y2) * (this.ClientSize.Height-100)/2;
g.DrawLine(myPen, x1+30, (float)y1, x2+30, (float)y2);
x1 = x2;
y1 = y2;
}

这里a=2 x/坐标轴宽度，实现坐标轴的放大。因为直接根据y=sinx中的x范围画图，画出的正弦曲线很窄，x取值范围是从0-2 为一个周期，也就是几个像素，因此需将曲线放宽，通过改变横坐标来完成。

2． 案例学习：按百分比绘制饼图

本次练习的目标是掌握绘制统计图形的基本要领，绘制饼图并按比例填充不同颜色，饼图可以直接使用类库中的方法填充图形，不同在于统计类图形需和数据关联，如何获取数据并按不同数据绘制不同比例的饼图是实现的关键。

u 实验步骤（1）：

绘制简单的饼图，各部分比例由界面输入或直接指定，按比例生成饼图，不同部分使用不同颜色填充，多次创建画刷，添加代码:

Rectangle r = new Rectangle(50,50,200,100);
Brush b = new SolidBrush(Color.Blue);
g.FillPie(p.Brush, r, 0, 60);
g.FillPie(b, r, 60, 150);
b = new SolidBrush(Color.Yellow);
g.FillPie(b, r, 210, 150);

图5-9 平面饼图

这里绘制的是二维饼图，如果希望画出立体效果，可以使用前面介绍的方法画出圆柱体的效果，立体的部分采用黑色阴影处理即可。

u 实验步骤（2）：

从前面的例子看出，画饼图直接使用方法FillPie，饼图的各部分主要由参数3，参数4来确定位置，是饼图各部分的角度的关键参数，如果每一部分不确定，或从其他对象中获取数据来动态生成饼图，可以将饼图绘制改为循环语句实现。同样，每一部分的颜色也可以通过获取数据确定，添加代码:

private void Fill(int[] percent,Color[] percolor)
{
Graphics g = this.CreateGraphics();
Rectangle r = new Rectangle(50, 50, 200, 100);
Brush b;
int beginAngle = 0;
for (int i = 0; i <= percent.GetUpperBound(0); i++)
{
b = new SolidBrush(percolor[i]);
g.FillPie(b, r,beginAngle, percent[i]);
beginAngle += percent[i];
}
g.Dispose();

在这里，我们定义了一个方法，接受的输入参数分别为饼图的划分比例和颜色的设置，方法的参数类型还可根据需要调整。输入的参数既可以从数据库表中的指定列获取，也可通过从文件中的数据获取。在调用时确定将饼图切割为几份。

图5-10 随输入数据变化的饼图

5-3-2 图形控件使用

1．Picturebox控件

图片框是操作图形图像的基本的控件，主要用以显示保存图形图像信息。主要属性和方法定义如表5-5所示：

表5-5 PictureBox控件属性及方法

2． 案例学习：在图形框中打开图像并添加文字，保存到文件

本次实验目标是在图像上添加文字或自定义图形，并保存到文件。

图5-11 打开图像

u 实验步骤（1）：

由图4-11所示，从工具箱之中拖拽PictureBox控件到窗体上，设置SizeMode属性为StretchImage，使图片适应图形框控件大小调整，可以使用OpenFileDialog控件，在代码中添加打开文件操作，从界面选择文件打开，也可以直接指定文件路径，达到图4-4效果。

u 实验步骤（2）：

用鼠标双击“在图片中添加文字”按钮，进入.cs文件编辑状态准备进行开发，代码加下所示：

private void 添加文字_Click(object sender, EventArgs e)
{
Graphics g = Graphics.FromImage(pictureBox1.Image);
Font f = new Font("隶书", 80, FontStyle.Italic);
Pen p = new Pen(Color.OrangeRed);
g.DrawString("花开花落", f, p.Brush,0,0);
p.Dispose();
g.Dispose();
}

图5-12 在图像上添加文字

问题讨论：

u 实验步骤（3）：

到这里，我们只是在界面上看到了对于图像所作的修改，再打开文件，还没有将修改保存到文件，最后需调用Image类的Save方法将图片框中修改过的图像对象保存到文件，再次打开文件查看结果。

3．Bitmap类

封装 GDI+ 位图，此位图由图形图像及其属性的像素数据组成。Bitmap 是用于处理由像素数据定义的图像的对象。 如图5-6所示。

表5-6 Bitmap类的常用属性及方法