俞立全 蘇州天鴻嘉匯軟件有限公司

1 概述

隨著移動互聯(lián)網(wǎng)不斷發(fā)展進(jìn)步，手機(jī)等移動設(shè)備屏幕顯示分辨率越來越高，對APP 設(shè)計方案提出了更高的要求，使用SVG 等線性矢量圖形化資源代替?zhèn)鹘y(tǒng)位圖圖片資源，可以自適應(yīng)各種大小屏幕而不會變得模糊，提高用戶視覺體驗(yàn)的同時也減少了設(shè)計人員適配不同屏幕的工作量。

SVG 是一種可縮放圖形，使用XML 格式定義和描述圖形，Android 系統(tǒng)已經(jīng)支持靜態(tài)SVG 圖形和SVG 動畫資源顯示，但無法感知用戶熱點(diǎn)區(qū)域觸控機(jī)制，需要編寫代碼響應(yīng)用戶操作，由于屏幕大小不同，坐標(biāo)定位變得很繁瑣，加上不同的內(nèi)容需要為每個SVG圖形編寫響應(yīng)代碼，重復(fù)工作量很大，為此我進(jìn)行了探索和組件化封裝，實(shí)現(xiàn)了SVG 響應(yīng)式組件。

2 功能實(shí)現(xiàn)

2.1 實(shí)現(xiàn)案例及說明

此技術(shù)已運(yùn)用在《數(shù)學(xué)計算大挑戰(zhàn)》APP 中 (參見圖1)。

(圖1)

當(dāng)用戶移動圓圈卡片到空白圓圈范圍內(nèi)時會自動吸附并計算同色線段上的數(shù)值，原本較為繁瑣的代碼編寫運(yùn)用SVG 響應(yīng)式組件后無需適配屏幕坐標(biāo)和編寫顯示交互代碼就能實(shí)現(xiàn)此功能，當(dāng)然這只是其中的一個例子。設(shè)計開發(fā)人員可以專注于功能邏輯和SVG圖形設(shè)計，為SVG 指定圖形熱點(diǎn)數(shù)據(jù)。

3 模塊結(jié)構(gòu)

SVG 響應(yīng)式組件分為3 個模塊部分：

1）SVG 響應(yīng)描述內(nèi)容（XML 格式），包含功能邏輯和SVG 圖形資源內(nèi)容。

2）SVG 解析轉(zhuǎn)換器，用于讀取SVG 內(nèi)容并根據(jù)屏幕大小自動轉(zhuǎn)換為Android 繪圖對象（Path，paint 等）。

3）SVG 熱點(diǎn)響應(yīng)生成器，用于讀取功能邏輯動態(tài)生成Android屏幕觸控響應(yīng)動作。

3.1 流程

具體流程如下（參見圖2）：

(圖2)

程序加載描述文件后開始解析，獲取SVG 圖像文件或內(nèi)容，解析SVG 并生成Android 圖像對象，繪制刷新輸出到屏幕顯示，響應(yīng)熱點(diǎn)模塊讀取熱點(diǎn)數(shù)據(jù)解析并生成響應(yīng)對象的位置信息和響應(yīng)接口，響應(yīng)設(shè)計者實(shí)現(xiàn)的接口方法。

3.2 響應(yīng)熱點(diǎn)設(shè)置

響應(yīng)熱點(diǎn)的設(shè)置可以是任何SVG 描述的節(jié)點(diǎn)圖形，如path、circle、rect 等節(jié)點(diǎn)，圖形節(jié)點(diǎn)熱點(diǎn)響應(yīng)區(qū)域會根據(jù)屏幕大小和自身圖形大小自動縮放，設(shè)計者只需要實(shí)現(xiàn)響應(yīng)后的執(zhí)行邏輯。

3.3 SVG 節(jié)點(diǎn)解析與繪制

SVG 為XML 結(jié)構(gòu)，通過Android 原DOM 對象可以很方便地讀取并解析SVG 節(jié)點(diǎn)數(shù)據(jù)。

不同的節(jié)點(diǎn)轉(zhuǎn)換為對應(yīng)的Android 圖像對象，如：circle、rect。節(jié)點(diǎn)屬性數(shù)據(jù)，如：fill、stroke、stroke-width 可以轉(zhuǎn)換為Paint 對象。通過響應(yīng)式組件自動保存在對象節(jié)點(diǎn)列表中。解析完成后通過AndroidCanvas 畫板繪制輸出。

3.4 響應(yīng)熱點(diǎn)解析與生成

響應(yīng)熱點(diǎn)數(shù)據(jù)保存于組件自定義XML 描述文件內(nèi)，設(shè)計人員只需填寫指向SVG 節(jié)點(diǎn)的對應(yīng)編號，組件讀取后生成對應(yīng)包含坐標(biāo)系數(shù)據(jù)的熱點(diǎn)區(qū)域，并響應(yīng)用戶實(shí)現(xiàn)的接口操作。

4 結(jié)語

SVG響應(yīng)式組件具有廣泛的應(yīng)用領(lǐng)域，不僅可以運(yùn)用在游戲領(lǐng)域，還可以運(yùn)用于網(wǎng)絡(luò)教育領(lǐng)域[3]，SVG 在提高圖像顯示，無損縮放，高清屏幕方面具有先天優(yōu)勢，同時SVG 響應(yīng)式組件在提高設(shè)計人員開發(fā)設(shè)計效率時效果明顯，不論在技術(shù)上還是經(jīng)濟(jì)上，都是必要和可行的。