基于移動(dòng)端繪圖程序的實(shí)現(xiàn)

劉建東

摘要： 微軟操作系統(tǒng)自帶的繪圖軟件能實(shí)現(xiàn)文字的書寫以及簡(jiǎn)單圖形繪制等功能，但繪制過程中，鼠標(biāo)容易發(fā)生位置的偏移，從而模糊了用戶表達(dá)的意圖。移動(dòng)端繪圖程序利用JavaScript和Canvas技術(shù)模擬了用戶在現(xiàn)實(shí)生活中的繪圖過程以及繪圖效果，特別是，為模擬用戶筆畫的粗細(xì)，該程序建立和實(shí)現(xiàn)了數(shù)學(xué)模型，從實(shí)現(xiàn)效果來看，符合用戶實(shí)際情況。

關(guān)鍵詞： JavaScript；Canvas；移動(dòng)端；繪圖

中圖分類號(hào)：TP311 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1009-3044（2017）05-0160-02

微軟的操作系統(tǒng)在程序附件功能中，自帶了繪圖程序。該繪圖程序的目的是，用戶在演示時(shí)，可以通過該程序繪制簡(jiǎn)單的圖形，配上說明文字，來表達(dá)用戶的意圖。但是在繪制過程中，用戶依賴鼠標(biāo)作為輸入設(shè)備。而鼠標(biāo)的移動(dòng)具有直線性、易偏移性，因此通過鼠標(biāo)繪制的圖形線段不流暢，導(dǎo)致繪制的圖形、文字均與用戶表達(dá)的意圖有明顯的區(qū)別，影響表達(dá)效果。不僅如此，用戶操作過程通過鼠標(biāo)來操作也不方便，盡管現(xiàn)在已經(jīng)發(fā)明了更符合人體工學(xué)的鼠標(biāo)，但是，從用戶體驗(yàn)感來說，使用鼠標(biāo)與直接用手繪制相比，依然存在不少差距。本文充分利用了移動(dòng)端的觸屏技術(shù)，通過使用JavaScript和Canvas技術(shù)來模擬用戶實(shí)際生活中繪制圖形的過程，解決了鼠標(biāo)操作帶來的不便。此外，圖形的線條粗細(xì)與用戶繪圖的用力有較大的關(guān)系，用力越大，線條越粗，為模擬此效果，本文還建立了線條粗細(xì)與運(yùn)筆速度的數(shù)學(xué)模型，并編程實(shí)現(xiàn)，通過測(cè)試發(fā)現(xiàn)，程序結(jié)果符合實(shí)際情況。

接下來，筆者介紹一下其他章節(jié)的主要內(nèi)容：第二節(jié)，總體介紹了繪圖程序的功能以及實(shí)現(xiàn)步驟；第三節(jié)，分別針對(duì)每個(gè)步驟描述實(shí)現(xiàn)的關(guān)鍵技術(shù)；第四節(jié)，展示程序的運(yùn)行效果；最后總結(jié)。

1 移動(dòng)端繪圖程序的功能以及實(shí)現(xiàn)步驟

用戶通過微信“掃一掃”進(jìn)入移動(dòng)端繪圖程序頁面，用戶在紅色方框內(nèi)的繪圖區(qū)，通過手指繪制圖形和文字，手指移開繪圖區(qū)或者手機(jī)屏幕，即停止繪制。如果想清除之前繪制的圖形，可以點(diǎn)擊屏幕左下角的“清除”按鈕即可。

實(shí)現(xiàn)上述功能的步驟如下：

利用JavaScript與Canvas繪制繪圖區(qū)；

響應(yīng)以下事件：“觸屏”，“移動(dòng)”，“離開屏幕”；

在“移動(dòng)”事件中，捕獲觸屏位置，不斷繪制線段構(gòu)成圖形。

④建立線段粗細(xì)與運(yùn)筆速度的模型，模擬用戶繪制的力度；

2 實(shí)現(xiàn)繪圖程序的關(guān)鍵技術(shù)

接下來，筆者將按上述步驟來分別解釋繪圖程序的關(guān)鍵技術(shù)。

2.1 繪制繪圖區(qū)

繪圖區(qū)通過在HTML中使用元素表示，canvas的基本屬性，如寬度以及高度等屬性的設(shè)置在此不贅述。如何繪制繪圖區(qū)是本小節(jié)的重點(diǎn)。繪制圖由線段組成，每個(gè)線段有不同的起點(diǎn)和終點(diǎn)，因此如何繪制線段是關(guān)鍵點(diǎn)。在此，我將介紹在canvas種繪制線段的函數(shù)，函數(shù)的具體名字以及功能描述如表1所示：

上述方法是屬于canvas對(duì)象的，而每個(gè)元素對(duì)應(yīng)一個(gè)canvas對(duì)象，獲取canvas對(duì)象的繪圖環(huán)境，需要使用getContext（String contextID）方法，contextID表示canvas元素對(duì)應(yīng)的ID名。

