02.初识图形库

  • 学习人数 15K+
  • 适合有C语言基础人群学习
avatar
林耿亮

你好编程主讲老师

1. 什么是图形库

标准库头文件stdio.h中声明的printf、putchar等函数可以实现将字符输出到控制台上。程序运行后，将出现黑底白字的控制台。而用户可以使用键盘输入字符到控制台，接着这些字符可以被scanf、getchar等函数读取。这也是老一辈用户与计算机交互的常规方式。而如今，图形化技术已经渗透到计算机应用的每个角落。对于普通用户而言，他们更乐意在屏幕上看到五彩缤纷图像和各式各样按钮，而不是仅能通过字符与计算机进行交互。为了实现图形化的需求，我们需要借助图形库进行编程。

图形库是一个用于在屏幕上渲染图像的程序库。它通常提供一组经过优化的函数来执行渲染任务。由于C/C++语言可以适配非常广泛的设备，甚至有些设备不通过屏幕进行输入输出。即使使用屏幕的设备，也有非常大的差异性。因此，图形库并未包含在标准库当中。

对于桌面计算机而言，有很多种图形库可供选用。例如：Qt，Gtk，Windows GDI。这些图形库都在一些领域里面有广泛的应用。例如，办公软件WPS的图形界面就是使用Qt开发的。

但是，本课程的重点在于如何帮助C/C++语言使用者快速上手图形和游戏编程。因此，我们将讨论设计相对简单，功能没那么丰富的图形库EasyX。

2. 前置条件

在开始课程前，有两个前置条件。

  1. 安装Visual Studio

  2. 熟悉C语言基础

图形库EasyX仅支持Visual Studio。因此，需要在你的电脑上安装Visual Studio。虽然EasyX可以支持从VC6.0（其后的版本包含在Visual Studio中发行），Visual Studio 2008到VS2019的各个版本。但是，我们建议尽量使用新一点的Visual Studio。

你需要具备一些C语言基础，但是并不需要太过深入，就可以开始使用EasyX了。

当你已经掌握变量，控制流（顺序、分支、循环），运算符与表达式，一维、二维数组，函数，#define时。就可以开始尝试使用EasyX。

我们推荐在使用EasyX做一些图形化编程的同时，进一步学习巩固C语言。在使用过程中，若遇到不熟悉的知识可以更加有针对性、应用性的学习。这样对比单纯地使用控制台黑底白字会更加有趣一些。

3. 安装图形库

下载EasyX安装包

进入EasyX主页https://easyx.cn，点击右边的【下载EasyX】按钮。

安装easyx

安装EasyX到对应的Visual Studio版本

点击打开EasyX安装包，即可出现EasyX的安装向导。点击下一步。

安装向导

EasyX会检测系统中安装了哪些Visual Studio版本，并显示出来。需要安装到哪个vs版本中，就点击其后对应的安装即可。

需要安装到哪个vs版本中

4. 如何学习使用EasyX

对于代码库来说，最直接的了解它的办法就是阅读它的说明文档或手册。

EasyX的文档可以在https://docs.easyx.cn/zh-cn/intro查看。

EasyX图形库主要由一系列的函数构成。因此，想要利用它做出好看的图形化程序，必须熟悉这些函数的意义与用途。在文档中，将函数分门别类归类了在一系列目录下。

例如，我们需要绘制一个圆形，在目录中找到【函数说明】下的【图形绘制相关函数】中的circle函数。就可以看到关于circle函数的介绍，以及需要哪些参数，返回值是什么及其意义。

文档

如果无法连接网络，可以在有网络的地方下载离线文档。

离线文档

5. 创建工程及源文件

和往常一样，在Visual Studio中，创建一个控制台应用。

控制台应用

如果你需要创建新的源文件，请注意后缀名为.cpp，不要将后缀名改为.c。

文件后缀名为cpp

这是因为在Visual Studio中，编译器是根据文件后缀名区分C语言源文件与C++源文件的。

C++保留了原有C的大部分语法，又加入了面向对象编程等风格的支持。

  1. 蓝色部分为C++独有的语法。
  2. 黄色部分为C/C++共有的语法。
  3. 红色部分为C独有的语法。

c与cpp

若后缀名为.c则无法使用C++语法。

EasyX内部实现使用了C++语法。因此，若我们的代码中需要使用EasyX，源文件也需要是C++源文件。请不用担心，EasyX提供给我们使用的是一系列C/C++均支持的函数。除了略微区别，与C语言中的函数是一致的。

6. 包含头文件并创建窗体

但是，这一次，我们不需要将字符打印在控制台上了，因此不需要使用头文件<stdio.h>。而是使用EasyX中的各类函数绘制图形，所以需要包含EasyX的头文件<easyx.h>。 

#include <easyx.h>
int main()
{
    return 0;
}

别着急，在开始前，我们需要创建一个窗体作为画布。

initgraph

从文档中得知：

width参数为窗体的宽度 height参数为窗体的高度

窗体的宽度与高度的单位为像素。

我们先创建一个800 * 600像素的窗体吧。第一个参数填800，第二个参数填600。

第三个参数为设置了缺省值的形参int flag = NULL。函数形参的缺省参数为C++语法。若形参设置了缺省值，函数调用缺少实参时，可以使用缺省值作为实参传递给形参。

调用函数时，若第三个实参不填，使用缺省值NULL。

#include <easyx.h>
int main()
{
    initgraph(800, 600);
    return 0;
}

创建了绘图窗体，别忘了在主函数结束前关闭绘图窗体。

close

#include <easyx.h>
int main()
{
    initgraph(800, 600);
    closegraph();
    return 0;
}

运行后，我们将看到窗体一闪而过。这是因为创建绘图窗体后，立马就关闭了。我们需要让窗体多停留一段时间，不如用getchar()等待我们按键回车键之后再关闭吧。而getchar()函数声明在头文件stdio.h中，那我们又将#include <stdio.h>加上来。 

#include <easyx.h>
#include <stdio.h>
int main()
{
    initgraph(800, 600);
    getchar();  //  等待用户按键，按键之后才关闭。
    closegraph();
    return 0;
}

运行后，我们可以看到一个黑色的绘图窗体。按回车键后，关闭窗体。

绘图窗体

7. 绘制圆形

现在，我们在绘图窗体上绘制一个圆形。根据文档得知，circle函数的参数为圆形x，y的坐标。不如先将圆心设置为(0, 0)吧。第三个参数radius为圆的半径，暂时设置为300好了。

circle

#include <easyx.h>
#include <stdio.h>
int main()
{
    initgraph(800, 600);
    circle(0, 0, 300);  //  圆心为(0, 0) 半径为300的圆
    getchar();
    closegraph();
    return 0;
}

画圆

运行发现，确实画了一个圆。但是，这个圆在窗体的左上角。这个圆的位置与EasyX的坐标系有关。我们后面继续慢慢展开讨论。