EGE新手入门示例程序

EGE专栏：EGE专栏

上一篇：（二）EGE相关教程

下一篇：EGE基础入门篇（一）：绘图基础知识

一、官网新手入门

EGE官网链接： 新手入门（二）创建第一个程序

  官网的新手入门（二）中，包含了多个EGE的基础示例，可以用来初步地了解EGE中的一些基本设置和绘图操作。

二、EGE图形库注意事项

1. 源文件需要使用C++编译

  EGE是C++库，使用EGE时，源文件需要以 .cpp 后缀命名，并使用C++编译器编译。

  使用EGE需要创建C++项目而不是C项目，并且源文件需要以 .cpp 后缀命名，而不是C语言中的 .c 后缀 。头文件后缀不变，仍然是 .h。
  如果使用了C编译器编译，那么就会以下编译错误提示：需要使用C++编译器，并且源文件需要以 .cpp 后缀命名。

You must use C++ compiler, or you need filename with '.cpp' suffix

---

相关问题

(1) EGE使用的编程语言是C++，而自己只会C语言，需要从头开始学C++吗？

  并不需要。把自己写的C代码粘贴到C++源文件中，编译后就会发现，是可以正常编译运行的，而且运行结果没什么不同。所以可以在C++源文件中写C语言程序，这并不会有什么影响。

  当然，C语言的新标准中，如C99的变长数组等，在C++中并不支持，所以在某些地方上，还是稍微有点区别的。而大学的C语言课程基本都是使用的C90标准，C++几乎是完全兼容的，所以完全不用担心。

(2) EGE有没有使用什么很复杂的C++语法，导致自己看不懂?

  EGE使用了一些C++的语法，但是不多，而且简单。仅需要在C语言的基础上，再掌握一点点的C++知识，就很容易使用。

  函数使用的几个简单C++语法：

• 同名函数(函数重载)：允许函数同名，靠参数不同来区分，这样可以简化命名，而不需要给函数加复杂的后缀。
• 函数默认参数：对于函数，可以只填前面的参数，后面的参数省略，使用函数设定的默认值，这样可以免去自己填写复杂的参数。
• 结构体的成员函数：在C语言中，结构体只有成员变量，而C++给结构体增加了函数，允许结构体变量调用自己的函数来对自己的变量进行操作，有利于数据和操作的整合。

2. 控制台窗口与图形窗口

  C/C++标准中包含了标准输入输出，printf() 、scanf()、 std::cin和 std::cout等可以将字符进行输出，或者获取用户键盘输入，这通常都是在一个黑窗口上进行，这个窗口称为控制台窗口。

  有一些集成开发环境会将控制台的输入输出转到集成终端中，程序运行时不会额外生成窗口。

  EGE程序会创建一个图形窗口，用于程序绘图。用户可以调用EGE的绘图函数来设置图形区域中每个像素的颜色，而不是像控制台那样以字符为单位的输出。

2.1 控制台和图形窗口的同时使用

详细说明：EGE 控制台窗口的设置

  使用EGE的图形窗口后，控制台窗口还能使用吗？当然可以。 图形窗口和控制台窗口并不冲突，可以同时使用，只是因为图形界面的软件运行时基本都是没有控制台窗口显示的，所以在有些编译器上，EGE会默认隐藏控制台窗口。

默认	编译器
隐藏控制台	MSVC编译器(Visual Studio)
显示控制台	GCC编译器

2.1.1 Visual Studio 使用控制台 (MSVC编译器)

  在Visual Studio中，EGE是默认隐藏控制台的，即使显示，也无法进行输入输出操作。
  如果想要使用控制台，在包含EGE的头文件之前，设置一个 SHOW_CONSOLE宏即可。 如下所示：

#define SHOW_CONSOLE
#include <graphics.h>

  注意，如果多个源文件都包含了ege的头文件，那么在每个源文件中，都要在ege的头文件之前定义宏 SHOW_CONSOLE 。

  设置好后，控制台便会显示并且能正常输入输出。

  如果不想显示控制台，不定义 SHOW_CONSOLE宏即可。

2.1.2 GCC编译器 (Dev-C++, CodeBlocks等)

  使用GCC编译器时，控制台默认是可用的，可以正常进行输入输出。如果不能用，那可能是配置出了问题。
  在GCC编译器中，可以通过添加-mwindows链接选项来将程序设置为图形界面程序，此时控制台就会不显示且不可用。
  检查之前配置EGE时，是否添加了-mwindows 链接选项，如果添加了，将其删去即可。

