宋金寶，方淳平，張旋

(中國(guó)傳媒大學(xué) 信息工程學(xué)院，北京 100024)

1 引言

書(shū)法作為漢字的藝術(shù)性表達(dá)，是中華民族珍貴的非物質(zhì)文化遺產(chǎn)之一。然而隨歷史推進(jìn)，書(shū)法技法已發(fā)生演化，不同字體間筆畫(huà)、筆順亦出現(xiàn)差異，但在手機(jī)、平板電腦等移動(dòng)設(shè)備上，這些規(guī)范卻仍難以找到。書(shū)法愛(ài)好者無(wú)法隨時(shí)查閱書(shū)法知識(shí)和名家真跡，早教父母也難以找到規(guī)范的漢字書(shū)寫(xiě)資料。

我們將在線書(shū)法教育出現(xiàn)以上現(xiàn)象的導(dǎo)因歸結(jié)為三點(diǎn)：

1)知識(shí)體系不系統(tǒng)。中國(guó)主流書(shū)法有楷、行、草、隸、篆五大類(lèi)，而每類(lèi)又由書(shū)法家、年代的不同而細(xì)分，體系非常復(fù)雜[1]。目前書(shū)法相關(guān)的應(yīng)用普遍缺乏對(duì)知識(shí)點(diǎn)的梳理，仍多是對(duì)古人字帖的簡(jiǎn)單搬運(yùn)，亦或是以論壇的形式存在，而非知識(shí)導(dǎo)向型的“線上教育”。

2)平臺(tái)有局限。據(jù)文獻(xiàn)[2][3]研讀及書(shū)法應(yīng)用的市場(chǎng)分析，人們一般通過(guò)線下課程、PC網(wǎng)頁(yè)查找的方式獲取書(shū)法知識(shí)。由于移動(dòng)端開(kāi)發(fā)成本、技術(shù)和CUP/GPU局限性等問(wèn)題，目前市面上還未出現(xiàn)一款專(zhuān)業(yè)的移動(dòng)端書(shū)法教育APP。

3)交互性不足。線下書(shū)法教學(xué)的交互模式是老師言傳身教、學(xué)生臨摹練習(xí)[4]。映射到線上，則是客戶端輸出相關(guān)知識(shí)與書(shū)寫(xiě)過(guò)程的動(dòng)畫(huà)演示、用戶完成學(xué)習(xí)和在線臨摹作為輸入。輸入方面現(xiàn)已有很多進(jìn)展，如Strassmann提出的基于毛筆筆頭模型的手寫(xiě)軌跡生成算法[5]、Dong的基于毛筆筆劃樣本空間的采樣算法[5]等，也有了如 “Ougishi”這樣成功投入市場(chǎng)的書(shū)法模擬軟件[6]，本文將不再做更多探討，但輸出方面并沒(méi)有出現(xiàn)能投入市場(chǎng)的算法，故本文將重點(diǎn)討論。

針對(duì)以上三點(diǎn)問(wèn)題，我們提出了一種解決方案，并在本文中以一款書(shū)法教育應(yīng)用的開(kāi)發(fā)過(guò)程作為具體呈現(xiàn)——內(nèi)容上，通過(guò)合理的板塊設(shè)置，使軟件能系統(tǒng)展示書(shū)法的知識(shí)體系以供學(xué)習(xí)；開(kāi)發(fā)模式上，以WeX5為開(kāi)發(fā)工具生成具有跨平臺(tái)特性的混合應(yīng)用(Hybrid APP)，使其能填補(bǔ)Android、IOS端的空白；技術(shù)上，設(shè)計(jì)了一種新的筆順動(dòng)畫(huà)生成算法來(lái)提高APP的交互性。

本文其余部分組織如下：第2部分按以上三個(gè)維度回顧了相關(guān)工作；第3章描述了我們調(diào)研書(shū)法知識(shí)體系、構(gòu)建APP和設(shè)計(jì)算法的過(guò)程；第4章是APP與算法的測(cè)試。第5章是研究結(jié)論和全文總結(jié)。

2 現(xiàn)狀回顧

2.1 知識(shí)體系方面

