基于WeX5的五大書法在線教育混合應用開發

2018-08-02 06:15:46宋金寶方淳平張旋

中國傳媒大學學報(自然科學版) 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章中，我們進行了軟件的功能模塊測試、兼容性測試和算法測試。

總的來說，本項目具有一定的創新性，對中國傳統文化的弘揚和書法在線教育的發展起到了一定的促進作用。