基础教学图形绘制系统的设计与实现

祁少杰

摘要：随着现代化教育背景下新型电教设备的兴起以及交互式电子黑板逐渐普及，现有的图形绘制系统因其依赖输入设备、绘制方式烦琐等问题，无法满足课堂教学应用场景中存在的诸多需求。为了解决此现状，开发基础教学图形绘制系统，从程序设计到应用开发的角度阐述此系统的细节与创新，改善现代化教学中图形教学的现状，提升课堂教学质量。

关键词：现代化教育;电教设备;交互式电子黑板;图形绘制;课堂教学

中图分类号：TP311.1;TP399      文献标识码：A

文章编号：1009-3044（2022）12-0007-03

开放科学（资源服务）标识码（OSID）：

1 引言

当前，随着计算机网络及显示设备的快速发展，交互式电子黑板以其图文并茂、简单易用等优点在教育教学中逐渐被广泛地应用。而图形绘制作为传统教学中不可或缺的一环，它在电子黑板应用中的表现也尤为重要[1-2]。随着电子黑板的普及以及教师对于电子黑板应用的深入，市场与用户对电子黑板绘图功能也提出来更多更高的要求。一方面是对于各类几何图形的绘制，如何更加快速精确、节约时间，另一方面是如何满足实际教学场景的绘制需求。

一个符合老师使用习惯、符合数学逻辑、操作简便快捷的图形绘制系统，可以大大减少教师在图形绘制时花费的时间，提升板書的整洁程度，大大提升学生在课堂上知识接受。

2 系统功能设计

2.1 需求分析

1）电子黑板输入方式单一，图形绘制仅依靠触摸笔，为此通过垂直位移判定和停顿时间判定，实现一次落笔绘制。

2）图形绘制点位刻画不清，绘制方式单一，不合数学逻辑，为此采用多种绘制方式，位置刻画图形，特征点控制。

3）教师为多个班级教课，教学内容重复，图形反复绘制，为此提供图形保存与打开功能，一次绘制，反复使用。

2.2 系统目标功能

实现一款基于位图的图形选择移动及多方式绘制的图形绘制系统，系统功能包含：日常教学图形的多种方式的绘制，图形选择及移动，已绘制图形的保存，对已有图片资源的加载呈现[3]。

3 系统功能实现

3.1 图形绘制

图形绘制作为理科类课程重要的教学内容，如何快速准确绘制所需图形是至关重要的。本节主要讨论日常教学所涉及图形的各自的绘制方式及其实现方案，使图形绘制过程合乎数学原理、灵活、简单快捷，符合教师绘制习惯;可以绘制出各种比例角度的图形;图形美观、精确，满足教师的日常图形教学[4]。

1）实时绘制思路

通过异或处理，使得同一位置的重复绘制会相互抵消，显示为空。以此为起点，如图1所示，让鼠标或画笔的每一次移动，都去抵消旧图，记录点位，绘制新图，以此来达到实时绘制的效果[5]。

通过实时绘制，可以保证教师在绘制过程中时刻通过调整画笔来修改所绘制的图形，图形实时更新，每一次移动，都可以精确地控制图形的成像，方式简单快捷，对图形的绘制控制直观。

2）点位固定方式

传统的绘制方法例如Word中的形状绘制和Windows自带画图应用中的诸多图形绘制，均是采用单次点击加滑动的方式，来实现使用鼠标简单绘制图形的需求。这种绘制方式的优点在于绘制图形简单便捷，不需要提前学习便可快速上手，对于对图形细节、精度要求较低的使用场景而言，较为合适。

而在实际的教学应用场景中，教师更加希望图形绘制方式便捷，符合教学需求，并且绘制出的图形灵活多样。而这种需求在缺乏除画笔之外的输入设备的条件下，则对日常教学图形的绘制方式。提出了较高要求。如何在有限且又尽可能少的操作内完成绘制，点位的固定方式是必须要讨论的问题。为此提出了两种新的点位固定方式。