我們選取了目前(2018年3月22日)安卓應(yīng)用市場(chǎng)(以Google Play 為代表)和IOS應(yīng)用市場(chǎng)(Apple Store)上排名第一的書(shū)法軟件“漢字與書(shū)法”、“墨趣書(shū)法”為代表，分析其功能模塊：兩者都按詩(shī)文篇章分類(lèi)。其中前者能由篇到字，但按字詳解的部分內(nèi)容不夠充實(shí)，僅有拼音、字形、筆順，其筆順動(dòng)畫(huà)基于SVG技術(shù)生成，不夠飽滿；后者詩(shī)文篇數(shù)較多，且有按字搜索功能，但結(jié)果都僅為圖片展示，沒(méi)有拓展。我們可以從以下方面進(jìn)行優(yōu)化：一是增加分類(lèi)方式，如按字、按文章、按書(shū)法家分類(lèi)；二是充實(shí)按字詳解的知識(shí)點(diǎn)，如字的行筆技巧、起源意義等；三是優(yōu)化筆順動(dòng)畫(huà)的生成算法[7]。

2.2 跨平臺(tái)性和兼容性方面

我們研究了現(xiàn)有的軟件開(kāi)發(fā)模式和開(kāi)發(fā)工具。目前主流的軟件開(kāi)發(fā)方式有三種：本地開(kāi)發(fā)模式(Native APP)，網(wǎng)頁(yè)開(kāi)發(fā)模式(Web APP)，混合開(kāi)發(fā)模式(Hybrid APP)。他們的特性可總結(jié)如下表[8]。

表1 三大開(kāi)發(fā)模式的特性對(duì)比

開(kāi)發(fā)模式方面，Hybrid模式兼具 Native模式較好的用戶體驗(yàn)和 Web模式的跨平臺(tái)優(yōu)勢(shì)，且開(kāi)發(fā)成本較低，可以解決跨平臺(tái)和兼容性的問(wèn)題。而開(kāi)發(fā)工具方面，經(jīng)過(guò)對(duì)主流Hybrid工具PhoneGap、IONIC、WeX5等的對(duì)比，我們最終選擇了基于Eclipse的開(kāi)源工具WeX5，其生成的APP(H5 APP)主體是Web View，主要使用網(wǎng)頁(yè)語(yǔ)言編寫(xiě)，其開(kāi)發(fā)框架如圖1。

圖1 WeX5開(kāi)發(fā)框架

H5 App由前端頁(yè)面和后端服務(wù)構(gòu)成，前端頁(yè)面包括組件、代碼、樣式。在前端頁(yè)面中可以調(diào)用后端服務(wù)，還可通過(guò)Cordova插件調(diào)用設(shè)備API[9]。其APP架構(gòu)如圖2。

圖2 H5 APP架構(gòu)

2.3 交互動(dòng)畫(huà)算法方面

李開(kāi)德最早提出了筆劃填充的概念[10]，他把筆劃填充解釋為填充區(qū)域重復(fù)時(shí)覆蓋部分狀態(tài)保持不變，但視覺(jué)效果問(wèn)題尚未解決。后來(lái)王征旋提出的用頂點(diǎn)序列動(dòng)態(tài)引導(dǎo)掃描線的填充算法[11]基本還原出了書(shū)寫(xiě)過(guò)程，但存在序列選擇條件嚴(yán)苛和CUP開(kāi)銷(xiāo)大的不足。此外，還有利用SVG的animate生成路徑動(dòng)畫(huà)的方法[12]，其動(dòng)畫(huà)流暢但僵硬。實(shí)際中普遍還是采用Flash遮罩、擦除的方法生成gif文件嵌入頁(yè)面中[13]。該方法技術(shù)含量低、運(yùn)行流暢，且能控制頓挫的速度。但考慮到漢字字庫(kù)之龐大，字形之多樣，筆順之復(fù)雜，人工制作不是長(zhǎng)遠(yuǎn)之計(jì)。

為此，我們?cè)O(shè)計(jì)了一種全新的算法自動(dòng)生成書(shū)寫(xiě)動(dòng)畫(huà)。他主要依賴的技術(shù)是HTML5的。標(biāo)簽最先由蘋(píng)果公司提出[14]，它提供了一個(gè)2D Programmatic API，可以以較低的存儲(chǔ)代價(jià)來(lái)處理圖像和進(jìn)行圖像分析，且不依賴于插件。開(kāi)發(fā)者通過(guò)context 操作圖像元素。繪圖方面，Canvas 提供了 stroke()、lineTo()、fillRect()等一系列方法。圖形處理方面，imageData 接口可以實(shí)現(xiàn)圖片文件與數(shù)據(jù)流形式的轉(zhuǎn)換。本算法即是建立在此接口上的像素級(jí)圖像處理操作。

3 研究過(guò)程

3.1 功能模塊設(shè)計(jì)

