第 10 章 Linux的图形编程.

Presentation on theme: "第 10 章 Linux的图形编程."— Presentation transcript:

1 第 10 章 Linux的图形编程

2 本章重点 使用SDL图形开发库并及图形模式的初始化 基本绘图函数的应用 图片与文字的显示 动画 三维绘图 用SDL实现简单游戏设计

3 10.1 Linux的图形编程简介 在Linux 图形编程中，基于控制台的图形库主要有：
SVGALib： 是最早基于Linux的非X的图形支持库。 FrameBuffer：出现在Linux 2.2.x内核当中的一种驱动程序接口。 GGI：新一代的图形支持库。可在 FrameBuffer, SVGALib等设备上运行。在所有平台上提供了一致的输入设备接口, 采用共享库机制, 实现低层支持库的动态装载等 。 OpenGL: 是个专业的3D程序接口，功能强大，调用方便的底层3D图形库。 SDL：是一个跨平台的多媒体游戏支持库，包含了对图形、声音、游戏杆、线程等的支持。

4 10.2 安装和使用SDL图形开发库 系统安装时一般都已经默认安装了SDL库，如没安装，参见附录。 SDL的基本库与附加库的库名与含义：
使用SDL库需要包含头文件：#include "SDL.h" 编译命令为： gcc –I/usr/include/SDL –lSDL 源程序名 –o 目标文件名 -lpthread 如果程序中使用了图像库和混音库，在编译的时候还需要加上相应的编译参数，分别是 -lSDL_image和-lSDL_mixer。

5 10.3 初始化图形模式 初始化图形模式中常用函数及功能 ：
10.3 初始化图形模式 初始化图形模式中常用函数及功能 ： 要加载和初始化SDL库需要调用SDL_Init()函数，该函数以一个参数来传递要激活的子系统的标记。 SDL_Init()函数说明： flags参数取值所对应的子系统对象 ：

6 10.3 初始化图形模式 例10.1 初始化视频子系统，设置显示模式为640×480大小。设置初始颜色为红色并对颜色值进行改变，使程序执行过程中背景色渐变。编写程序10-1.c，放在/home/cx/10-1目录下。 分析 用SDL_Init（SDL_INIT_VIDEO）初始化视频子系统，并用SDL_SetVideoMode()函数设置显示模式，最后用SDL_MapRGB()设置背景颜色。 流程图如图所示

7 10.3 初始化图形模式 步骤1 设计编辑源程序代码。 [root@localhost root]#mkdir /home/cx/10-1
10.3 初始化图形模式 步骤1 设计编辑源程序代码。 root]#mkdir /home/cx/10-1 root]#cd /home/cx/10-1 10-1]#gedit 10-1.c

8 10.3 初始化图形模式 步骤2 编写makefile工程文件 步骤3 执行make文件 步骤4 执行可执行文件
10.3 初始化图形模式 步骤2 编写makefile工程文件 10-1]#vi makefile CC = gcc AR = $(CC)ar CFLAGS= -I/usr/include/SDL -lSDL -lpthread 10-1:10-1.c $(CC) $(CFLAGS) $^ -o clean: -rm -f $(EXEC) *.elf *.gdb *.o 步骤3 执行make文件 10-1]# make gcc -I/usr/include/SDL -lSDL -lpthread c -o 10-1 步骤4 执行可执行文件 root]#./10-1 注意：gcc编译的时候要切换到文件所在目录下。如程序运行在Fedora Core 4环境，则不需要添加参数-lpthread。

9 10.3 初始化图形模式 SDL_SetVideoMode函数说明

10 10.3 初始化图形模式 SDL_Quit（）函数说明 SDL_MapRGB函数说明

11 10.3 初始化图形模式 SDL_FillRect函数说明

12 10.3 初始化图形模式 SDL_UpdateRect函数说明

