基于Qt的算法可视化框架的设计*

余　雨　廖　涛　高文胜　李梦涛

(安徽理工大学计算机科学与工程学院　淮南　232000)



基于Qt的算法可视化框架的设计*

余雨廖涛高文胜李梦涛

(安徽理工大学计算机科学与工程学院淮南232000)

摘要随着计算机技术的飞速发展和普及，传统的算法教学模式已经不再适合学生学习比较抽象的算法了。多媒体教学凭借其自身在教学方面的优势而在基础教育中迅速发展，相对粉笔加黑板的原始教学，多媒体教学的优势有以下几点：程序的执行过程更加生动便捷；数据演变更加形象直观；教学的时间成本和金钱成本都相对较低等；此外，它的灵活性、随机性以及全方位和立体化的信息展示形式对教育环境优化、提高教学质量起到了极大的作用。论文提出了一种基于Qt的算法可视化框架，利用该框架可以实现算法可视化的开发。

关键词算法教学； 可视化算法框架； Qt

Class NumberTP311

1　引言

在计算机能力的培养中，算法是学生进行学习的一个主要内容，算法是一个程序的灵魂，一个好的算法不仅节约时间、空间还能提高系统的稳定性。因此算法在计算机教学中占有举足轻重的地位，但同时因为算法的抽象性使学生难以理解，严重影响了学生的学习兴趣[1]。算法可视化教学是一种全新的教学形式，它以计算机辅助多媒体作为基础，将抽象复杂的算法程序通过可视化展现给学习者从而起到激发学习者的创造性思维[2]，这种模式在西方发达国家已经取得成功。将学生从传统的黑板教学中解放出来，使学生的理解力和创新能力得到升华[3]。

本文提出设计一种基于Qt的算法可视化框架，此框架利用了Qt的强大的GUI和动画处理功能[4]，可以在此框架的基础上进行算法可视化软件的开发，将复杂枯燥的算法进行可视化模拟。

2　框架总体设计思想

本框架设计工作主要由以下两部分构成： 1) 前期算法的收集和分类。 2) 算法的可视化框架搭建。

2.1算法的收集和分类

算法的收集和分类是进行框架设计的前期准备工作，在计算机中算法的种类复杂繁多，前期需要对算法的种类进行分析估计，然后对算法的共性进行提取，对于不同部分进行抽象化[5]，从而可以给不同的算法提供一个统一的接口调用。目前该框架主要支持的是数据结构教学和算法教学中一些基本的排序以及树的遍历算法[6]。所以先要对这两类教学中常用的算法进行收集整理并加以分析，然后在此基础上进行接口化工作。

2.2算法可视化框架的搭建

本系统所实现的可视化框架主要由四部分组成，它们分别是算法抽象结构体、演示视图、演示元素转换、动画操作。

2.2.1算法抽象结构体

算法抽象结构体中实现了对不同算法的提供了一个统一的接口，通过该接口屏蔽了操作不同算法的实现细节，再添加新的算法不会影响整体框架的变动。在算法抽象结构体中包含了算法的两类存储结构，链式如图1和树形结构如图2。

图1　链式结构呈现方式图

图2　树形结构呈现方式图

2.2.2演示视图

演示视图是基于Qt的图形视图框架，该框架提供一个surface来实现对大陆的图形项进行管理操作，提供了三个体系架构场景、视图和图形项。本框架的演示视图正是在此基础上进行封装，框架每次演示之前，将先创建一个视图，视图中包含的就是进行演示的区域，同时将一个场景绑定到视图，因为场景提供了一个对大量图形项进行操作的接口，所以框架就可以同时对算法中大量的图形项进行操作。该部分最主要的问题就是怎样把算法演示的数据转换为Qt视图中所支持的图形项，这样每一个元素其实转换之后就对应于一个图像元素，软件在模拟算法的时候就对该元素进行操作，反映到界面上也就是每个图形元素的操作。

2.2.3演示元素转换

演示元素转换是针对需要进行算法演示的数据对象，将数据对象转换为图形添加到场景中。算法对数据的操作反映到演示中的是演示元素的动画[7]。演示开始将先开辟一个场景空间，对场景的宽度和高度进行设置。因为本框架支持两种算法存储结构，所以在开辟两个数据元素空间，保存到QMap容器中，该容器可以提供key和value存储方式，在该框架中保持的就是数据项对应的图形项。然后遍历所有的图形项，让其在界面显示。本框架对图形项的另一个主要的操作就是数据改变反映到视图中就是图像项的改变，这里主要通过将原始数据经过算法处理之后，再将每一步的变化结果保存到QMap中。然后再对QMap进行遍历，从而实现算法的动态模拟。

2.2.4动画操作

框架对Qt原有的动画操作进行封装，在对不同的算法进行演示的时候可以使用同一套动画方案。所有的动画操作均是针对不同算法的公共演示操作。例如：元素平移、交换、添加等动画操作。动画操作其最主要的就是将要进行操作的动画添加到QParallelAnimationGroup中，然后设置该动画所需要播放的时间，开始位置以及结束的位置，之后调用start()就可以保持演示动画的并行运行。另外Qt还提供了众多的动画属性设置，可以呈现丰富的动画效果，Qt中有个动画操作的类[8]如表1所示。

表1　Qt动画框架类

3　框架待优化方面

