一種通用畫布輸入接口設(shè)計(jì)方法及裝置的制造方法
【技術(shù)領(lǐng)域】
[0001]本發(fā)明屬于Html5技術(shù)領(lǐng)域，尤其涉及一種通用畫布輸入接口設(shè)計(jì)方法及裝置。
【背景技術(shù)】
[0002]HTML5規(guī)范是萬維網(wǎng)聯(lián)盟由2012年12月17日正式宣布定稿的第五版超級(jí)文本標(biāo)記(Hyper Text Markup language)，HTML 5規(guī)范定義了Html5畫布和其對(duì)應(yīng)的應(yīng)用編程接口(Applicat1n Programming Interface ,Canvas API) αΗ?ηιΙδ畫布支持多種對(duì)象的繪制，包括筆跡、文字、圖片。
[0003]然而，在目前的Html5網(wǎng)頁中，當(dāng)不同輸入設(shè)備在畫布上輸入時(shí)，不同繪制方法帶來的編程繁瑣、難于維護(hù)以及擴(kuò)展受限的問題。其原因在于，繪制對(duì)象的數(shù)據(jù)來源通常來自輸入設(shè)備，如鼠標(biāo)、鍵盤、手寫板、點(diǎn)陣紙筆等。由于各種輸入設(shè)備在Html5網(wǎng)頁中的響應(yīng)都不一樣，如果需要獲取繪制對(duì)象對(duì)畫布進(jìn)行繪制，每一種設(shè)備都需要編寫一次數(shù)據(jù)渲染的方法。
[0004]為便于說明，以在畫布上繪制一條筆跡為例，詳述如下:
[0005]對(duì)于鼠標(biāo)設(shè)備，通常需要以下步驟:
[0006]1.響應(yīng)點(diǎn)擊按下事件MouseDown，記錄筆跡書寫開始，調(diào)用Canvas API開始繪制起占.V ，
[0007]2.響應(yīng)鼠標(biāo)移動(dòng)事件MouseMove，記錄筆跡書寫過程，調(diào)用Canvas API繪制筆跡；
[0008]3.響應(yīng)鼠標(biāo)按起事件MouseUp，記錄筆跡書寫完成，調(diào)用Canvas API繪制筆跡終點(diǎn);完成一次筆跡的繪制。
[0009]每加一種輸入設(shè)備的支持，就需要重新書寫以上I，2，3流程，導(dǎo)致代碼冗余而難于維護(hù)，同時(shí)擴(kuò)展性較差。此外，需要調(diào)用相應(yīng)的Canvas API進(jìn)行繪制，以筆跡繪制為例，需要調(diào)用Canvas API如下:
[0010]var canvas = document.getElementById( “myCanvas” );//獲取canvas的html元素
[0011 ] var context = canvas.getContext( “2d” );//獲取上下文繪制對(duì)象
[0012]context.beginPath()；
[0013]context.strokeStyle = “#fff” ；//這里設(shè)置字體顏色
[0014]context.1ineWidth = 2;//這里要設(shè)置字體大小
[0015]context.moveTo(x,y)；
[0016]context.lineTo(xl,yl)；
[0017]context.stroke ()；
[0018]綜上所述，在一次繪制過程需要調(diào)用以上接口進(jìn)行渲染，而如文字和圖片渲染則更為復(fù)雜，并且在渲染過程我們通常需要不同的參數(shù)如大小、顏色、縮放等，這些不同的渲染對(duì)象和參數(shù)則需要重復(fù)一遍代碼書寫，對(duì)開發(fā)效率并不利，擴(kuò)展性較差并且增加維護(hù)成本。

【發(fā)明內(nèi)容】