13 10.3 初始化图形模式 SDL_Delay函数说明 SDL使用中的一些数据类型： Uint8——相当于unsigned char
10.3 初始化图形模式 SDL_Delay函数说明 SDL使用中的一些数据类型： Uint8——相当于unsigned char Uint16——16位（2字节）unsigned integer Uint32——32位（4字节）unsigned integer Uint64——64位（8字节）unsigned integer

14 10.3 初始化图形模式 思考题： 编写一个简单的SDL初始化程序：要求背景色为红色，让屏幕停留5秒。
10.3 初始化图形模式 思考题： 编写一个简单的SDL初始化程序：要求背景色为红色，让屏幕停留5秒。 编写一个简单的SDL初始化程序：要求背景色的红、绿、兰为随机显示值，让屏幕停留10秒。

15 10.4基本绘图函数的应用 本节主要应用SDL_draw函数库绘制点、线、圆等基本图形。 常用的基本绘图函数及功能：

16 10.4基本绘图函数的应用 例10.2 使用SDL_draw库设计一个程序，初始化视频子系统，设置显示模式为640×480,画面的色深为16位，用Draw_Line函数画两条交叉的直线，一条直线起始点的坐标为（240，180），终止点的坐标为（400，300），另一条直线起始点的坐标为（400，180），终止点的坐标为（240，300）。再用Draw_Pixel函数绘制一条正弦曲线，程序名为10-2.c，存放在/home/cx/SDL_draw 下。 步骤1 设计编辑源程序代码。 SDL_draw ]#gedit c

17 10.4 基本绘图函数的应用 步骤2 编写makefile工程文件 步骤3 执行make文件
10-3]#vi makefile CC = gcc CCFLAGS = -Wall -I/usr/include/SDL -D_REENTRANT -I/home/cx/SDL_draw /include -L/usr/lib -Wl,-rpath,/usr/lib -lSDL -lpthread /home/cx/SDL_draw /src/.libs/libSDL_draw.a 10-2: 10-2.c $(CC) -o c $(CCFLAGS) 步骤3 执行make文件 10-2]# make gcc -o c -Wall -I/usr/include/SDL -D_REENTRANT -I/home/cx/SDL_draw /include -L/usr/lib -Wl,-rpath,/usr/lib -lSDL -lpthread /home/cx/SDL_draw /src/.libs/libSDL_draw.a

18 10.4 基本绘图函数的应用 步骤4 编译成功后，执行可执行文件10-2，输入如下：
步骤4 编译成功后，执行可执行文件10-2，输入如下： 10-2]#./10-2

19 10.4 基本绘图函数的应用 Draw_Line函数说明

20 10.4 基本绘图函数的应用 Draw_Pixel函数说明

21 10.4 基本绘图函数的应用 思考题： 编写一个简单的画线程序：要求设置背景色为红色，线条颜色为绿色，绘制一个边长为120的正三角形，同时让屏幕停留8秒。 线段长度无限短后就成为点，请用画线的方法画出正弦曲线。 能否用画线的方法实现动画。

22 10.4 基本绘图函数的应用 例10.3 使用SDL_draw库设计一个程序，初始化视频子系统，设置显示模式为640×480,画面的色深为16位，画5个黄色的同心圆，圆心坐标为（320，240），最小的圆半径为5，其他圆的半径以15的大小递增，程序名为10-3.c，存放在/home/cx/SDL_draw 下。 步骤1 设计编辑源程序代码。 SDL_draw ]#gedit c

23 10.4 基本绘图函数的应用 步骤2 编写makefile工程文件 步骤3 执行make文件
10-3]#vi makefile CC = gcc CCFLAGS = -Wall -I/usr/include/SDL -D_REENTRANT -I/home/cx/SDL_draw /include -L/usr/lib -Wl,-rpath,/usr/lib -lSDL -lpthread /home/cx/SDL_draw /src/.libs/libSDL_draw.a 10-3: 10-3.c $(CC) -o c $(CCFLAGS) 步骤3 执行make文件 10-3]# make gcc -o c -Wall -I/usr/include/SDL -D_REENTRANT -I/home/cx/SDL_draw /include -L/usr/lib -Wl,-rpath,/usr/lib -lSDL -lpthread /home/cx/SDL_draw /src/.libs/libSDL_draw.a 步骤4 编译成功后，执行可执行文件10-3，输入如下： 10-3]#./10-3

