基于HTML5的同步手繪板主要功能設計與實現

陳寅川 孫文武 李小勇 楊莉莉 王先傳

摘要：隨著HTML5技術的快速發展，移動快捷的Web軟件將成為今后生活的主流應用形式。文章采用模塊化設計思想，使用HTML5的Canvas技術，結合前端的Java Script代碼，后端的Thinkphp5框架設計實現了在線同步手繪板，實現了繪畫、保存和重現繪圖、混色以及油漆桶等主要功能。在線同步手繪板實現了在線繪圖，上傳繪圖，重現繪圖過程，同步手繪板等功能，具有使用簡單，上手快等優點，為在線使用手繪板學習繪畫提供了平臺。

關鍵詞：HTML5;Web;PHP;同步手繪板;Canvas

中圖分類號：TB472 文獻標識碼：A

文章編號：1009-3044（2020）21-0069-03

開放科學（資源服務）標識碼（0SID）：

1 背景

目前，市場上，繪畫學習者使用的繪圖學習軟件相對比較少，主流的專業繪圖軟件，如PhotoShop、Adobe image等，這些是單機版的，需要安裝到固定的存儲媒介之上，而且僅安裝文件就有幾個GB，下載安裝十分煩瑣，不能保存繪畫的過程。雖然這些軟件具有繪畫的基本功能，但其功能甚多，入門比較困難，不適用于培養孩子的繪畫興趣。相比于傳統的畫圖軟件，本文采用模塊化設計思想，使用HTML5的Canvas技術，結合前端的Java Script代碼，后端的Thinkphp5框架[1]設計實現了在線同步手繪板，給青少年兒童提供一個可以在線學習繪畫的平臺，提升他們的繪畫興趣。

2 需求分析

2.1繪畫功能

與人類現場繪畫類似，手繪板的繪畫功能需要有繪畫工具、畫布等，因此需要實現的繪畫功能如下：

1）混色功能，用戶可以用工具欄中的取色器取色，然后達到混色的效果。

2）畫筆的粗細值和形狀，用戶可以自行調節畫筆的粗細和長度。

3）畫筆的透明度，用戶可以改變自行選擇畫筆的透明度。

4）一些常用快捷功能，用戶可以通過工具欄中的快捷鍵實現清空、撤銷等功能。

2.2 作品保存和重現

使用者在完成繪畫作品后，需要對作品進行保存;在需要再次進行作品修改和完善時，需要能夠對已有的作品進行重現，因此手繪板也需要具有繪畫作品的保存和重現功能。

2.3 個人中心

個人中心是對手繪板使用者、管理員信息進行管理，同時對作品等進行統計等。該模塊需要有以下功能需求：

1）完善用戶和管理員信息。

2）統計平臺的實時數據。

3 系統設計與實現

3.1 系統數據模型

根據對手繪板的需求分析，可以得到用戶、管理員、作品等實體的數據字典。根據數據字典可以得到各個實體的屬性圖，分析業務流程得到各個實體之間的關系圖[2]、E-R圖，如圖1所示。

各個實體的數據字典和實體圖[3]。

作品的數據項有：作品編號、ID、作品標題、完成時間，大小，作者;

用戶的數據項有：手機、注冊時間、呢稱、郵箱、登錄時間、操作、賬號;

管理員的數據項有：密碼、郵箱、賬號、電話、呢稱;

教程的數據項有：用戶、狀態、更新時間、發表時間、教程標題;

主頁信息的數據項有：教程總數、用戶總數、作品總數。

3.2 系統模塊劃分

由需求分析可知，整個系統可以分為前端頁面和后端數據庫兩個大的模塊，前端頁面分為四個模塊：主頁模塊、繪圖展示模塊、個人中心模塊。后端數據庫分為五個模塊：繪圖管理模塊、教程管理模塊、用戶管理模塊、管理員管理[4]模塊，如圖2所示。

3.3 手繪板主要功能實現

3.3.1繪畫功能實現

具體的實現技術如下：

1）首先是畫筆功能，在HTML5中的Canvas組件可以實現該功能。通過鼠標按下事件獲取在畫布上的開始坐標，鼠標移動事件配合lineto方法，可以達到繪畫線條的功能。

2）根據用戶的繪畫需求，系統采用改變改變Canvas的屬性來豐富畫筆的粗細度、顏色等。

3）畫板還添加了上傳繪圖的功能，用戶可以點擊上傳圖片上傳已經繪制好的底稿或圖片，此功能使用aJ ax技術異步上傳，上傳完成后返回給js圖片地址，通過onload +drawimage可以實現，此處必須使用onload方法等待圖片完全加載完成，才可以使用drawimage方法繪制到畫板中，否則將無法顯示。

4）為了方便用戶操作，首頁使用可拖動式可隱藏工具欄，此功能使用js效果動畫、css的move屬性以及鍵盤就能觸發的橡皮、撤銷、清空快捷鍵操作，此功能使用鍵盤按下事件調用相應的方法。

5）為了更好地還原畫板效果，如消除像素抗鋸齒、橡皮模糊擦除等，該系統運用了getimagedata和putimagedata方法，用戶在完成相應操作后截取畫板內容再載入到畫板中，這樣會使畫板始終都呈現一種圖像的效果，更加真實。

