基于WeX5的五大书法在线教育混合应用开发

2018-08-02 06:15宋金宝方淳平张旋

中国传媒大学学报(自然科学版) 2018年4期

宋金宝，方淳平，张旋

(中国传媒大学信息工程学院，北京 100024)

1 引言

书法作为汉字的艺术性表达，是中华民族珍贵的非物质文化遗产之一。然而随历史推进，书法技法已发生演化，不同字体间笔画、笔顺亦出现差异，但在手机、平板电脑等移动设备上，这些规范却仍难以找到。书法爱好者无法随时查阅书法知识和名家真迹，早教父母也难以找到规范的汉字书写资料。

我们将在线书法教育出现以上现象的导因归结为三点：

1)知识体系不系统。中国主流书法有楷、行、草、隶、篆五大类，而每类又由书法家、年代的不同而细分，体系非常复杂[1]。目前书法相关的应用普遍缺乏对知识点的梳理，仍多是对古人字帖的简单搬运，亦或是以论坛的形式存在，而非知识导向型的“线上教育”。

2)平台有局限。据文献[2][3]研读及书法应用的市场分析，人们一般通过线下课程、PC网页查找的方式获取书法知识。由于移动端开发成本、技术和CUP/GPU局限性等问题，目前市面上还未出现一款专业的移动端书法教育APP。

3)交互性不足。线下书法教学的交互模式是老师言传身教、学生临摹练习[4]。映射到线上，则是客户端输出相关知识与书写过程的动画演示、用户完成学习和在线临摹作为输入。输入方面现已有很多进展，如Strassmann提出的基于毛笔笔头模型的手写轨迹生成算法[5]、Dong的基于毛笔笔划样本空间的采样算法[5]等，也有了如 “Ougishi”这样成功投入市场的书法模拟软件[6]，本文将不再做更多探讨，但输出方面并没有出现能投入市场的算法，故本文将重点讨论。

针对以上三点问题，我们提出了一种解决方案，并在本文中以一款书法教育应用的开发过程作为具体呈现——内容上，通过合理的板块设置，使软件能系统展示书法的知识体系以供学习；开发模式上，以WeX5为开发工具生成具有跨平台特性的混合应用(Hybrid APP)，使其能填补Android、IOS端的空白；技术上，设计了一种新的笔顺动画生成算法来提高APP的交互性。

本文其余部分组织如下：第2部分按以上三个维度回顾了相关工作；第3章描述了我们调研书法知识体系、构建APP和设计算法的过程；第4章是APP与算法的测试。第5章是研究结论和全文总结。

2 现状回顾

2.1 知识体系方面

我们选取了目前(2018年3月22日)安卓应用市场(以Google Play 为代表)和IOS应用市场(Apple Store)上排名第一的书法软件“汉字与书法”、“墨趣书法”为代表，分析其功能模块：两者都按诗文篇章分类。其中前者能由篇到字，但按字详解的部分内容不够充实，仅有拼音、字形、笔顺，其笔顺动画基于SVG技术生成，不够饱满；后者诗文篇数较多，且有按字搜索功能，但结果都仅为图片展示，没有拓展。我们可以从以下方面进行优化：一是增加分类方式，如按字、按文章、按书法家分类；二是充实按字详解的知识点，如字的行笔技巧、起源意义等；三是优化笔顺动画的生成算法[7]。

2.2 跨平台性和兼容性方面

我们研究了现有的软件开发模式和开发工具。目前主流的软件开发方式有三种：本地开发模式(Native APP)，网页开发模式(Web APP)，混合开发模式(Hybrid APP)。他们的特性可总结如下表[8]。

表1 三大开发模式的特性对比

开发模式方面，Hybrid模式兼具 Native模式较好的用户体验和 Web模式的跨平台优势，且开发成本较低，可以解决跨平台和兼容性的问题。而开发工具方面，经过对主流Hybrid工具PhoneGap、IONIC、WeX5等的对比，我们最终选择了基于Eclipse的开源工具WeX5，其生成的APP(H5 APP)主体是Web View，主要使用网页语言编写，其开发框架如图1。

图1 WeX5开发框架

H5 App由前端页面和后端服务构成，前端页面包括组件、代码、样式。在前端页面中可以调用后端服务，还可通过Cordova插件调用设备API[9]。其APP架构如图2。

图2 H5 APP架构

2.3 交互动画算法方面