24 10.4 基本绘图函数的应用 Draw_Circle函数说明

25 10.4 基本绘图函数的应用 思考题： 编写一个画圆的程序。要求设置背景色为黄色，线条颜色为蓝色，以正三角形的三个顶点为圆心，半径为60画三个圆，同时让屏幕停留8秒。 画一个半径渐渐增大、颜色随机变化的圆。 画一个圆，此圆沿着正弦曲线运动。 提示：请参考下列代码 for(i=0;i<120;i++,x=x+3,y=y+sin(x-80)) { Draw_Circle(screen,x,y, r, SDL_MapRGB(screen->format, 255,0,0)); SDL_Delay(100); Draw_Circle(screen,x,y, r, SDL_MapRGB(screen->format, 255,255,255)); Draw_Line(screen, x,y, x+3,y=y+sin(x-80),SDL_MapRGB(screen->format, 255,0,0)); SDL_UpdateRect(screen, 0, 0, 0, 0); /*更新整个屏幕*/ }

26 10.4 基本绘图函数的应用 10.4 使用SDL_draw库设计一个程序，初始化视频子系统，设置显示模式为640×480,画面的色深为16位。用Draw_Rect函数画两个矩形，一个矩形的左上角坐标是（80，180），宽和高分别是160和120，颜色为白色；另一个矩形的左上角坐标是（319，179），宽和高分别是242和122，颜色为黄色。用Draw_FillRect函数画一个矩形，其左上角坐标是（320，180），宽和高分别是240和120，颜色为红色。程序名为10-4.c，存放在/home/cx/SDL_draw 下。 步骤1 设计编辑源程序代码。 SDL_draw ]#gedit c

27 10.4 基本绘图函数的应用 步骤2 编写makefile工程文件 步骤3 执行make文件
10-4]#vi makefile CC = gcc CCFLAGS = -Wall -I/usr/include/SDL -D_REENTRANT -I/home/cx/SDL_draw /include -L/usr/lib -Wl,-rpath,/usr/lib -lSDL -lpthread /home/cx/SDL_draw /src/.libs/libSDL_draw.a 10-4: 10-4.c $(CC) -o c $(CCFLAGS) 步骤3 执行make文件 10-4]# make gcc -o c -Wall -I/usr/include/SDL -D_REENTRANT -I/home/cx/SDL_draw /include -L/usr/lib -Wl,-rpath,/usr/lib -lSDL -lpthread /home/cx/SDL_draw /src/.libs/libSDL_draw.a 步骤4 编译成功后，执行可执行文件10-4，输入如下： 10-4]#./10-4

28 10.4基本绘图函数的应用 Draw_Rect函数说明 ：
思考题：编写一个画矩形的程序：实现五个矩形从大到小向屏幕中心依次缩小，每个矩形间隔20个单位，要求最里面即最小的矩形宽、高分别为80和60，同时让屏幕停留5秒。

29 10.4基本绘图函数的应用 例10.5 使用SDL_draw库设计一个程序，初始化视频子系统，设置显示模式为640*480,表面的色深为16位，用Draw_HLine函数画一水平直线，起始点为（240，240），长度为160，颜色为白色；用Draw_VLine函数画一垂直直线，起始点为（320，180），长度为120，颜色为红色，用Draw_Ellipse函数画一椭圆，圆心（240，180），x轴径76，y轴径56，颜色为蓝色，用Draw_FillEllipse填充此椭圆，用Draw_Round画一圆角矩形，左上角坐标为（322，122），宽为156，高为116，圆角的半径为10，颜色为绿色，用Draw_FillRound填充此圆角矩形。 步骤1 设计编辑源程序代码。 SDL_draw ]#gedit c

