一种基于可视化界面绘制图形自动生成C语言代码软件的设计与实现

宋雅娟 冯 萍

1(苏州市职业大学计算机工程学院 江苏 苏州 215104)2(长春大学计算机科学技术学院 吉林 长春 130022)

0 引 言

C语言是一门被广泛开设，普遍使用的计算机程序设计语言，但由于C语言自身特点以及教师教学方法和学生基础等各方面因素导致C语言课程在教学过程中存在很多问题，制约着课程教学质量[1]。教学一线的教师为了提高课程教学质量，进行了种种教学改革。从教学内容的改革[2]到教学手段的改革[3-4]都做了大量的实践。Internet上也提供大量的教学资源供学生学习下载。尽管如此，学生长期反复地学习基础知识和经典算法，虽然可以读懂和编写简单的程序，但很难形成对编程的兴趣，也没有自主思维和实践创新的意识[5]。图形动画和动画游戏一直是青年学生的最爱，如果在C语言的教学中从编写图形动画或者动画游戏入手，让学生可以用C语言设计出自己的图形动画或者是动画程序[6]，一定会激发学生学习C语言程序的极大兴趣。EasyX图形库[7]融合了Visual C++开发平台和简单的绘图功能，可以帮助C语言初学者快速上手图形和游戏编程[8]。EasyX可以从网上下载，安装简单。为了更好地帮助学生快速学会EasyX来制作图形程序，掌握EasyX开发图形程序的方法，笔者结合教学实践开发了一个C语言图形化程序开发辅助软件。软件提供了可视化界面，借鉴Windows自带画笔的绘图功能。学生启动软件后只要在界面上使用提供的绘图工具栏中的绘图工具即可在画板上画出自己需要的组合图形，软件自动根据学生绘制的图形位置、大小、颜色生成对应的基于EasyX库C语言代码，并可直接运行该代码获得其在C语言环境中的运行效果。学生可以通过此软件，快速掌握C语言程序框架，EasyX函数库的具体使用方法。在掌握C语言基本的图形程序方法后，学生可自主学习C语言语法知识，开发更复杂的动画程序。

1 软件功能简介

软件提供了一个集绘图工具栏、绘图画板、代码面板为一体的可视化界面，如图1所示。

图1 代码自动生成器软件运行效果图

软件左侧是仿Windows自带画笔程序的绘图工具栏，其中有基本图形工具如直线、矩形、椭圆等，线条粗细选择工具栏及颜色设置工具栏。中间为绘图界面，学生可选择左侧工具栏上的工具按钮后在绘图界面使用鼠标自由绘图。在绘图过程中，右侧的代码面板会自动生成对应的C语言程序代码。学生可以边绘制，边体会C语言绘图功能，为了感受语言程序的运行效果，学生可以把生成的代码复制到自己的Visual C++环境中运行，也可以点击图1中的运行按钮直接在软件中查看实际的运行效果，如图2所示。

图2 中自动生成代码点击运行后的实际运行效果

2 软件功能实现

2.1 总体功能设计

软件的总体架构图如图3所示。

图3 系统总体架构图

2.2 绘图工具栏与EasyX库函数

用户进行绘图首先需要在绘图工具栏点选提供的基本图形，如矩形、椭圆、直线、多边形、三角形等，以单选按钮方式实现。绘图工具栏中提供了部分EasyX库中有直接函数实现的基本图形如直线、椭圆、矩形、圆角矩形及多边形。三角形、菱形等图形没有直接直观的对应函数，但在绘图中又比较常见，所以也在工具栏上加以表示，这样更有助于学生掌握EasyX中多边形函数的功能。图形工具与EasyX图形库函数的对应关系如表1所示。

表1 ToolPanel中的绘图基本组件

续表1

软件主要完成的是当用户选择绘图面板上的具体图形进行绘画时，根据鼠标经过途径获取相应坐标值，生成对应的EasyX函数及参数。以图形出现的先后顺序安排代码以顺序结构形式展现。

2.3 线条选择与颜色设置