2.1.3 控制台的关闭与开启

  更详细的说明请参考：EGE 控制台窗口的设置

  控制台大多都是用于程序调试，在图形界面程序中使用是不太合适的，如果需要隐藏，可以查阅 EGE 控制台窗口的设置 。

2.2 conio.h头文件中的getch()的使用问题

  在使用EGE的过程中你会发现，getch()不能用在控制台上，只能用在EGE的窗口中。想使用 <conio.h>头文件中的getch()来作为控制台的暂停或按键输入却发现编译会报错，提示以下信息：

can not include "conio.h" before "graphics.h"

  即使不报错，<conio.h>中个getch()也不能使用，因为ege中也定义了getch()并且，会有冲突问题。

解决方案

  另外创建一个源文件，只包含<conio.h>不包含<graphics.h>，然后定义一个新函数来调用 <conio.h> 中的 getch() 即可。
  如下所示：

#include <conio.h>

int getch_console()
{
	return getch();
}

  使用前声明一下getch_console()函数即可，或者在放到头文件中，让其他源文件包含头文件再使用。
  函数声明：

int getch_console();

三、新手入门示例

EGE官网库函数文档

  在程序中会运用到大量的函数以及其它类型的定义，我们怎么知道应该如何使用它们呢？这里就要查阅文档，不能单凭个人猜想。
  官方的库函数文档里包含了大部分的函数说明，我们可以通过查看库函数文档来了解各参数的含义，按要求传入正确的参数即可。
  函数声明和一些类型定义、宏定义等，其实都包含在头文件中。我们当遇到不会的函数，可以转到定义来查看声明。通过编辑器的自动补全功能和函数提示功能，我们在输入函数的部分字符后，会跳出下拉菜单以供选择，后可以查看到参数提示。

1. 测试程序

  程序可以用来查看EGE是否配置成功，如果配置成功，编译运行后，那么屏幕上将会显示一个白色的窗口，中间画有一个红色的圆。如果编译运行失败，那么查看一下报错信息，根据信息提示检查一下配置。

#include <graphics.h>					//包含EGE头文件

int main()
{
	
	initgraph(640, 480);				//初始化窗口，大小为640 x 480
 
	setcolor(EGERGB(0xFF, 0x0, 0x0));	//设置绘画颜色为红色
	setbkcolor(WHITE);					//设置背景颜色为白色

	circle(320, 240, 100);				//在坐标(320, 240)处画个半径100的圆

	getch();							//暂停，等待按键输入
	closegraph();						//关闭图形窗口，
	
	return 0;
}

2. 第一个图形窗口

  下面的程序运行后会创建一个640x480大小的窗口，窗口颜色默认是黑色的，按下任意键后，程序关闭。

  在这里中，我们可以看到EGE最简单的程序。仅仅创建一个窗口，暂停，等用户按键后关闭窗口，结束程序，这也是EGE最基础的程序框架。

  在使用EGE中的函数和其它相关定义之前，需要包含EGE的头文件 <graphics.h> 或 <ege.h>。

/* 第一个图形窗口 */

//包含EGE的<graphics.h>头文件
#include <graphics.h>	
 
int main()
{
    //初始化图形环境, 并创建640*480大小的窗口
    initgraph(640, 480);
    
    //等待用户按键
    getch();
 
    //关闭图形界面
    closegraph();
    return 0;
}

3. 设置窗口背景色

  在调用 initgraph() 完成初始化环境之后，就可以进行绘图操作。
  首先我们把窗口的背景色修改一下，由原来的默认黑色改为白色。白色在EGE中有定义，即WHITE，可以直接当做颜色值来使用。设置背景色使用的是setbkcolor()函数。

/* 设置窗口背景色 */

#include <graphics.h>

int main()
{
    //初始化图形环境, 并创建640*480大小的窗口
    initgraph(640, 480);

    //设置窗口背景色(纯白)
    setbkcolor(EGERGB(0xFF, 0xFF, 0xFF));

    //等待用户按键
    getch();

    //关闭图形界面
    closegraph();
    return 0;
}

4. 开场动画的开启

  EGE有一个默认的开场动画，可以在initgraph()函数中设置开启或关闭。
  如果不设置，默认是当编译目标为Debug时，关闭开场动画；当编译目标为Release时，开启开场动画。开场动画最好是主动进行设置，而不是由编译目标确定。

• 当需要开启开场动画时，在initgraph()的第三个参数传入INIT_WITHLOGO即可。
• 当需要开启开场动画时，在initgraph()的第三个参数传入其它初始化模式参数即可，最简单的就直接传入0。

/* 开场动画的开启 */

#include <graphics.h>
 