我們研究的主要依據(jù)是漢字的規(guī)范化普及、書(shū)法藝術(shù)以及基礎(chǔ)教育的三方結(jié)合。這直接導(dǎo)向了漢字的筆順問(wèn)題。漢字的各類(lèi)筆畫(huà)需要厘清，但在不同歷史階段、不同的字體當(dāng)中，筆畫(huà)問(wèn)題并不具有嚴(yán)格的一致性，需要選取最利于使用者把握的方式。

其次便是漢字的部首，從部首開(kāi)始就出現(xiàn)了含義的問(wèn)題，往往對(duì)整個(gè)字的釋義具有關(guān)鍵指導(dǎo)作用，尤其在象形、指事、形聲、會(huì)意等構(gòu)字法構(gòu)成的字中。此處涉及的造字法，也應(yīng)在資料庫(kù)中有所呈現(xiàn)。同時(shí)，許多偏旁部首都可以直接或間接地構(gòu)成一個(gè)獨(dú)字，亦是我們的漢字資源庫(kù)中根本性的組成部分，需進(jìn)行準(zhǔn)確闡釋。

進(jìn)而便是該字擁有的詞性和相應(yīng)的各種釋義，某種釋義還需配以相應(yīng)的例詞或例句，以及其本源的出處。值得注意的是，不同釋義之間蘊(yùn)含著從本義到各類(lèi)引申義的演變過(guò)程，概要地展示這段歷史有助使用者更好地建構(gòu)對(duì)該字的整體理解。此外，與此漢字相關(guān)的知識(shí)鏈接也有所陳列，以求內(nèi)容更加豐富翔實(shí)。

遵循以上討論，我們提出如下三大功能模塊的設(shè)計(jì)方案，如圖3所示。

圖3 功能模塊設(shè)計(jì)總圖

軟件以檢索模塊為核心、以字為單元，通過(guò)三種不同的視角對(duì)書(shū)法知識(shí)點(diǎn)進(jìn)行系統(tǒng)地梳理。詩(shī)文查詢通過(guò)展示名家筆墨讓用戶對(duì)書(shū)法有整體的把握，并根據(jù)喜好選擇要練的字，進(jìn)入縱向?qū)W習(xí)；縱向查詢中，用戶通過(guò)選擇字和書(shū)法字體，得到具體而有針對(duì)性的知識(shí)點(diǎn)，并通過(guò)書(shū)寫(xiě)動(dòng)畫(huà)模擬現(xiàn)實(shí)中老師示范的過(guò)程。最后，用戶還可以進(jìn)行橫向查詢，了解一個(gè)漢字的演化過(guò)程、不同字體間的比較。

交互性方面，軟件結(jié)合了書(shū)寫(xiě)動(dòng)畫(huà)和實(shí)時(shí)臨摹的功能，達(dá)到機(jī)-人、人-機(jī)交互；加入了收藏、分享、論壇的功能，達(dá)到人-人交互。此外，用戶還可以通過(guò)下載不同書(shū)法家的字體包、完成拓展閱讀等模塊進(jìn)行個(gè)性化的學(xué)習(xí)定制，實(shí)現(xiàn)真正的在線教育。

3.2 APP實(shí)現(xiàn)

3.2.1 前端頁(yè)面

在WeX5中創(chuàng)建main.w文件作為主頁(yè)面，按照“標(biāo)題-內(nèi)容面板-底部選擇按鈕組”的層次添加展現(xiàn)組件，并創(chuàng)建ver_search.w、hor_search.w、poem_search.w三個(gè)搜索頁(yè)面對(duì)應(yīng)三種搜索方式。通過(guò)windowContainer組件可以將其嵌入同一個(gè)內(nèi)容面板中，實(shí)現(xiàn)頁(yè)面復(fù)用(如圖4)。在搜索頁(yè)面中通過(guò)getElementByXid方法可以動(dòng)態(tài)的獲得用戶輸入的值，即要查詢的字和字體，通過(guò)點(diǎn)擊事件觸發(fā)Shell函數(shù)的showPage方法，實(shí)現(xiàn)從搜索頁(yè)面到結(jié)果頁(yè)面的跳轉(zhuǎn)(如圖5)。在結(jié)果頁(yè)面通過(guò)onParamsReceive事件接受傳過(guò)來(lái)的參數(shù)，并通過(guò)sendRequest方法(如圖6所示)調(diào)用后端服務(wù)。 然后添加數(shù)據(jù)組件bassDate來(lái)接收數(shù)據(jù)庫(kù)的響應(yīng)數(shù)據(jù)，最后再由一系列展現(xiàn)組件完成搜索結(jié)果的展示。

圖4 WeX5頁(yè)面組件的設(shè)置

圖5 搜索頁(yè)面的跳轉(zhuǎn)

圖6 前后端的通信