绘制图形时，如果不特别选择，则自动选择最细的线条进行各种图形的绘制。线条选择面板只提供了四种尺寸的线条，可供学生了解线条的设置方法，之后便可以根据此规律自行修改代码以使用其他尺寸的线条，更有助于学生自行设计自己的线条设置程序。

上述四种线条在EasyX的设置函数调用分别是：

(1) setlinestyle(PS_SOLID,1);

(2) setlinestyle(PS_SOLID,3);

(3) setlinestyle(PS_SOLID,7);

(4) setlinestyle(PS_SOLID,11)。

调色板面板是以不同颜色块为图形的按钮集合，用于选择线条颜色和填充颜色。如果填充颜色按钮被按下则点选颜色作为填充颜色，否则作为线条颜色。颜色以按钮方式展示常用的颜色，没有提供自定义颜色是为了让学生了解EasyX的设置颜色方法后自行修改代码来完成其他颜色的设计。

颜色设置的EasyX函数为setcolor();对应填充颜色的图形绘制方法有专门的函数，见表2。

表2 EasyX使用特定填充色绘制填充图形的函数

2.4 代码自动生成及真实环境运行

本部分面板有两部分构成，一个部分是JTextArea控件来存放生成的代码，学生也可在此部分直接修改代码，通过运行按钮来查看运行结果，从而加深自己对EasyX图形库中函数及参数的理解。

代码生成时机在图形绘制结束之时，安排在鼠标事件MouseReleased之中，生成代码流程见图4。

图4 C语言程序生成过程流程图

为了能够直接在软件中感受到程序的实际运行效果，特设计实现了调用C语言环境运行C程序的功能，主要包括将生成代码编译成可执行文件和执行可执行文件两部分。

C语言程序的编译使用的是对应的编译器cl.exe，因此使用下述语句来调用Visual C++的动态链接库来编译生成的C语言源程序，形成可执行文件。

Process p=run.exec(″cl /defaultlib:

kernel32.lib user32.lib gdi32.lib

winspool.lib comdlg32.lib advapi32.lib shell32.lib ole32.lib oleaut32.lib uuid.lib odbc32.lib odbccp32.lib ″+filename+″.cpp″);

调用Process q=run.exec(filename)来运行生成的可执行文件。

2.5 椭圆C语言代码自动生成的实现

为了完成不同基础图形的代码自动生成的统一调用，程序中定义了基础抽象类MyShape，类中设计抽象方法getCode。在不同类中重写getCode方法，本节以椭圆为例来介绍重写后的getCode方法。步骤如下：

(1) 生成StringBuffer对象。

(2) 提取椭圆对象的线条RGB颜色lR,lG,lB，并根据颜色值生成EasyX库代码：setcolor(RGB(″+lR+″,″+lG+″,″+lB+″))。

(3) 提取椭圆对象的线条粗细成员变量lineWidth，并生成C函数：

setlinestyle(PS_SOLID,″+lineWidth+″)

(4) 提取椭圆对象外接矩形的左上角坐标left,top与右下角坐标right和bottom,并生成C代码：

ellipse(″+Math.min(left, right)+″,″+Math.min(top, bottom)+″,″+(Math.min(left, right)+Math.abs(left-right))+″,″+(Math.min(top, bottom)+Math.abs(top-bottom))+″)

(5) 将代码按顺序append入StringBuffer对象并设置入CodePanel中的JTextArea中。

3 结 语

随着计算机的发展，计算机编程语言的学习已经越来越普及，目前不只大学生学习计算机语言，中小学生的计算机编程课堂也越来越活跃。设计合适的教学方法，提高学生学习兴趣并激发创作欲望是目前程序教学的最大需求。在研究基于EasyX图形库的C语言教学案例的应用后，特开发了本软件用以辅助学生方便快速地掌握EasyX库的图形开发方法。学生在可视化界面中使用鼠标轻松绘图，根据自动生成的C语言程序来自主学习。目前软件还只能用来开发图形程序，后续会继续完善软件，增加C语言程序结构逻辑、动画图形及游戏的可视化开发，帮助学生更加深入地掌握C语言功能。