int main()
{
    //初始化图形环境，并创建一个大小为640*480的窗口，开启EGE开场动画
    initgraph(640, 480, INIT_WITHLOGO);
 
    //设置窗口背景色(蓝色)
    setbkcolor(EGERGB(0x23, 0xAB, 0xF2));
 
    //等待用户按键
    getch();
 
    //关闭图形界面
    closegraph();
 
    return 0;
}

5. 开场动画的关闭

  当需要关闭开场动画时，在initgraph()的第三个参数传入0即可，也可以传入除INIT_WITHLOGO以外的其它初始化模式参数。

//开场动画的关闭
#include <graphics.h>

int main()
{
    //窗口初始化为640*480大小，第三个参数设置为0，关闭EGE开场动画
    initgraph(640, 480, 0);

    //设置窗口背景色(蓝色)
    setbkcolor(EGERGB(0x23, 0xAB, 0xF2));

    //等待用户按键
    getch();

    //关闭图形界面
    closegraph();

    return 0;
}

6. 窗口绘图区域的坐标系

  窗口绘图区域的坐标系 如下图所示，原点 (0, 0) 在左上角，往右是 $x$轴 正方向，往下是 $y$ 轴正方向。
  因为EGE除绘图区域外，基本不涉及其它窗口界面的控制，所以就简称为窗口坐标系，坐标系原点在窗口绘图区域的左上角。
  坐标$(x,y)$中的 $x,y$ 均为非负整数。设窗口宽高分别为 $\mathrm{width}$ 和 $\mathrm{height}$，那么坐标$(x,y)$ 的取值范围为:$$\begin{gathered} 0⩽x⩽\mathrm{width}-1 \\ 0⩽y⩽\mathrm{height}-1 \end{gathered}$$

7. 简单作图：线条与线框图形

  EGE可以绘制线条和一些由线条组成的线框图形，线条颜色可以由setcolor()设置。

  对于由两个点确定的线或矩形区域，遵循左闭右开原则，线或矩形区域包含起始点而不包含终止点。

//简单作图: 线条与线框图形

#include <graphics.h>
 
int main()
{
	initgraph(640, 480);
	
	//设置窗口背景色为白色
	setbkcolor(WHITE);
 
	//设置线条颜色, GREEN是颜色常数 详细可以查ege.h对这个宏的定义的值
	setcolor(GREEN);
	
	//画一条直线, 从(100, 100)到(400, 150)
	//特别注意的是端点, (100,100)这个点会被画上颜色, 但(400,150)不会画上颜色
	//以下所有的矩形(或者说两点)描述方式, 总是前一个点取得到, 但后一个点取不到
	line(120, 80, 300, 180);
	
	//设置线条颜色为蓝色
	setcolor(BLUE);
	
	//画一条直线, 从(600,50)到(80,400)
	line(600, 50, 80, 400);

	//设置线条颜色为黑色
    setcolor(BLACK);
    //矩形线框, 左上角(100, 120), 右下角(400, 300)实际(399, 299)
    rectangle(100, 120, 500, 350);

	//设置线条颜色为红色
	setcolor(RED);
	//圆线框，圆心(450, 350)，半径100
    circle(450, 350, 100);
    
    // 颜色不变，椭圆线框，中心(450, 350), 角度范围从0度到360度, 长半轴200, 短半轴150
	ellipse(450, 350, 0, 360, 160, 90);
	
	getch();
	
	closegraph();
	
	return 0;
}

8. RGB颜色的计算

  图形的绘制经常需要调整图形颜色，前面我们已经知道可以使用setcolor(颜色) 设置线条颜色，但是颜色使用的是EGE所定义的几个固定颜色值。那如何自定义其它颜色呢？可以使用EGE中的宏EGERGB()。

  EGERGB(R, G, B) 表示一个RGB颜色值，R， G，B分别表示RGB颜色中的红色，绿色和蓝色分量，每个分量范围是：0~255(十六进制对应 0x00 ~ 0xFF)，值越大，颜色越亮，一共能表示1600多万种颜色。RGB三个值都为0时，颜色为纯黑，当三个值都为最大值时，颜色值为纯白。

• EGERGB(0xFF, 0x00, 0x00) 表示 红
• EGERGB(0x00, 0xFF, 0x00) 表示 绿
• EGERGB(0x00, 0x00, 0xFF) 表示 蓝
• EGERGB(0x00, 0x00, 0x00) 表示 黑
• EGERGB(0xFF, 0xFF, 0xFF) 表示 白

//色彩的计算
#include <graphics.h>