30 10.4 基本绘图函数的应用 步骤2 编写makefile工程文件 步骤3 执行make文件
10-5]#vi makefile CC = gcc CCFLAGS = -Wall -I/usr/include/SDL -D_REENTRANT -I/home/cx/SDL_draw /include -L/usr/lib -Wl,-rpath,/usr/lib -lSDL -lpthread /home/cx/SDL_draw /src/.libs/libSDL_draw.a 10-5: 10-5.c $(CC) -o c $(CCFLAGS) 步骤3 执行make文件 10-5]# make gcc -o c -Wall -I/usr/include/SDL -D_REENTRANT -I/home/cx/SDL_draw /include -L/usr/lib -Wl,-rpath,/usr/lib -lSDL -lpthread /home/cx/SDL_draw /src/.libs/libSDL_draw.a 步骤4 编译成功后，执行可执行文件10-5，输入如下： 10-5]#./10-5

31 10.4基本绘图函数的应用 Draw_HLine函数说明： Draw_VLine函数说明： Draw_Ellipse函数说明：
Draw_Round函数说明：

32 10.5 图片与文字显示 常用的函数及功能 ：

33 10.5 图片与文字显示 例10.6 设计一个程序，初始化视频子系统，设置显示模式为640×480,画面的色深为16位，加载位图b.bmp，并按照一定的顺序把位图排列显示。设程序名为10-6.c，存放在/home/cx/下，位图名为b.bmp也存放在该目录下。 分析 在程序中编写一个showBMP()函数，用来显示位图，在主函数中调用它。showBMP()函数中给位图分配一个surface，得到位图的大小。在主函数中先初始化视频系统，设置视频模式，指定第一张图片的位置，然后利用for循环显示图片。 步骤1 设计编辑源程序代码。 cx]#gedit 10-6.c

34 10.5 图片与文字显示 步骤2 编译程序。 步骤3 编译成功后，执行可执行文件10-6，输入如下：
10.5 图片与文字显示 步骤2 编译程序。 切换到源程序所在目录下，用gcc进行编译，编译的时候加上-lSDL和-lpthread选项。 cx]# gcc -I/usr/include/SDL -lSDL -lpthread 10-6.c -o 10-6 或写成makefile文件,然后执行make命令。makefile文件代码如下： CC = gcc AR = $(CC)ar CFLAGS= -I/usr/include/SDL -lSDL -lpthread 10-6:10-6.c $(CC) $(CFLAGS) $^ -o clean: -rm -f $(EXEC) *.elf *.gdb *.o 步骤3 编译成功后，执行可执行文件10-6，输入如下： cx]#./10-6

35 10.5 图片与文字显示 SDL_LoadBMP函数说明： SDL_BlitSurface函数说明：

36 10.5 图片与文字显示 思考题：要求自行制作一张矩形位图，用位图实现屏幕左上角到屏幕右下角对角线连接（模拟图如下图所示），图片按照阶梯的形式在程序运行的时候显示出来，同时让屏幕停留5秒，在Linux下编辑、编译、运行。

37 10.5 图片与文字显示 例10.7 设计一个程序，初始化视频子系统，设置显示模式为640×480,画面的色深为16位，使用SDL_ttf库在屏幕上显示“Linux下TrueType字体显示示例”，字体大小为38，颜色为红色。设程序名为10-7.c，存放在/home/cx/下。 分析 显示中文字体首先要打开字库文件，字库用的是simsun.ttc文件，视频子系统的初始化和设置都和之前一样，然后分配一个专门用来显示字体的surface，使用SDL_BlitSurface（）对象快速转换。 步骤1 准备工作。 把Windows下C:\WINDOWS\Fonts中的simsun.ttc文件拷贝到Linux下的/usr/share/fonts/下，用于显示中文。 步骤2 设计编辑源程序代码。 cx]#gedit 10-7.c