[0019]本發(fā)明實(shí)施例的目的在于提供一種通用畫布輸入接口設(shè)計(jì)方法，旨在解決不同輸入設(shè)備在畫布上輸入時(shí)，不同繪制方法帶來的編程繁瑣、難于維護(hù)以及擴(kuò)展受限的問題。
[0020]本發(fā)明實(shí)施例是這樣實(shí)現(xiàn)的，一種通用畫布輸入接口設(shè)計(jì)方法，包括:
[0021 ]將繪制編輯層和繪制顯示層進(jìn)行分離；
[0022]所述繪制編輯層接收不同輸入設(shè)備的輸入數(shù)據(jù)；
[0023]所述繪制編輯層根據(jù)輸入數(shù)據(jù)，生成繪制對(duì)象，并將生成的繪制對(duì)象傳遞給繪制控制層；
[0024]所述繪制控制層監(jiān)聽來自所述繪制編輯層的數(shù)據(jù)，并將所述繪制對(duì)象傳遞給繪制顯不層;
[0025]所述繪制顯示層根據(jù)所述繪制對(duì)象，在畫板上執(zhí)行繪制動(dòng)作；
[0026]其中，所述畫板由多層畫布疊加而成，所述畫布為:超文本標(biāo)記語言Html5畫布。
[0027]本發(fā)明實(shí)施例的另一目的在于提供一種通用畫布輸入接口設(shè)計(jì)裝置，包括:
[0028]分離模塊，用于將繪制編輯層和繪制顯示層進(jìn)行分離；
[0029]繪制編輯層接收模塊，用于所述繪制編輯層接收不同輸入設(shè)備的輸入數(shù)據(jù)；
[0030]繪制編輯層傳遞模塊，用于所述繪制編輯層根據(jù)輸入數(shù)據(jù)，生成繪制對(duì)象，并將生成的繪制對(duì)象傳遞給繪制控制層；
[0031 ]繪制控制層傳遞模塊，用于所述繪制控制層監(jiān)聽來自所述繪制編輯層的數(shù)據(jù)，并將所述繪制對(duì)象傳遞給繪制顯示層；
[0032]繪制動(dòng)作執(zhí)行模塊，用于所述繪制顯示層根據(jù)所述繪制對(duì)象，在畫板上執(zhí)行繪制動(dòng)作；
[0033]其中，所述畫板由多層畫布疊加而成，所述畫布為:超文本標(biāo)記語言Html5畫布。
[0034]在本發(fā)明實(shí)施例中，繪制編輯層接收不同輸入設(shè)備的輸入數(shù)據(jù);所述繪制編輯層根據(jù)輸入數(shù)據(jù)，生成繪制對(duì)象，并將生成的繪制對(duì)象傳遞給繪制控制層。解決了對(duì)于不同輸入設(shè)備在畫布上輸入時(shí)不同繪制方法帶來的繁瑣的編程問題以及難于維護(hù)和擴(kuò)展的問題。其有益效果在于以下三個(gè)方面，詳述如下:
[0035]第一方面，提高了數(shù)據(jù)擴(kuò)展性，對(duì)輸入內(nèi)容的數(shù)據(jù)可加入第三方監(jiān)聽模塊對(duì)數(shù)據(jù)進(jìn)行操作，如云端存儲(chǔ)、數(shù)據(jù)廣播等；
[0036]第二方面，提高了輸入擴(kuò)展性，對(duì)新輸入設(shè)備或新繪制對(duì)象的支持，即多一個(gè)加EditLayer，實(shí)現(xiàn) EditStart，Edi ting ,EditEnd 和清染方法即可。
[0037]第三方面，易于維護(hù)，以繪制對(duì)象為單位分離編輯層，模塊清晰。
【附圖說明】
[0038]圖1是本發(fā)明實(shí)施例提供的通用畫布輸入接口設(shè)計(jì)方法的實(shí)現(xiàn)流程圖；
[0039]圖2是本發(fā)明實(shí)施例提供的通用畫布輸入接口設(shè)計(jì)方法步驟S102的實(shí)現(xiàn)流程圖；
[0040]圖3是本發(fā)明實(shí)施例提供的通用畫布輸入接口設(shè)計(jì)方法步驟S104的實(shí)現(xiàn)流程圖；
[0041]圖4是本發(fā)明實(shí)施例提供的通用畫布輸入接口設(shè)計(jì)方法步驟S105的實(shí)現(xiàn)流程圖；
[0042]圖5是本發(fā)明實(shí)施例提供的通用畫布輸入接口設(shè)計(jì)方法步驟S105的實(shí)現(xiàn)流程圖；
[0043]圖6是本發(fā)明實(shí)施例提供的通用畫布輸入接口設(shè)計(jì)裝置的第一結(jié)構(gòu)框圖；
[0044]圖7是本發(fā)明實(shí)施例提供的繪制對(duì)象生成過程的較佳實(shí)施流程圖；
[0045]圖8是本發(fā)明實(shí)施例提供的通用畫布輸入接口設(shè)計(jì)裝置的第二結(jié)構(gòu)框圖。
【具體實(shí)施方式】
[0046]為了使本發(fā)明的目的、技術(shù)方案及優(yōu)點(diǎn)更加清楚明白，以下結(jié)合附圖及實(shí)施例，對(duì)本發(fā)明進(jìn)行進(jìn)一步詳細(xì)說明。應(yīng)當(dāng)理解，此處所描述的具體實(shí)施例僅僅用以解釋本發(fā)明，并不用于限定本發(fā)明。
[0047]實(shí)施例一
[0048]圖1是本發(fā)明實(shí)施例提供的通用畫布輸入接口設(shè)計(jì)方法的實(shí)現(xiàn)流程圖，詳述如下:
[0049]在步驟SlOl中，將繪制編輯層和繪制顯示層進(jìn)行分離；
[0050]其中，步驟SlOl，具體為:
[0051]在Html5網(wǎng)頁中，將繪制編輯層和繪制顯示層進(jìn)行分離，在所述繪制編輯層和繪制顯示層之間，嵌入不同輸入設(shè)備通用的繪制控制層。
[0052]在步驟S102中，所述繪制編輯層接收不同輸入設(shè)備的輸入數(shù)據(jù)；
[0053]步驟S102，具體為:
[0054]在Html5網(wǎng)頁的應(yīng)用程序編輯接口調(diào)用畫布時(shí)，所述繪制編輯層接收不同輸入設(shè)備的輸入數(shù)據(jù)。
[0055]在步驟S103中，所述繪制編輯層根據(jù)輸入數(shù)據(jù)，生成繪制對(duì)象，并將生成的繪制對(duì)象傳遞給繪制控制層；
[0056]在步驟S104中，所述繪制控制層監(jiān)聽來自所述繪制編輯層的數(shù)據(jù)，并將所述繪制對(duì)象傳遞給繪制顯示層；
[0057]在步驟S105中，所述繪制顯示層根據(jù)所述繪制對(duì)象，在畫板上執(zhí)行繪制動(dòng)作；
[0058]其中，所述畫板由多層畫布疊加而成，所述畫布為:超文本標(biāo)記語言Html5畫布。
[0059]在本發(fā)明實(shí)施例中，簡(jiǎn)化了編程，同時(shí)又具備足夠的靈活性，可以根據(jù)不同需求進(jìn)行不同的設(shè)計(jì)，提高了可維護(hù)性和開發(fā)效率。
[0060]實(shí)施例二
[0061]圖2是本發(fā)明實(shí)施例提供的通用畫布輸入接口設(shè)計(jì)方法步驟S102的實(shí)現(xiàn)流程圖，詳述如下:
[0062]在步驟S201中，繪制編輯層根據(jù)輸入內(nèi)容類型，調(diào)用不同設(shè)備編輯事件；
[0063]在步驟S202中，通過所述不同設(shè)備編輯事件，接收不同輸入設(shè)備的輸入數(shù)據(jù)；
[0064]其中，所述輸入內(nèi)容類型包括筆跡、文本、圖片、橡皮擦以及擴(kuò)展輸入內(nèi)容類型中的至少一種；
[0065]其中，所述不同設(shè)備編輯事件包括不同設(shè)備編輯開始事件、不同設(shè)備編輯過程事件、不同設(shè)備編輯結(jié)束事件中的至少一種。
[0066]其中，擴(kuò)展輸入內(nèi)容類型為自定義的輸入內(nèi)容類型，包括但不限于預(yù)定義公式、圖形。
[0067]實(shí)施例三
[0068]圖3是本發(fā)明實(shí)施例提供的通用畫布輸入接口設(shè)計(jì)方法步驟S104的實(shí)現(xiàn)流程圖，詳述如下:
[0069]在步驟S301中，繪制控制層監(jiān)聽來自所述繪制編輯層的數(shù)據(jù)，所述數(shù)據(jù)包括不同設(shè)備編輯開始事件、不同設(shè)備編輯過程事件、不同設(shè)備編輯結(jié)束事件；
[0070]在步驟S302中，當(dāng)接收到來自繪制編輯層的不同設(shè)備編輯結(jié)束事件時(shí)，將所述繪制對(duì)象以及實(shí)時(shí)生成的加工數(shù)據(jù)傳遞給繪制顯示層。