對(duì)于頁(yè)面調(diào)度，WeX5也提供了三種方案：其一，對(duì)于簡(jiǎn)單返回的，可使用windows.close方法，其二，對(duì)于需要與后臺(tái)通信的，可利用Shell函數(shù)，其三，對(duì)于需要對(duì)頁(yè)面元素做出判斷后傳送行對(duì)象給被調(diào)用頁(yè)面的，如從文章列表進(jìn)入文章詳情頁(yè)面，可使用windowDialog組件(見(jiàn)圖7)。

圖7 WeX5的頁(yè)面調(diào)度

至此就完成了前端頁(yè)面的搭建，所有的方法和組件都可以通過(guò)查詢WeX5的API文檔方便地調(diào)用。

3.2.2 后端服務(wù)器

完成前后端的溝通需要在BassServer中創(chuàng)建需要調(diào)用的數(shù)據(jù)表和java文件，將java文件中的自定義函數(shù)對(duì)應(yīng)到數(shù)據(jù)表中的action，如圖8所示。

圖8 后端服務(wù)的構(gòu)建

在java文件按需求編寫(xiě)代碼，這里是要實(shí)現(xiàn)mysql數(shù)據(jù)庫(kù)的搜索，故編寫(xiě)sql語(yǔ)句。需要注意的是，從數(shù)據(jù)庫(kù)傳送來(lái)的數(shù)據(jù)格式是table，我們還需要json格式才能在前端頁(yè)面正常接收[9]。這個(gè)轉(zhuǎn)換過(guò)程可以使用WeX5封裝好的tableToJson方法，也可以自己構(gòu)建表，取出特定的數(shù)據(jù)。由于本搜索涉及到多表聯(lián)查，故自建表完成了table到Json的轉(zhuǎn)換(如圖9)。

圖9 自定義的數(shù)據(jù)庫(kù)查詢函數(shù)

3.2.3 數(shù)據(jù)庫(kù)

由于一個(gè)漢字對(duì)應(yīng)五種字體，故設(shè)計(jì)兩張數(shù)據(jù)表word和font(如圖10)，通過(guò)word鍵鏈接，減少了冗余度。word表存儲(chǔ)該漢字各種字體所共有的特征，如注音、意涵、起源、演變等；font表則注重該漢字不同字體間的差異，如對(duì)應(yīng)的書(shū)寫(xiě)動(dòng)畫(huà)、書(shū)寫(xiě)技巧、筆順規(guī)范等。通過(guò)這樣的設(shè)計(jì)，使該數(shù)據(jù)庫(kù)與目前市面上現(xiàn)存的數(shù)據(jù)庫(kù)相比，覆蓋度有所下降，但新鮮度和精確度大大加強(qiáng)。

圖10 數(shù)據(jù)庫(kù)的構(gòu)建

至此，我們完成了搜索模塊的全部建設(shè)。接下來(lái)我們將介紹縱向搜索結(jié)果頁(yè)面中的書(shū)寫(xiě)動(dòng)畫(huà)展示算法。

3.3 動(dòng)畫(huà)算法設(shè)計(jì)

該算法基本思路是把要展示的字分解成一個(gè)個(gè)像素點(diǎn)，通過(guò)一定的opencv處理使得像素點(diǎn)按照書(shū)寫(xiě)的順序排列，我們只需要在數(shù)據(jù)庫(kù)中存儲(chǔ)最終排好的坐標(biāo)序列，前端頁(yè)面就能通過(guò)canvas標(biāo)簽創(chuàng)建等大的畫(huà)布，通過(guò)imageData接口改變對(duì)應(yīng)坐標(biāo)，最終實(shí)現(xiàn)和“填充”一樣的視覺(jué)效果。下面通過(guò)算法流程圖(圖11)說(shuō)明排序的原理。

圖11 算法流程圖

以下是一些關(guān)鍵的說(shuō)明：

?關(guān)鍵點(diǎn)序列point[N] 標(biāo)記了筆順的起始、轉(zhuǎn)折、終止處。

?vec數(shù)組的x、y代表了平面上待填充的某個(gè)點(diǎn)，z代表該點(diǎn)到關(guān)鍵點(diǎn)point[0]的距離，z越小的點(diǎn)越先填充。

?point[0]是不斷變化的。

?breakpoint表示當(dāng)有一定多的點(diǎn)超過(guò)point [0]與point [k+1]的中線時(shí)，就應(yīng)該改變point [0]了。100來(lái)自于實(shí)驗(yàn)觀察。

?diameter存儲(chǔ)了到point [0]和point [k+1]距離相同像素的個(gè)數(shù)，可近似代表當(dāng)前筆畫(huà)的寬度。