38 10.5 图片与文字显示 步骤3 编译程序。 切换到源程序所在目录，用gcc进行编译，在编译时需要添加-lSDL_ttf参数选项。
10.5 图片与文字显示 步骤3 编译程序。 切换到源程序所在目录，用gcc进行编译，在编译时需要添加-lSDL_ttf参数选项。 cx]# gcc -I/usr/include/SDL -lSDL -lpthread 10-7.c -o lSDL_ttf 文件保存的时候请使用UTF8格式保存，才能正常显示中文字体。

39 10.5 图片与文字显示 TTF_OpenFont函数说明 TTF_SetFontStyle函数说明

40 10.5 图片与文字显示 TTF_RenderUTF8_Blended函数说明

41 10.5 图片与文字显示 TTF_Init函数说明 TTF_CloseFont函数说明

42 10.5 图片与文字显示 TTF_Quit函数说明 思考题：编写一个程序，主要实现粗体、斜体、下划线等字体效果，同时让屏幕停留5秒。

43 10.6 动画 动画的常用函数： 例10.8 设计一个程序，实现矩形的运动，矩形是通过位图显示，当矩形碰到四边时，会自动反弹，按任意键退出。按程序名为10-8.c，存放在/home/cx/下，位图素材（b.bmp）也存放在该目录下。 分析 加载位图直接使用SDL_LoadBMP()函数。位图在xy方向上的坐标都以3个单位的移动量在一定的时间差内起规律性变化，向左直至键盘激发退出事件。

44 10.6 动画 流程图

45 10.6动画 步骤1 设计编辑源程序代码。 cx]#gedit 10-8.c

46 10.6动画 步骤2 编译程序。 步骤3 编译成功后，执行可执行文件10-8，输入如下：
步骤2 编译程序。 切换到源程序所在目录下，用gcc进行编译，编译的时候加上-lSDL和-lpthread选项。 cx]# gcc –I/usr/include/SDL –lSDL 10-8.c –o 10-8 –lpthread 步骤3 编译成功后，执行可执行文件10-8，输入如下： cx]#./10-8

47 10.6 动画 SDL_GetTicks函数说明 SDL_Flip函数说明
思考题：编写一个程序，主要实现圆球运动效果，使用键盘事件，按下Esc键退出程序。

48 10.7 三维绘图 三维绘图的常用函数：

49 10.7 三维绘图 例10.9 设计一个程序，在屏幕上绘制一个立体矩形，并按照一定的角度和方向旋转。设程序名为10-9.c，存放在/home/cx/下。 分析 创建三维立体图形要先做一系列的初始化设置，要设置视觉角度、背景色、深度缓存、选择投影矩阵等，三维绘图中比较重要的就是矩阵的运用。具体到绘制的时候，是画一个个平面，同时要注意角度的选择和设置。其中，glTranslatef函数是用来指定具体的值来多元化矩阵，glRotatef函数让对象按照某个轴旋转，两者综合运用使得三维图形有不同的效果。 步骤1 设计编辑源程序代码。 cx]#gedit 10-9.c

50 10.7 三维绘图 步骤2 程序调试。 步骤3 编译成功后，执行可执行文件10-9，输入如下：
步骤2 程序调试。 切换到源程序所在目录下，用gcc进行编译，编译的时候除了-lSDL和-lpthread选项，还需加上-lGL和-lGLU参数，因为在这程序中用到三维库的支持。 cx]#gcc –I/usr/include/SDL –lSDL 10-9.c –o 10-9 –lpthread –lGL -lGLU 步骤3 编译成功后，执行可执行文件10-9，输入如下： cx]#./10-9

51 10.7 三维绘图 glViewport函数说明 glClearColor函数说明