int main()
{
	initgraph(640, 480, 0);

	//设置窗口背景色(纯白)
	setbkcolor(EGERGB(0xFF, 0xFF, 0xFF));

	//设置填充颜色, 使用EGERGB宏
	//三个参数值的范围均为0 - 255 (0xFF)，分别表示红色亮度，绿色亮度，蓝色亮度
	//EGERGB(0x23,0x80,0xF2)为蓝色, 各分量值为红色R(0x23), 绿色G(0x80), 蓝色B(0xF2)
	setcolor(EGERGB(0x23, 0x80, 0xF2));

	//画一个圆, 圆心在(200,200),半径100
	circle(200,200,100);

	getch();

	closegraph();
	return 0;
}

9. 简单作图：填充图形

  EGE可以绘制内部有填充的图形，而不再仅仅只有边框。 填充颜色由setfillcolor(颜色)设置，如果没有设置，默认是EGERGB(0, 0, 0) (纯黑色)。所以看到图形内部颜色是纯黑，考虑是否是未设置填充颜色的原因。

  对窗口使用setfillcolor()设置一次填充颜色后，对后续的绘图都有效。所以如果填充颜色不需要改变的话，不需要重复调用，如果不确定之前是什么颜色，则必须进行设置，否则颜色可能不符合预期。

/* 简单作图：填充图形 */

#include <graphics.h>

int main()
{
	initgraph(640, 480,  0);

	//设置窗口背景色(纯白)
	setbkcolor(EGERGB(0xFF, 0xFF, 0xFF));

	//设置填充颜色，一般为图形内部颜色
	setfillcolor(EGERGB(0xFF, 0x0, 0x80));
	
	//画一个填充矩形, 范围为: x坐标从50-300, y坐标从100-200
	bar(50, 40, 300, 140);	

	//设置圆的填充颜色
	setfillcolor(EGERGB(0x80, 0x0, 0xFF));

	//画一个填充圆，圆心坐标：(460, 300), 半径: 100
	fillellipse(460, 300, 100, 100);

    // 设置填充颜色为橙色
    setfillcolor(EGERGB(0xFF, 0x80, 0));

    //绘制三角形, 三个点分别为 (100, 150), (300, 400), (40, 400)
    int pos[3 * 2]  = { 100, 150, 300, 400, 40, 400};
    fillpoly(3, pos);

	getch();

	closegraph();

	return 0;
}

10. 区域填充和内部填充

  对于一个由同一颜色的线框围成的封闭区域，可以使用floodfill() 函数对其进行颜色填充。而对于一个同颜色的连续区域，可以使用floodfillsurface()函数对其进行填充。

/* 区域填充和内部填充 */

#include <graphics.h>
 
int main()
{
	initgraph(640, 480, 0);

	//设置窗口背景色为纯白
	setbkcolor(EGERGB(0xFF, 0xFF, 0xFF));

    //画两个填充椭圆，作为对比
	//设置填充颜色，一般为图形内部颜色
    color_t fillColor   = EGERGB(0xFF, 0x0, 0x80);
	setfillcolor(fillColor);
    setcolor(fillColor);
	fillellipse(160, 120, 120, 80);
	fillellipse(460, 120, 120, 80);

	//画两个空心圆，作为对比
    //设置绘图颜色，用于边界
    color_t borderColor = EGERGB(0x80, 0x00, 0xFF);
	setcolor(borderColor);
	circle(160, 340, 100);
	circle(460, 340, 100);


    //区域填充
    //从点(460, 120)开始，填充和fillColor相同颜色的色块
    setfillcolor(EGERGB(0x80, 0x00, 0xFF));
    floodfillsurface(460, 120, fillColor);

	//内部填充
	//x,y是开始填充的坐标, 第三个参数是填充的边界颜色, 或者说以这个颜色作为边界
	//如果这个边界不封闭，那么会导致整个屏幕都是这个颜色
    setfillcolor(borderColor);
	floodfill(460, 340, borderColor);

	getch();

	closegraph();

	return 0;
}

11. 窗口背景色替换

  setbkcolor()在设置背景色的同时，会窗口上和旧背景色相同颜色的像素替换成新的背景色。

/* 简单作图：填充图形 */

#include <graphics.h>

int main()
{
	initgraph(640, 480,  0);

	//设置窗口背景色(纯白)
	setbkcolor(EGERGB(0xFF, 0xFF, 0xFF));

	//设置填充颜色，一般为图形内部颜色
	setfillcolor(EGERGB(0xFF, 0x0, 0x80));
	
	//画一个填充矩形, 范围为: x坐标从50-300, y坐标从100-200
	bar(50, 40, 300, 140);	

	//设置圆的填充颜色
	setfillcolor(EGERGB(0xFF, 0x80, 0));

	//画一个填充圆，圆心坐标：(460, 300), 半径: 100
	fillellipse(460, 300, 100, 100);

    getch();

    //按下一任意键后，再次改变背景色
    setbkcolor(EGERGB(0x23, 0x80, 0xF2)); //浅蓝色

	getch();

	closegraph();

	return 0;
}