?用被diameter歸一化的(point[0]-point[k+1])向量改變point [0]的位置。當(dāng)調(diào)整系數(shù)取sqrtf(3)時(shí)，point[0]到待填充弧的弧度為pi/6，接進(jìn)正常的書(shū)寫(xiě)弧度。

?flag拐彎前point [0]位置改變的次數(shù)，當(dāng)flag=3時(shí)，約在直線段75%處開(kāi)始拐彎，能達(dá)到較好的仿真效果。

本算法借鑒了王氏算法設(shè)置引導(dǎo)點(diǎn)的思路，但本質(zhì)上是對(duì)待填充像素點(diǎn)的一種排序，其結(jié)果是可存儲(chǔ)而非動(dòng)態(tài)規(guī)劃的，所以實(shí)際中對(duì)CPU的占用非常小，能達(dá)到和SVG方法相同的流暢度，且其引導(dǎo)點(diǎn)不一定要在邊界處，更易選擇。視覺(jué)效果方面，該算法有以下突破：首先，按距離排序使得填充線是一個(gè)圓弧，比起直掃描線仿真效果更好；其次，因其處理空間不需閉合，所以能表現(xiàn)出“飛白”、“枯墨”等殘缺美的藝術(shù)；最后，由于單位時(shí)間內(nèi)可修改的像素點(diǎn)是相同的，行筆細(xì)處修改得自然快，接近實(shí)際書(shū)寫(xiě)的效果。而這是其他算法所不能輕易達(dá)到的。

4 研究成果

4.1 功能模塊測(cè)試

以下各圖均為三星Galaxy S8真機(jī)測(cè)試結(jié)果。

可以看到，本應(yīng)用通過(guò)合理的功能模塊劃分，能切實(shí)覆蓋書(shū)法學(xué)習(xí)各個(gè)維度的知識(shí)要點(diǎn)和相關(guān)內(nèi)容。

4.2 兼容性測(cè)試

可以看到，該應(yīng)用對(duì)各種主流型號(hào)的移動(dòng)端均能良好兼容。我們還在華為、蘋(píng)果、三星、小米品牌的手機(jī)上做了真機(jī)調(diào)試，軟件表現(xiàn)出良好的兼容性和穩(wěn)定性。

4.3 動(dòng)畫(huà)算法測(cè)試

我們截取了一個(gè)典型的轉(zhuǎn)彎提點(diǎn)筆畫(huà)的動(dòng)畫(huà)生成測(cè)試結(jié)果，如圖15。

圖12 搜索模塊及其結(jié)果頁(yè)面

圖13 側(cè)欄、知識(shí)拓展模塊及其結(jié)果頁(yè)面

圖14 兼容性測(cè)試(分別為蘋(píng)果、三星、LG、黑莓)

圖15 算法運(yùn)行測(cè)試

可以看到，該算法對(duì)于正常情況下的轉(zhuǎn)彎、提勾、點(diǎn)畫(huà)均能流暢實(shí)現(xiàn)，并且能表現(xiàn)出枯墨飛白的藝術(shù)形態(tài)。

5 研究結(jié)論

本項(xiàng)目立足于研究如何開(kāi)發(fā)一款規(guī)范而具有實(shí)際指導(dǎo)價(jià)值的書(shū)法在線教育應(yīng)用，并取得了階段性的成果。第1章指出了當(dāng)下書(shū)法在線教育存在知識(shí)體系不系統(tǒng)、平臺(tái)有局限、交互性不足三個(gè)問(wèn)題。第2章分別針對(duì)三個(gè)問(wèn)題介紹了國(guó)內(nèi)外的研究現(xiàn)狀，從而引出了我們的應(yīng)用設(shè)計(jì)。第3章中，我們首先提出了一種APP功能模塊設(shè)計(jì)方案，來(lái)解決知識(shí)體系不系統(tǒng)的問(wèn)題；其次通過(guò)Wex5開(kāi)發(fā)出Hybrid APP，來(lái)解決平臺(tái)有局限的問(wèn)題；最后提出了一種書(shū)寫(xiě)動(dòng)畫(huà)生成算法，改進(jìn)了交互性不足的問(wèn)題。第4章中，我們進(jìn)行了軟件的功能模塊測(cè)試、兼容性測(cè)試和算法測(cè)試。

總的來(lái)說(shuō)，本項(xiàng)目具有一定的創(chuàng)新性，對(duì)中國(guó)傳統(tǒng)文化的弘揚(yáng)和書(shū)法在線教育的發(fā)展起到了一定的促進(jìn)作用。