52 10.7 三维绘图 glClearDepth函数说明 glDepthFunc函数说明

53 10.7 三维绘图 glShadeModel函数说明 glMatrixMode函数说明

54 10.7 三维绘图 glLoadIdentity函数说明 gluPerspective函数说明

55 10.7 三维绘图 glTranslatef函数说明 glRotatef函数说明

56 10.7 三维绘图 glBegin函数说明 glColor3f函数说明

57 10.7 三维绘图 思考题： 编写一个程序，实现正方体的旋转方向为顺时针，并且使得旋转的速度加快，正方体的上下面颜色为红色，左右面颜色为绿色，前后面颜色为蓝色。（小提示：旋转的速度可以根据旋转的角度值改变量来实现）。 把例10.9中的正方体改成三棱锥。

58 10.8 游戏程序入门 例 利用SDL库，综合运用以上所学的函数及方法，实现大炮打飞机的游戏。游戏初始化的时候大炮在屏幕底部中间，从屏幕的上方不断出现飞机。可以使用键盘左右方向键控制大炮的左右移动，使用空格键发射炮弹。飞机水平运行，并逐渐往下移动。大炮弹若是击中飞机，飞机爆炸。系统会立即再产生飞机，保证飞机数量为两架。假设飞机下降到大炮的位置，那么大炮就被炸毁，游戏结束。程序名为10-10.c，存放在/home/cx文件下。本题中用到的素材大炮、飞机、背景图片等放在data文件夹里，data文件夹放在/home/cx文件下。 分析 游戏实现一架大炮发射炮弹去射击飞机的游戏。LoadImage()函数把位图添加进来，RunGame()中，调用DrawObject()把大炮、飞机等初始化，collide()函数处理炮弹击中飞机的情况，根据实际情况用CreateAir()创建新的飞机，最后用collicle()处理飞机击中大炮，游戏结束。 流程图如图所示。

59 10.8 游戏程序入门 步骤1 设计编辑源程序代码。 cx]#gedit c

60 10.8 游戏程序入门 步骤2 程序调试。 步骤3 程序结果运行。
10.8 游戏程序入门 步骤2 程序调试。 切换到源程序所在目录下，用gcc进行编译，编译的时候加上-lSDL和-lpthread选项。 cx]# gcc -I/usr/include/SDL -lSDL c -o –lpthread 或写成如下的makefile文件，然后执行make命令。 CC = gcc AR = $(CC)ar CFLAGS= -I/usr/include/SDL -lSDL -lpthread 10-10:10-10.c $(CC) $(CFLAGS) $^ -o clean: -rm -f $(EXEC) *.elf *.gdb *.o 步骤3 程序结果运行。

61 10.8 游戏程序入门 思考题： 改写程序10-8.c，画一块档板，用左右键移动档板，档住下落方块，使得方块不会与底边相碰。当方块与档板相碰时，方块反弹，游戏继续，积分加1；当方块与左、上、右边相碰时反弹，积分不变；当方块与底边相碰时，游戏结束，显示积分值。 改写程序10-10.c，改变飞机、大炮的形状与数量，其余与题10-10.c类似。

62 思考与实验 参考SDL_draw库中关于椭圆的函数介绍，画一个椭圆。 利用画线，画圆和画矩形，自行创意设计三者结合的图形 。
编写一个程序，运用绘图、位图与文字显示的知识，实现看图识字的效果。即画一个圆，用文字标志“圆”，用位图形式导入一些图片，例如苹果位图，文字标志“苹果”，程序运行结果如下图所示：

63 思考与实验 参考例10.10，模仿飞机打大炮的原理，实现一个军舰发射鱼雷打怪物的游戏。要求军舰在屏幕上方，向下发射鱼雷，打击不断从屏幕下方出现的怪物，如果怪物上升到和军舰相碰的时候，游戏结束。相关的素材图片请自行准备。 调试程序，根据需要制作相关素材。