一種基于Android 平臺的SVG 響應式組件

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

1 概述

隨著移動互聯網不斷發展進步，手機等移動設備屏幕顯示分辨率越來越高，對APP 設計方案提出了更高的要求，使用SVG 等線性矢量圖形化資源代替傳統位圖圖片資源，可以自適應各種大小屏幕而不會變得模糊，提高用戶視覺體驗的同時也減少了設計人員適配不同屏幕的工作量。

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

2 功能實現

2.1 實現案例及說明

此技術已運用在《數學計算大挑戰》APP 中 (參見圖1)。

(圖1)

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

3 模塊結構

SVG 響應式組件分為3 個模塊部分：

1）SVG 響應描述內容（XML 格式），包含功能邏輯和SVG 圖形資源內容。

2）SVG 解析轉換器，用于讀取SVG 內容并根據屏幕大小自動轉換為Android 繪圖對象（Path，paint 等）。

3）SVG 熱點響應生成器，用于讀取功能邏輯動態生成Android屏幕觸控響應動作。

3.1 流程

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

(圖2)

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

3.2 響應熱點設置

響應熱點的設置可以是任何SVG 描述的節點圖形，如path、circle、rect 等節點，圖形節點熱點響應區域會根據屏幕大小和自身圖形大小自動縮放，設計者只需要實現響應后的執行邏輯。

3.3 SVG 節點解析與繪制

SVG 為XML 結構，通過Android 原DOM 對象可以很方便地讀取并解析SVG 節點數據。

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

3.4 響應熱點解析與生成

響應熱點數據保存于組件自定義XML 描述文件內，設計人員只需填寫指向SVG 節點的對應編號，組件讀取后生成對應包含坐標系數據的熱點區域，并響應用戶實現的接口操作。

4 結語

SVG響應式組件具有廣泛的應用領域，不僅可以運用在游戲領域，還可以運用于網絡教育領域[3]，SVG 在提高圖像顯示，無損縮放，高清屏幕方面具有先天優勢，同時SVG 響應式組件在提高設計人員開發設計效率時效果明顯，不論在技術上還是經濟上，都是必要和可行的。