一种基于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 响应式组件在提高设计人员开发设计效率时效果明显，不论在技术上还是经济上，都是必要和可行的。