①垂直位移判定

垂直位移判定方法通过判定鼠标的垂直位移距离，当超过某个阈值后，即可固定点位与图形。垂直位移判定方法适用于一些有水平或垂直线段的图形绘制过程中，实现简单但应用却极为方便，扩展了图形的绘制思路。

②时间停顿判定

时间停顿判定则是通过停顿的方式来固定点位，当画笔停顿满足一定时间后，即可固定点位，判定流程如图2所示。时间停顿的方法突破了垂直位移判定中水平或垂直的限制，使一次落笔所能绘制的图形更加丰富，搭配垂直位移判定方法，也使图形的多样化绘制成为可能。

3）简单平面图形绘制方案

平面图形绘制是图形绘制的基础功能，虽然图形构成简单，但日常使用仍有许多需求，这些使用最为频繁的图形，往往被人忽略了其绘制方式的多样性以及在日常教学中的绘制需求。

以三角形为例，在设计过程中将三角形大致归为了两类，一类为三边中任意一边平行于横向坐标轴，这类三角形在实际场景中的使用和出现频率最高;另一类为任意三角形，它包含第一类三角形。

根据第一类三角形的一边平行于横向坐标轴的特性，使用垂直位移判定的方法，以落笔点为平行边的起始端点，平行移动至此边的另一端点，这个过程中图形以一条直线呈现。而后上下移动，使画笔的垂直位移量超出一定阈值，三角形的第二个端点被固定，三角形开始呈现，此时的画笔控制三角形的最后一个端点，直至抬笔，图形固定，三角形绘制成功。如果对底边的固定不满意，可以使画笔靠近底边一定范围内，重新确定第二个端点，或是在此时抬笔，则直线消失，图形绘制的痕迹消除，此时可以快速重新开始绘制。

当绘制的三角形要求为任意角度的三角形时，那么可以采用第二种绘制方式，相较于通过垂直位移判定来固定第二个点位，时间停顿判定的方法所固定的第二个点位更加地灵活，通过在指定位置停顿一段时间，即可固定第二个点，打破了第二个点只能在水平方向上的限制，实现三角形的任意角度绘制。

4）函数图形绘制方案

函数图形作为中学中出现最为频繁的教学图形，也是程序设计中的重要一环。

[C=（yd-ym）1（xm-xd）]                             （1）

指数函数的绘制通过两点来确定，分别为指数函数的特殊点（0，1）点和函数上任意一点，对应落笔点[xd]与抬笔点[xm]。根据绘制过程中记录的特征点，为图形绘制划分区域，在区域内通过横向坐标不断累加计数参数，将参数代入函数公式，实现计数参数在纵坐标上的函数投影，形成诸多点位，如公式（2）与（3）所示，使相邻点位相连，此时图像由多段线段组成，图形呈现。随着点数的增多，图像会逐渐光滑，且连续性良好。对于控制点位的选取，时刻遵循控制点位于函数图形上，且与函数的数学特性点相关联。

[xi=xd-β*（xm-xd）+i*（2β+1）*（xm-xd）/α     0≤i≤α]

（2）

[yi=（xi-xd）|xi-xd|C（xi-xd）+yd]                            （3）

公式（2）中的均分参数[α]为绘制时函数显示的分割精度，[α]越大，函数越光滑，但计算量也越大，控制参数[β]为绘制时画笔的控制程度和函数的显示范围，[β]越大，代表绘制函数时控制的函数段越小，显示的函数越多，[β]越小，则反之。通过调整[α]均分参数和[β]控制参数，可以达到最合适的函数图形绘制效果。

5）立体图形绘制方案

立体图形绘制时，主要需要解决的问题包括为了严格按照一次落笔完成绘制的原则而对立体图形绘制时的绘制方式进行探索与设计;以及同一图形的不同方向不同阶段绘制导致的图像虚实线问题。