12. 清屏重绘

  在窗口上画完一帧后，可以用cleardevice()将窗口上的图形全部清除，将窗口变为背景色。
  背景色可以用setbkcolor()或setbkcolor_f()设置。setbkcolor()调用后会替换窗口的背景色像素，而setbkcolor_f()仅设置不替换像素，需要调用cleardevice()才能生效。

/* 清屏重绘 */

#include <graphics.h>

int main()
{
	initgraph(640, 480,  0);

	//设置窗口背景色(纯白)
	setbkcolor(EGERGB(0xFF, 0xFF, 0xFF));

	//设置填充颜色，一般为图形内部颜色
	setfillcolor(EGERGB(0xFF, 0x0, 0x80));
	
	//画一个填充矩形, 范围为: x坐标从50-300, y坐标从100-200
	bar(50, 40, 300, 140);	

    //暂停，等待按键
    getch();

    //清屏
    cleardevice();

	//设置圆的填充颜色
	setfillcolor(EGERGB(0xFF, 0x80, 0));

	//画一个填充圆，圆心坐标：(460, 300), 半径: 100
	fillellipse(460, 300, 100, 100);

    getch();

	closegraph();

	return 0;
}

13. 手动渲染模式设置

  EGE绘图使用的是双缓冲模式，可以减少图形的闪烁。为了实现减少图形闪烁的功能，需要设置开启手动渲染模式。不设置时，默认使用自动渲染模式。
  所有EGE程序都应开启手动渲染模式，否则在绘图复杂时，自动渲染模式所导致的图形闪烁、绘图出错等问题出现的概率会大大增加。

  手动渲染模式可以在初始化模式中设置，initgraph()的第三个参数传入INIT_RENDERMANUAL，还可以调用setrendermode(RENDER_MANUAL)进行设置。

  手动渲染模式设置一次即可全局生效，不需要多次调用。

  设置手动渲染后，在绘制完一帧后，调用 getch(), delay_fps() , delay_ms() 等即可。

/* 手动渲染模式设置 */

#include <graphics.h>

int main()
{
    //初始化图形环境, 并创建640*480大小的窗口，设置为手动渲染模式
    initgraph(640, 480, INIT_RENDERMANUAL);

	//还可以这样设置手动渲染模式
	//setrendermode(RENDER_MANUAL);

    //设置窗口背景色(纯白)
    setbkcolor(EGERGB(0xFF, 0xFF, 0xFF));

    //等待用户按键
    getch();

    //关闭图形界面
    closegraph();
    return 0;
}

14. 帧循环

  在之前的示例中，图形绘制都是顺序进行的，执行完所有语句后程序退出。现在来让程序不断地重复绘图操作，实现动画效果。
  当程序需要重复处理数据和绘图时，就需要使用 帧循环 。帧循环负责进行绘图，生成每一帧画面。循环如下所示：

for( ; is_run(); delay_fps(60)) {

}

  delay_fps(60)用于延时，保持平均每秒运行60次循环，稳定帧率。is_run() 用于检测图形环境仍在是否运行，一般情况下总是返回true，可以与其他条件一起作为循环判断条件，如 is_run() && flag。

  下面配合清屏重绘，来绘制一个圆的动画。

/* 手动渲染模式设置 */

#include <graphics.h>
#include <math.h>

int main()
{
    //初始化图形环境, 并创建640*480大小的窗口，设置为手动渲染模式
    initgraph(600, 600, INIT_RENDERMANUAL);

    //设置窗口背景色(纯白)
    setbkcolor(EGERGB(0xFF, 0xFF, 0xFF));

    //设置填充颜色(蓝色)
    setfillcolor(EGERGB(0x23, 0x80, 0xF2));

    double rad = 0.0;
    for ( ; is_run(); delay_fps(60)) {
        //清屏
        cleardevice();

        //计算圆半径, 半径随正弦函数变化
        int radius = round(200 + 40 * sin(rad));

        //绘制填充圆
        fillellipse(300, 300, radius, radius);

        //更新 rad值
        rad += 0.02;
        if (rad > 2 * PI)
            rad = 0.0;
    }

    //关闭图形界面
    closegraph();

    return 0;
}

---

EGE专栏：EGE专栏

上一篇：（二）EGE相关教程

下一篇：EGE基础入门篇（一）：绘图基础知识