李开德最早提出了笔划填充的概念[10]，他把笔划填充解释为填充区域重复时覆盖部分状态保持不变，但视觉效果问题尚未解决。后来王征旋提出的用顶点序列动态引导扫描线的填充算法[11]基本还原出了书写过程，但存在序列选择条件严苛和CUP开销大的不足。此外，还有利用SVG的animate生成路径动画的方法[12]，其动画流畅但僵硬。实际中普遍还是采用Flash遮罩、擦除的方法生成gif文件嵌入页面中[13]。该方法技术含量低、运行流畅，且能控制顿挫的速度。但考虑到汉字字库之庞大，字形之多样，笔顺之复杂，人工制作不是长远之计。

为此，我们设计了一种全新的算法自动生成书写动画。他主要依赖的技术是HTML5的

3 研究过程

3.1 功能模块设计

我们研究的主要依据是汉字的规范化普及、书法艺术以及基础教育的三方结合。这直接导向了汉字的笔顺问题。汉字的各类笔画需要厘清，但在不同历史阶段、不同的字体当中，笔画问题并不具有严格的一致性，需要选取最利于使用者把握的方式。

其次便是汉字的部首，从部首开始就出现了含义的问题，往往对整个字的释义具有关键指导作用，尤其在象形、指事、形声、会意等构字法构成的字中。此处涉及的造字法，也应在资料库中有所呈现。同时，许多偏旁部首都可以直接或间接地构成一个独字，亦是我们的汉字资源库中根本性的组成部分，需进行准确阐释。

进而便是该字拥有的词性和相应的各种释义，某种释义还需配以相应的例词或例句，以及其本源的出处。值得注意的是，不同释义之间蕴含着从本义到各类引申义的演变过程，概要地展示这段历史有助使用者更好地建构对该字的整体理解。此外，与此汉字相关的知识链接也有所陈列，以求内容更加丰富翔实。

遵循以上讨论，我们提出如下三大功能模块的设计方案，如图3所示。

图3 功能模块设计总图

软件以检索模块为核心、以字为单元，通过三种不同的视角对书法知识点进行系统地梳理。诗文查询通过展示名家笔墨让用户对书法有整体的把握，并根据喜好选择要练的字，进入纵向学习；纵向查询中，用户通过选择字和书法字体，得到具体而有针对性的知识点，并通过书写动画模拟现实中老师示范的过程。最后，用户还可以进行横向查询，了解一个汉字的演化过程、不同字体间的比较。

交互性方面，软件结合了书写动画和实时临摹的功能，达到机-人、人-机交互；加入了收藏、分享、论坛的功能，达到人-人交互。此外，用户还可以通过下载不同书法家的字体包、完成拓展阅读等模块进行个性化的学习定制，实现真正的在线教育。

3.2 APP实现

3.2.1 前端页面

在WeX5中创建main.w文件作为主页面，按照“标题-内容面板-底部选择按钮组”的层次添加展现组件，并创建ver_search.w、hor_search.w、poem_search.w三个搜索页面对应三种搜索方式。通过windowContainer组件可以将其嵌入同一个内容面板中，实现页面复用(如图4)。在搜索页面中通过getElementByXid方法可以动态的获得用户输入的值，即要查询的字和字体，通过点击事件触发Shell函数的showPage方法，实现从搜索页面到结果页面的跳转(如图5)。在结果页面通过onParamsReceive事件接受传过来的参数，并通过sendRequest方法(如图6所示)调用后端服务。然后添加数据组件bassDate来接收数据库的响应数据，最后再由一系列展现组件完成搜索结果的展示。

图4 WeX5页面组件的设置

图5 搜索页面的跳转

图6 前后端的通信

对于页面调度，WeX5也提供了三种方案：其一，对于简单返回的，可使用windows.close方法，其二，对于需要与后台通信的，可利用Shell函数，其三，对于需要对页面元素做出判断后传送行对象给被调用页面的，如从文章列表进入文章详情页面，可使用windowDialog组件(见图7)。

图7 WeX5的页面调度

至此就完成了前端页面的搭建，所有的方法和组件都可以通过查询WeX5的API文档方便地调用。

3.2.2 后端服务器

完成前后端的沟通需要在BassServer中创建需要调用的数据表和java文件，将java文件中的自定义函数对应到数据表中的action，如图8所示。

图8 后端服务的构建

在java文件按需求编写代码，这里是要实现mysql数据库的搜索，故编写sql语句。需要注意的是，从数据库传送来的数据格式是table，我们还需要json格式才能在前端页面正常接收[9]。这个转换过程可以使用WeX5封装好的tableToJson方法，也可以自己构建表，取出特定的数据。由于本搜索涉及到多表联查，故自建表完成了table到Json的转换(如图9)。

