基于HTML5的同步手繪板主要功能設(shè)計與實現(xiàn)

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

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

關(guān)鍵詞：HTML5;Web;PHP;同步手繪板;Canvas

中圖分類號：TB472 文獻標(biāo)識碼：A

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

開放科學(xué)（資源服務(wù)）標(biāo)識碼（0SID）：

1 背景

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

2 需求分析

2.1繪畫功能

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

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

2）畫筆的粗細值和形狀，用戶可以自行調(diào)節(jié)畫筆的粗細和長度。

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

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

2.2 作品保存和重現(xiàn)

使用者在完成繪畫作品后，需要對作品進行保存;在需要再次進行作品修改和完善時，需要能夠?qū)σ延械淖髌愤M行重現(xiàn)，因此手繪板也需要具有繪畫作品的保存和重現(xiàn)功能。

2.3 個人中心

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

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

2）統(tǒng)計平臺的實時數(shù)據(jù)。

3 系統(tǒng)設(shè)計與實現(xiàn)

3.1 系統(tǒng)數(shù)據(jù)模型

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

各個實體的數(shù)據(jù)字典和實體圖[3]。

作品的數(shù)據(jù)項有：作品編號、ID、作品標(biāo)題、完成時間，大小，作者;

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

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

教程的數(shù)據(jù)項有：用戶、狀態(tài)、更新時間、發(fā)表時間、教程標(biāo)題;

主頁信息的數(shù)據(jù)項有：教程總數(shù)、用戶總數(shù)、作品總數(shù)。

3.2 系統(tǒng)模塊劃分

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

3.3 手繪板主要功能實現(xiàn)

3.3.1繪畫功能實現(xiàn)

具體的實現(xiàn)技術(shù)如下：

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

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

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

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

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

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

3.3.2 保存和再現(xiàn)功能實現(xiàn)

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

3.3.3 混色效果實現(xiàn)

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

3.3.4 油漆桶功能的實現(xiàn)

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

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電腦知識與技術(shù)

，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 總結(jié)與展望

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

參考文獻：

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

[2]何三榮.江西現(xiàn)代學(xué)院OA系統(tǒng)的設(shè)計與實現(xiàn)[D].南昌：南昌大學(xué)，2011.

[3]王貞.基于智能卡的考勤系統(tǒng)的設(shè)計與實現(xiàn)[Dl.成都：電子科技大學(xué)，2011.

[4]景文忠.基于三層結(jié)構(gòu)的教學(xué)管理系統(tǒng)建設(shè)與實現(xiàn)[D].天津：天津大學(xué)，2012.

【通聯(lián)編輯：謝媛媛】

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

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