2.2 響應(yīng)與觸屏相關(guān)的事件

在繪制過程中，需要監(jiān)聽用戶手指“接觸屏幕”、“在屏幕上移動(dòng)”，“離開屏幕”等事件。 具體來說，三個(gè)事件對(duì)應(yīng)的函數(shù)如表2所示：

2.3 獲取觸屏位置，繪制圖形

一旦監(jiān)聽到觸屏事件以后，就開始記錄觸屏位置，與鼠標(biāo)點(diǎn)擊的位置不同的是，在移動(dòng)端的觸屏事件中，用戶手指接觸屏幕的可能不止一個(gè)點(diǎn)。為簡(jiǎn)單處理，本文中，只選擇眾多接觸點(diǎn)的其中一個(gè)點(diǎn)代表手指的位置。在本文中，筆者用e.touches[0].pageX、e.touches[0].pageY分別表示接觸點(diǎn)的橫坐標(biāo)和縱坐標(biāo)。其中e如前面所述，表示監(jiān)聽的事件，e.touches以數(shù)組的形式返回接觸的所有點(diǎn)的坐標(biāo)，因此e.touches[0]表示所有接觸點(diǎn)的第一個(gè)接觸點(diǎn)的坐標(biāo)。當(dāng)剛開始觸屏的時(shí)候，記錄下位置作為起始點(diǎn)，緊接著，一旦移動(dòng)，會(huì)形成新的接觸點(diǎn)，筆者把后續(xù)點(diǎn)作為終點(diǎn)。有了起始點(diǎn)和終點(diǎn)后，便可以利用前面繪制線段的函數(shù)進(jìn)行繪制。如果再移動(dòng)，又將得到一個(gè)新的點(diǎn)，此處將新的點(diǎn)當(dāng)做終點(diǎn)，將之前線段的終點(diǎn)命名為起點(diǎn)，如此重復(fù)，直到監(jiān)聽到“離開屏幕”事件為止。

2.4 建立線段寬度與運(yùn)筆速度的模型

據(jù)常識(shí)可知，在同樣的筆的情況下，在繪制圖形過程中，用筆的力度決定了線段的粗細(xì)。用筆力度越大，線段越粗，力度越小，線段越細(xì)。模擬上述過程的困難之處在于，程序無法獲取力度的數(shù)據(jù)。因此，筆者改變思路，假設(shè)運(yùn)筆的力度也與運(yùn)筆的速度有關(guān)，運(yùn)筆力度越大，運(yùn)筆的速度越慢。由此可以得出如下結(jié)論：運(yùn)筆的速度來決定線段的粗細(xì)了。運(yùn)筆速度越慢，運(yùn)筆力度越大，線段越粗；反之也成立。根據(jù)初中的物理知識(shí)所知，速度是路程與時(shí)間的比值。因此為了得到運(yùn)筆速度，不僅需要計(jì)算線段起點(diǎn)和終點(diǎn)之間的距離，而且需要得到記錄兩點(diǎn)的時(shí)間差。距離比較容易解決，關(guān)鍵是時(shí)間差的計(jì)算。不妨在記錄起點(diǎn)和終點(diǎn)的時(shí)候，記錄當(dāng)時(shí)的時(shí)間；而兩者的差值即為時(shí)間差。當(dāng)然，不管運(yùn)筆力度如何強(qiáng)，線段不會(huì)趨向無窮寬；也不管運(yùn)筆力度如何弱，線段不會(huì)趨向無窮細(xì)。因此，雖然根據(jù)前面的推導(dǎo)，運(yùn)筆速度與線段的粗細(xì)成反比例關(guān)系，但是還存在一個(gè)最大值與最小值。

3 繪圖程序的實(shí)現(xiàn)效果

本節(jié)筆者將在繪圖區(qū)寫一個(gè)“好”字，具體的繪圖效果如圖1所示：

5 結(jié)論

本文針對(duì)PC端自帶的繪圖程序的不足之處，討論了移動(dòng)端繪圖程序的優(yōu)點(diǎn)以及實(shí)現(xiàn)過程。特別是考慮了運(yùn)筆的力度與線段的粗細(xì)之間的關(guān)系，通過建立數(shù)學(xué)模型表示了上述關(guān)系。當(dāng)然本文的繪圖程序還存在可以改進(jìn)的地方，如無法選擇筆的粗細(xì)；無法選擇畫筆的顏色，當(dāng)運(yùn)筆速度非常快的時(shí)候，會(huì)形成不連貫的線段，這些缺點(diǎn)都有待以后進(jìn)行改進(jìn)。

參考文獻(xiàn)：

[1] 李剛.瘋狂HTML5/CSS3/JavaScript講義[M].北京：電子工業(yè)出版社，2012：80-120.

[2]夏幫貴.基于Android平臺(tái)的移動(dòng)學(xué)習(xí)系統(tǒng)[J].西華大學(xué)學(xué)報(bào)：自然科學(xué)版，2011，30（5）：81-84.