图9 自定义的数据库查询函数

3.2.3 数据库

由于一个汉字对应五种字体，故设计两张数据表word和font(如图10)，通过word键链接，减少了冗余度。word表存储该汉字各种字体所共有的特征，如注音、意涵、起源、演变等；font表则注重该汉字不同字体间的差异，如对应的书写动画、书写技巧、笔顺规范等。通过这样的设计，使该数据库与目前市面上现存的数据库相比，覆盖度有所下降，但新鲜度和精确度大大加强。

图10 数据库的构建

至此，我们完成了搜索模块的全部建设。接下来我们将介绍纵向搜索结果页面中的书写动画展示算法。

3.3 动画算法设计

该算法基本思路是把要展示的字分解成一个个像素点，通过一定的opencv处理使得像素点按照书写的顺序排列，我们只需要在数据库中存储最终排好的坐标序列，前端页面就能通过canvas标签创建等大的画布，通过imageData接口改变对应坐标，最终实现和“填充”一样的视觉效果。下面通过算法流程图(图11)说明排序的原理。

图11 算法流程图

以下是一些关键的说明：

•关键点序列point[N] 标记了笔顺的起始、转折、终止处。

•vec数组的x、y代表了平面上待填充的某个点，z代表该点到关键点point[0]的距离，z越小的点越先填充。

•point[0]是不断变化的。

•breakpoint表示当有一定多的点超过point [0]与point [k+1]的中线时，就应该改变point [0]了。100来自于实验观察。

•diameter存储了到point [0]和point [k+1]距离相同像素的个数，可近似代表当前笔画的宽度。

•用被diameter归一化的(point[0]-point[k+1])向量改变point [0]的位置。当调整系数取sqrtf(3)时，point[0]到待填充弧的弧度为pi/6，接进正常的书写弧度。

•flag拐弯前point [0]位置改变的次数，当flag=3时，约在直线段75%处开始拐弯，能达到较好的仿真效果。

本算法借鉴了王氏算法设置引导点的思路，但本质上是对待填充像素点的一种排序，其结果是可存储而非动态规划的，所以实际中对CPU的占用非常小，能达到和SVG方法相同的流畅度，且其引导点不一定要在边界处，更易选择。视觉效果方面，该算法有以下突破：首先，按距离排序使得填充线是一个圆弧，比起直扫描线仿真效果更好；其次，因其处理空间不需闭合，所以能表现出“飞白”、“枯墨”等残缺美的艺术；最后，由于单位时间内可修改的像素点是相同的，行笔细处修改得自然快，接近实际书写的效果。而这是其他算法所不能轻易达到的。

4 研究成果

4.1 功能模块测试

以下各图均为三星Galaxy S8真机测试结果。

可以看到，本应用通过合理的功能模块划分，能切实覆盖书法学习各个维度的知识要点和相关内容。

4.2 兼容性测试

可以看到，该应用对各种主流型号的移动端均能良好兼容。我们还在华为、苹果、三星、小米品牌的手机上做了真机调试，软件表现出良好的兼容性和稳定性。

4.3 动画算法测试

我们截取了一个典型的转弯提点笔画的动画生成测试结果，如图15。

图12 搜索模块及其结果页面

图13 侧栏、知识拓展模块及其结果页面

图14 兼容性测试(分别为苹果、三星、LG、黑莓)

图15 算法运行测试

可以看到，该算法对于正常情况下的转弯、提勾、点画均能流畅实现，并且能表现出枯墨飞白的艺术形态。

5 研究结论

本项目立足于研究如何开发一款规范而具有实际指导价值的书法在线教育应用，并取得了阶段性的成果。第1章指出了当下书法在线教育存在知识体系不系统、平台有局限、交互性不足三个问题。第2章分别针对三个问题介绍了国内外的研究现状，从而引出了我们的应用设计。第3章中，我们首先提出了一种APP功能模块设计方案，来解决知识体系不系统的问题；其次通过Wex5开发出Hybrid APP，来解决平台有局限的问题；最后提出了一种书写动画生成算法，改进了交互性不足的问题。第4章中，我们进行了软件的功能模块测试、兼容性测试和算法测试。

总的来说，本项目具有一定的创新性，对中国传统文化的弘扬和书法在线教育的发展起到了一定的促进作用。