對于整個系統來說，繪畫是核心模塊之一，該模塊主要的功能是用戶可以在畫布中選擇自己喜歡的工具或者線條去勾勒出作品，然后通過下方的保存上傳按鈕將作品上傳至繪畫展示中。該模塊是以一個畫布為主體，工具欄中是一些工具，其中橡皮的設計采用了深度優先的算法，根據橡皮的粗細值確定可以擦到的邊界，離中心越近，擦拭的越干凈，等同于重新畫成白色。工具欄中的撤銷操作采用了棧的思想，后入先出的原則。用戶可以通過工具欄改變畫筆的粗細值、透明度、顏色、形狀等，還可以進行混色操作，另外還有一些便利的快捷功能（清空、撤銷等），如圖3所示是實現的繪畫功能。

3.3.2 保存和再現功能實現

具體的實現技術如下：將aJ ax存人數據庫，json_encode和json_decode方式進行lson加密解密，自定義的筆畫還原方法（此方法同繪畫方法類似，只是把鼠標事件產生的坐標換成從數據庫中取得的畫筆坐標），設置setTimeout延時函數完美地將繪畫過程還原出來。由于使用延時函數，時間間隔可以自己設置，用戶可以根據自身需求來改變繪畫速度。該部分是系統存放用戶繪圖作品的區域，在這里用戶可以查看各種已經完成的作品并對作品進行修改完善。如圖4所示。

3.3.3 混色效果實現

混色是一大難題，但是混色畫出漸變和新顏色是很常用的繪畫技巧，在web當然也要實現。經過測試，可以發現控制畫板的透明度能夠幫助達到混色的效果而另一個難題則是當設置透明度之后整個畫板都會變成半透明，如何讓想混色的那些筆畫變得透明，這里運用getimagedata和putimagedata方法，通過不斷截取和繪制就能呈現完美效果。基HTML5技術設計出的web端同步手繪板運用這個方法時只用了一個對象，系統開發成本和瀏覽器緩存的壓力較小，混色效果如圖5所示。

3.3.4 油漆桶功能的實現

油漆桶功能是系統設計最難的功能點，通過鼠標落點坐標，計算周圍不同顏色的邊界，將走過的路徑使用lineto方法進行線條上色，使用Canvas中的getlmagedata（x，y，1，1）方法來獲取某一像素顏色，為通過獲取邊界實現上色效果，我們將整個畫布看作一個二維數組，采用廣度優先算法計算出邊界，具體的實現部分代碼如下：

getImageData：function0{

var _this= this;

if（！_this.listEnd&&！this.isLoadingData）{

this.isLoadingData= true;

Var url=editor. getActionUrl（editor.getOpt（ 'imageManager-ActionName '）}，

isjsonp= utils.isCrossDomainUrl（url）;

ajax.request（url，（

7 timeout'： 100000，

'dataType'： isjsonp？ 'jsonp：¨，

'data'： utils.extend（{

start： this.listlndex，

size： this.listSize

）， editor.queryCommandV alue（7 serverparam 7）），

Computer Knowledge and Technology電腦知識與技術

，method'：，get'，

onsuccess 7： function（r）{

try{

var json= isjsonp？ r：eval（，（，+r.responseText+，），）;

if （json.state=='SUCCESS，）（

_this.pushData（json.list）;

_this.listlndex= parselnt（json.start） +parselnt（json.list.length）;

if（_this.listlndex>=json.total）（

_this.listEnd= true;1

_this.isLoadingData= false;）

） catch （e）{

if（r. responseText. indexOf（7 ue_separate_ue 7）！=-1）（

var list= r.responseText.split（r.responseText）;

_this.pushData（list）;

_this.listlndex= parselnt（list.length）;

_this.listEnd= true;

_this.isLoadingData= false;））），

'onerror，： function（）（

_this.isLoadingData= false;

）））;））

4 總結與展望

隨著移動互聯網的發展和人們生活水平的提高，基于HT-ML5技術設計出的Web端同步手繪板將會受到更多用戶的青睞。同步手繪板可以重現繪圖過程，集繪畫、分享學習于一體的特點可以更方便地滿足用戶繪畫的需求，增加用戶體驗感真實感，在一定程度上填補了部分該領域的空白，但是由于技術更新迅速，為了適應用戶需求的變化，系統還需要進一步完善，主要從以下兩個方面進行完善：根據時代的變化，定制更多的UI界面，滿足用戶的審美和操作習慣，同時會完善和優化系統各個方面的功能;提高服務器的并發能力，通過采用分布式架構，數據庫緩存等技術提高服務器的并發性，搭建一個高并發的分布式平臺。

參考文獻：

[1]吳飛燕.基于HTML5 Canvas繪圖技術應用[J].電子測試，2018（4）： 116，118.

[2]何三榮.江西現代學院OA系統的設計與實現[D].南昌：南昌大學，2011.

[3]王貞.基于智能卡的考勤系統的設計與實現[Dl.成都：電子科技大學，2011.

[4]景文忠.基于三層結構的教學管理系統建設與實現[D].天津：天津大學，2012.

【通聯編輯：謝媛媛】

基金項目：安徽省大學生創新訓練項目（項目編號：S201910371020）;阜陽師范大學人才項目（項目編號：2018kyqd0027）;安徽高校自然科學研究重點項目（項目編號：KJ2019A0533）;阜陽師范大學創新團隊（項目編號：XDHXTD201703）

作者簡介：陳寅川（1998-），男，安徽蚌埠人，本科在讀，研究方向為軟件工程;孫文武（1999-），男，安徽蚌埠人，本科在讀，研究方向為軟件工程;李小勇（1997-），男，安徽宿州人，本科在讀，研究方向為軟件工程;王先傳（1983-），男，講師，博士，研究方向為數據挖掘、計算語言學等;楊莉莉（1991-），安徽阜陽人，助教，碩士。