计算机中的算法是多种多样的，而且算法的复杂度也不尽相同，为了加深学生对算法的理解，这样就必须使学生能够自己调试演示程序或者通过编写自己的算法演示程序。这样框架中就必须加入编译调试单元，对于学生自己输入的算法进行编

译显示，让软件更加智能化。另外还可以考虑加入提问机制[9]，使学生在进行算法演示的时候系统可以根据学生的的情况来提出和该算法相关的问题[10]，从而更能帮助学生对算法的深度理解。

4　结语

本框架为算法可视化教学研究中的一次全新探索，随着可视化教学辅助系统的不断发展，促使在算法设计等专业基础课程体系的教学中增加了新的教学手段。本框架结合目前先进的GUI库，利用其强大的图形显示能力，进一步探索开发，力求通过该框架开发出简便、高效的算法可视化系统，在传统的算法教学中融入可视化教学，使得学生从枯燥乏味的算法中解脱出来，提高了学生的学习兴趣，也提高了教学的趣味性和实用性[11]。初步通过该框架设计的系统较为令人满意，在今后的优化和修改中将继续对该框架进行完善。

参 考 文 献

[1] 刘亚琴.基于三层结构模型的算法可视化教学研究与实践[D].长沙:湖南师范大学,2007.

LIU Yaqin. Research and practice of visual teaching based on the three layer structure model[D]. Changsha: Hunan Normal University,2007.

[2] 李晓鸿,刘丛,骆嘉伟.面向计算思维训练的算法可视化教学系统研究[J].计算机教育,2014(21):78-81.

LI Xiaohong, LIU Cong, LUO Jiawei. Research on the visual teaching system for computing oriented thinking training[J]. Computer Education,2014(21):78-81.

[3] W. Pierson, S. Rodger. Web-based animation of data structures using JAWAA[C]//Proceedings of the 29th SIGCSE Technical Symposium on Computer Science Education, Atlanta, GA, USA, ACM,1998:267-271.

[4] 霍亚飞.Qt及Qt Quick开发实战精解[M].北京:北京航空航天大学出版社,2012:202-224.

HUO Yafei. Qt and Qt Quick development of combat[M]. Beijing: Beihang University Press,2012:202-224.

[5] 杨政,王强.算法图形演示框架构建方案研究[J].科技信息(学术研究),2007,20:092.

YANG Zheng, WANG Qiang. Research on the construction scheme of the algorithm graphic demonstration frame[J]. Scientific and Technological Information(Academic Research),2007,20:092.

[6] 孙凌宇,冷明,郭恺强,等.计算机算法知识领域的计算过程可视化教学研究[J].高等财经教育研究,2014,4(S1):6-8.

SUN Lingyu, LENG Ming, GUO Kaiqiang, et al. Research on Visualization Teaching of computer algorithm in the field of computing algorithm[J]. Research on Higher Education of Finance and Economics,2014,4(S1):6-8.

[7] Reif I, Orehovacki T. ViSA: Visualization of sorting algorithms[C]//MIPRO, 2012 Proceedings of the 35th International Convention. IEEE,2012:1146-1151.

[8] 霍亚飞.Qt Creator快速入门[M].北京:北京航空航天大学出版社,2012:243-282.

HUO Yafei. Qt Creator quick start[M]. Beijing: Beihang University Press,2012:243-282.

[9] Wong Y F, Sideris A. Learning convergence in cerebellar model articulation controller[J]. IEEE Trans on Neural Networks,1992,3(1):115-121.

[10] Choristos Foutsitzis, Stavros Demetriadis. AlCoLab. Architecture of Algorithm Visualization System[D]. Thessaloniki: Aristotle University of Thessaloniki,2008:172-174.

[11] 赵慧臣,王淑艳.知识可视化应用于学科教学的新观点[J].开放教育研究,2014,20(2):4-10.

ZHAO Huicheng, WANG Shuyan. Knowledge visualization applied to new perspectives of subject teaching[J]. Open Education Research,2014,20(2):4-10.

收稿日期:2015年10月9日,修回日期:2015年11月27日

基金项目:安徽理工大学大学生创新创业训练计划项目(编号：AH201410361068)；安徽理工大学2013年度校级重大教学改革研究项目“多媒体教学中算法可视化交互式教学的研究和实现”资助。

作者简介:余雨，女，硕士研究生，研究方向：软件编程、人工智能、物联网技术。廖涛，男，博士，副教授，研究方向：Web数据挖掘、人工智能。高文胜，男，硕士，研究方向：人工智能、智能信息处理、软件编程。李梦涛，男,研究方向：物联网工程等。

中图分类号TP311

DOI:10.3969/j.issn.1672-9722.2016.04.039

Design of Algorithm Visual Frame Based on Qt

YU YuLIAO TaoGAO WenshengLI Mengtao

(School of Computer Science and Engineering, Anhui University of Science and Technology, Huainan232000)

AbstractWith the rapid development and popularization of computer technology, the traditional algorithm teaching mode is no longer suitable for students to learn more abstract algorithm. Multimedia teaching has a rapid development in basic education with its own teaching advantages, compared with the original teaching of the relative chalk and blackboard, multimedia teaching has the following advantages: procedures for the implementation of more vivid and convenient, data evolution is more intuitive, time cost and cost of money are relatively low. In addition, it has a great effect on the optimization of educational environment and the improvement of the quality of teaching. In this paper, a visualization framework is proposed based on Qt, this framework can be used to realize the visualization of the algorithm.

Key Wordsalgorithm teaching, visualization algorithm framework, Qt