以四棱柱为例，四棱柱第一阶段通过垂直位移判定绘制出平行四边形，对应四棱柱的底面，第二阶段为停顿等待图形消失，而后任意移动确定四棱柱的高度。而虚实线的判定则需要结合绘制过程中点位信息从而对不同情况做出判定，以此决定点位间的虚实情况。图5为实际的绘制过程。

3.2 图形选定

为实现图形的移动，首先需要解决的问题是如何选中图形，以及通过怎样的逻辑来判定选中。

针对图形的选定问题，当图形绘制成功后，会为每个图形确定一个矩形范围，如图6所示。这个范围会用最小的矩形面积来将图形全部包裹在内，如图6所示。当点击移动功能并落笔在图形的矩形范围内时，即可选定图形。这种方式不仅操作简单直观，且所需的计算与存储代价都极小。

3.3 图形移动

图形移动包括了图形选定、移动、数据存储和数据更新等一系列的操作，当经历了图形选定后，程序确定了唯一的图形序号，这个序号指向了在内存中存储的一系列点位。

通过捕捉鼠标的坐标输入，采用记录落笔点和计算画笔移动距离，确定了图形的移动距离。将内存中的点位信息读取并与移动距离相加，便是此刻图形的实际位置。将这些实际位置输入到图形的绘制函数中，对应不同的点位对图形进行绘制-抵消-再次绘制的操作，每次鼠标的移动都是对数据的一次更改，以及对图形序号对应的绘制函数的一次调用，直至抬笔瞬间，将更改后的数据更新至内存，整个图形移动的过程结束。

3.4 数据存储

存儲数据的载体，均选用了可变的二维数组，以最小的内存代价来实现对图形的存储。N表示目前已绘制的图形总数，当新的图形被绘制时，数组大小动态改变，确保内存空间的有效利用。

图8为数据存储结构图，其中：tuxid[N]用来标记图形序号并记录图形的绘制顺序。tuxcshu1[2，N]至tuxcshu4[2，N]四个数组用来记录图形在绘制过程中生成的关键点位。tuxcshu5[2，N]和tuxcshu6[2，N]两个数组用来在抬笔时记录每个图形的最小矩形范围。tuxcshu7[2，N]数组用来为每一个图形定义一个特征点，在图形移动时的选定判定使用。

3.5 图形保存与打开

点击保存文件即可自动将绘制好的图形保存至桌面，点击打开图标并在文件选择界面选择图片后，通过在指定位置点击以确定图片将要呈现在板面上的中心位置，而后移动来调整图片的大小呈现，从而实现图片打开功能，以支持的可打开并呈现在板面上的图片类型包括BMP格式和JPG格式。

通过对图形保存和打开功能的相互配合使用，较为合适地解决了教师在多个教室反复绘制相同的问题，使教师可以在一次绘制后，多处使用，节约了教师教学时间的同时，也让优秀教学资源的分享变得更为方便快捷。

4 结束语

看似简单的基础教学图形绘制系统，要想让其在新兴电教设备中加以应用，真正被教师所使用被学生所接受，仍然有许多问题需要解决。一款实用性强的教学图形绘制系统，在克服传统黑板绘制图形烦琐、耗时、依赖教具等问题的同时，更加速了交互式电子黑板的推广与应用，推动智慧教室建设以及现代化教学的脚步。

参考文献：

[1] 李新宇.课堂教学中交互白板的应用层次分析[J].中国电化教育，2005（3）：51-54.

[2] 郭娟.数字图像在多媒体课件中的应用研究[D].济南：山东师范大学，2006.

[3] 张晓东，耿南平，许福东.计算机图形学与计算机绘图──机械CAD技术的理论（方法）与实践（二）[J].石油机械，1997，25（7）：50-53.

[4] 吴敏.交互式电子白板系统软件的设计与实现[D].武汉：华中师范大学，2014.

[5] 李俊杰.基于位图格式图形绘制和撤销的方法研究与实现[D].太原：山西大学，2020.

【通联编辑：谢媛媛】