CN113495658A - Svg图形的交互展示方法、终端设备、计算机设备及介质 - Google Patents

Abstract

本发明公开了一种可缩放矢量图形的交互展示方法、终端设备、计算机设备及介质。该方法的一具体实施方式包括：响应于用户对可缩放矢量图形的缩放操作，变更可缩放矢量图形中至少部分元素的透明度，其中，所述可缩放矢量图形包括多个元素；根据变更透明度后的元素展示所述可缩放矢量图形。该实施方式可实现随着实时的缩放操作平滑地变换展示的元素，从而在变换可缩放矢量图形缩放比例的同时平滑地变换展示内容，可提升用户体验。

Description

SVG图形的交互展示方法、终端设备、计算机设备及介质

技术领域

本发明涉及显示技术领域。更具体地，涉及一种SVG图形的交互展示方法、终端设备、计算机设备及介质。

背景技术

SVG(Scalable Vector Graphics，可缩放矢量图形)是目前广泛应用的一种图像文件格式，SVG图形与传统图片相比的最大的特点就是可以其自由缩放，无论放大多少倍数不会出现失真现象。SVG图形基于XML语言，具有XML格式化数据，可以直接用代码来描述或绘制图形。SVG图形的XML格式化数据具有可读性且可动态修改属性，在SVG图形中，每一个笔画都可以对应到一个XML语句，从而可以方便的修改其某些属性。

以在许多领域中已经有了广泛应用的SVG地图为例，现有的对SVG图形进行缩放时的元素变换方式为：

目前最常用的方式是通过多图层的概念在底图上进行地图绘制，然后把对应的某些标注图型元素和文字元素置于底图的上方，由程序控制各元素的显示或隐藏，这种方式需要对元素的显示位置做精确定位，辅助数据较多，地图修改后辅助数据也要随之变化，维护更新非常繁琐。同时，由于底图是一张完整的图片，无论缩放都会显示整张图的所有内容，所以在大图展示时展示效果不佳。

除上述通过多图层的概念在底图上进行地图绘制的方式之外，目前还存在一种分块加载的方式，也称为分布加载方式，该方式在缩放比例较小时直接展示整体结构图，随着地图放大，根据当前显示区域的位置向服务器请求局部图进行展示。这种方式可以较好实现地图缩放功能，也是现有大多数地图系统APP所采用的通用方式，但是这种方式需要服务器端的支持较多，地图中局部展示和整体分离，当修改地图时需要修改的数据内容较多，不利于地图系统APP维护。

因此，需要提供一种新的SVG图形的交互展示方法、终端设备、计算机设备及介质。

发明内容

本发明的目的在于提供一种，以解决现有技术存在的问题中的至少一个。

为达到上述目的，本发明采用下述技术方案：

本发明第一方面提供了一种SVG图形的交互展示方法，包括：

响应于用户对SVG图形的缩放操作，变更SVG图形中至少部分元素的透明度，其中，所述SVG图形包括多个元素；

根据变更透明度后的元素展示所述SVG图形。

本发明第一方面提供的SVG图形的交互展示方法，巧妙地采用了使不同元素的透明度随缩放操作变更的方式，可实现随着实时的缩放操作平滑地变换展示的元素，从而在变换SVG图形缩放比例的同时平滑地变换展示内容，可提升用户体验，且该方法可离线执行。另外，与分布加载方式相比，由于本发明第一方面提供的SVG图形的交互展示方法实现不同展示内容的变换只利用一个SVG图形即可，一方面，在用户上下或左右滑动显示窗口时可避免由于重新加载图形而出现卡顿现象，另一方面，便于SVG图形的更新(修改SVG图形时直接替换新图形即可)，在更新过程中不易发生错误，适用于例如地图、超市平面图等各种SVG图形，便于例如地图系统等APP的更新维护。

可选地，所述响应于用户对SVG图形的缩放操作，变更SVG图形中至少部分元素的透明度包括：

响应于用户对SVG图形的缩小操作，减小SVG图形中反映整体信息的元素的透明度并增大SVG图形中反映细节信息的元素的透明度；

响应于用户对SVG图形的放大操作，增大SVG图形中反映整体信息的元素的透明度并减小SVG图形中反映细节信息的元素的透明度。

此可选方式可实现在SVG图形放大时展示更反映整体信息的元素、在SVG图形缩小时展示更反映细节信息的元素，且不同细节等级的元素之间平滑变化。

可选地，所述SVG图形包括至少一个反映整体信息的第一元素和至少一个反映细节信息的第二元素；

所述响应于用户对SVG图形的缩小操作，减小SVG图形中反映整体信息的元素的透明度并增大SVG图形中反映细节信息的元素的透明度包括：

响应于用户对SVG图形的缩小操作，根据第一元素透明度与缩放倍数之间的第一关系函数计算减小后的第一元素透明度，根据第二元素的透明度与缩放倍数之间的第二关系函数计算增大后的第二元素透明度；

所述响应于用户对SVG图形的放大操作，增大SVG图形中反映整体信息的元素的透明度并减小SVG图形中反映细节信息的元素的透明度包括：

响应于用户对SVG图形的放大操作，根据第一元素透明度与缩放倍数之间的第一关系函数计算增大后的第一元素透明度并根据第二元素透明度与缩放倍数之间的第二关系函数计算减小后的第二元素透明度。

此可选方式利于实现随着实时的缩放操作，展示的元素在不同细节等级的第一元素与第二元素之间平滑变换。

可选地，所述第一关系函数和所述第二关系函数分别为线性函数。

此可选方式采用线性函数作为关系函数，更利于展示的元素在不同细节等级的第一元素与第二元素之间变换的平滑性。

可选地，第一关系函数为

第二关系函数为

其中，t₁为第一元素透明度值，t₁＝0表示完全透明，t₁＝255表示完全不透明，t₂为第二元素透明度值，t₂＝0表示完全透明，t₂＝255表示完全不透明，x为当前缩放操作对应的SVG图形尺寸相比于原SVG图形尺寸的缩放倍数，α为变更系数。

可选地，该方法还包括：

根据第一关系函数计算得到的减小或增大后的第一元素透明度设置SVG图形代码中第一元素的透明度属性，根据第二关系函数计算得到的减小或增大后的第二元素透明度设置SVG图形代码中第二元素的透明度属性；

执行设置后的SVG图形代码以根据变更透明度后的元素展示SVG图形。

此可选方式利用了SVG图形具有XML格式化数据、XML格式化数据具有可读性且可动态修改属性、XML格式文本包括用于描述透明度属性的标签的特点，根据关系函数计算得到的变更后的透明度直接设置SVG图形代码中描述透明度属性的标签的值，有利于实现元素透明度随缩放操作实时变更，有利于实现展示的元素在不同细节等级的第一元素与第二元素之间平滑变换。

可选地，所述根据第一关系函数计算得到的减小或增大后的第一元素透明度设置SVG图形代码中第一元素的透明度属性，根据第二关系函数计算得到的减小或增大后的第二元素透明度设置SVG图形代码中第二元素的透明度属性包括：

解析SVG图形的XML格式化数据，通过每一第一元素的唯一标识寻找到第一元素并根据第一关系函数计算得到的减小或增大后的第一元素透明度设置SVG图形代码中第一元素的透明度属性，通过每一第二元素的唯一标识寻找到第二元素并根据第二关系函数计算得到的减小或增大后的第二元素透明度设置SVG图形代码中第二元素的透明度属性。

此可选方式利用为每一元素赋予的唯一标识(XML格式文本中添加的用于描述ID属性的标签)，可快速准确地定位第一元素和第二元素，更有利于实现元素透明度随缩放操作实时变更，更有利于实现展示的元素在不同细节等级的第一元素与第二元素之间平滑变换。

可选地，所述元素包括图形元素和/或文字元素。

可选地，所述SVG图形为SVG地图。

本发明第二方面提供了一种执行本发明第一方面提供的SVG图形的交互展示方法的终端设备，包括交互模块和展示模块，

所述交互模块，用于响应于用户对SVG图形的缩放操作，变更SVG图形中至少部分元素的透明度，其中，所述可缩放矢量图形包括多个元素；

所述展示模块，用于根据变更透明度后的元素展示所述SVG图形。

本发明第三方面提供了一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时实现本发明第一方面提供的SVG图形的交互展示方法。

本发明第四方面提供了一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现本发明第一方面提供的SVG图形的交互展示方法。

本发明的有益效果如下：

本发明所述技术方案巧妙地采用了使不同元素的透明度随缩放操作变更的方式，可实现随着实时的缩放操作平滑地变换展示的元素，从而在变换SVG图形缩放比例的同时平滑地变换展示内容，可提升用户体验，且可离线执行。另外，与分布加载方式相比，由于本发明所述技术方案实现不同展示内容的变换只利用一个SVG图形即可，一方面，在用户上下或左右滑动显示窗口时可避免由于重新加载图形而出现卡顿现象，另一方面，便于SVG图形的更新(修改SVG图形时直接替换新图形即可)，在更新过程中不易发生错误，适用于例如地图、超市平面图等各种SVG图形，便于例如地图系统等APP的更新维护。

附图说明

下面结合附图对本发明的具体实施方式作进一步详细的说明：

图1示出本实施例提供的SVG图形的交互展示方法的流程图。

图2示出超市平面图的原图示意图。

图3示出放大后的超市平面图的示意图。

图4示出第二关系函数曲线的示意图。

图5示出一个SVG图形代码段的示意图。

图6示出执行图5所示的SVG图形代码所展示的图形。

图7示出另一个SVG图形代码段的示意图。

图8示出执行图7所示的SVG图形代码所展示的图形。

图9示出实现本发明实施例提供的装置的计算机系统的结构示意图。

具体实施方式

为了更清楚地说明本发明，下面结合优选实施例和附图对本发明做进一步的说明。附图中相似的部件以相同的附图标记进行表示。本领域技术人员应当理解，下面所具体描述的内容是说明性的而非限制性的，不应以此限制本发明的保护范围。

本发明的一个实施例提供了一种SVG图形的交互展示方法，该方法可以通过各种具有图形展示功能的软件客户端实现，软件客户端安装在PC端例如台式机或移动终端例如智能手机、平板电脑上，在运行软件客户端例如APP时实现本实施例提供的SVG图形的交互展示方法。

如图1所示，本实施例提供的SVG图形的交互展示方法，包括如下步骤：

响应于用户对SVG图形的缩放操作，变更SVG图形中至少部分元素的透明度，其中，所述SVG图形包括多个元素；

根据变更透明度后的元素展示SVG图形。

本实施例提供的SVG图形的交互展示方法，巧妙地采用了使不同元素的透明度随缩放操作变更的方式，可实现随着实时的缩放操作平滑地变换展示的元素，从而在变换SVG图形缩放比例的同时平滑地变换展示内容，可提升用户体验，且该方法可离线执行。另外，与分布加载方式相比，由于本发明第一方面提供的SVG图形的交互展示方法实现不同展示内容的变换只利用一个SVG图形即可，一方面，在用户上下或左右滑动显示窗口时可避免由于重新加载图形而出现卡顿现象，另一方面，便于SVG图形的更新(修改SVG图形时直接替换新图形即可)，在更新过程中不易发生错误，适用于例如地图、超市平面图等各种SVG图形，便于例如地图系统等APP的更新维护。可理解的是，还应根据缩放操作展示SVG图形，即，用户进行缩放操作后不仅可变换展示内容还应变换展示区域尺寸。

在本实施例的一些可选的实现方式中，所述响应于用户对SVG图形的缩放操作，变更SVG图形中至少部分元素的透明度包括：

响应于用户对SVG图形的缩小操作，减小SVG图形中反映整体信息的元素的透明度并增大SVG图形中反映细节信息的元素的透明度；

响应于用户对SVG图形的放大操作，增大SVG图形中反映整体信息的元素的透明度并减小SVG图形中反映细节信息的元素的透明度。

此实现方式可实现在SVG图形放大时展示更反映整体信息的元素、在SVG图形缩小时展示更反映细节信息的元素，且不同细节等级的元素之间平滑变化。此实现方式中，整体和细节是相对的，SVG图形可包括多组不同细节等级的元素，在一个具体示例中，SVG图形为一张地图，地图包括反映小区信息的一级元素、反映小区中楼宇信息的二级元素和反映楼宇的单元门信息的三级元素等，假如当前展示的是原图，原图中二级元素完全不透明或者说透明度为零而显示，一级元素和三级元素完全透明而不显示或者说被隐藏(即原图仅展示二级元素)，则获取到用户的缩小操作时减小一级元素的透明度并增大二级元素的透明度，获取到用户的放大操作时增大二级元素的透明度并减小三级元素的透明度。

在本实施例的一些可选的实现方式中，所述SVG图形包括至少一个反映整体信息的第一元素和至少一个反映细节信息的第二元素；

所述响应于用户对SVG图形的缩小操作，减小SVG图形中反映整体信息的元素的透明度并增大SVG图形中反映细节信息的元素的透明度包括：

响应于用户对SVG图形的缩小操作，根据第一元素透明度与缩放倍数之间的第一关系函数计算减小后的第一元素透明度，根据第二元素的透明度与缩放倍数之间的第二关系函数计算增大后的第二元素透明度，即，基于根据第一关系函数进行计算的结果变更第一元素的透明度以将其减小，基于根据第二关系函数进行计算的结果变更第二元素的透明度以将其增大；

所述响应于用户对SVG图形的放大操作，增大SVG图形中反映整体信息的元素的透明度并减小SVG图形中反映细节信息的元素的透明度包括：

响应于用户对SVG图形的放大操作，根据第一元素透明度与缩放倍数之间的第一关系函数计算增大后的第一元素透明度并根据第二元素透明度与缩放倍数之间的第二关系函数计算减小后的第二元素透明度。

此实现方式利于实现随着实时的缩放操作，展示的元素在不同细节等级的第一元素与第二元素之间平滑变换。

在一个具体示例中，为了更直观的反映第一元素和第二元素的差异，SVG图形为一张超市平面图，超市平面图包括两个细节等级等级的元素，例如图2所示的反映超市中各区域信息的一级元素和图3所示的反映各区域中货架信息的二级元素，即一级元素作为第一元素、二级元素作为第二元素，图2中，三个矩形的一级元素例如分别表示生鲜区、百货区和食品区。假如当前展示的原图是图2，即原图中一级元素透明度为零而显示，二级元素完全透明而被隐藏，则随着用户进行放大操作，一级元素的透明度基于第一关系函数增大且二级元素的透明度基于第二关系函数减小，最终展示的平面图变为图3。

在本实施例的一些可选的实现方式中，所述第一关系函数和所述第二关系函数分别为线性函数。

此实现方式采用线性函数作为关系函数，更利于展示的元素在不同细节等级的第一元素与第二元素之间变换的平滑性。

在本实施例的一些可选的实现方式中，第一关系函数为

第二关系函数为

其中，t₁为ARBG格式的第一元素透明度值，t₂为ARBG格式的第二元素透明度值，关于ARBG格式，其是一种在计算机系统上的色彩标识方式，其中RGB分别代表色彩中的红绿蓝三原色，A代表的是色彩的alpha通道，也就是代表色彩的透明度值，按照规范要求，有如下公式：C(a，r，g，b)，a∈[0,255]，a＝0代表该像素点是透明的，a＝255则代表该像素点完全不透明，因此，ARBG格式的透明度值越小则表示透明度越大；x为当前缩放操作对应的SVG图形尺寸相比于原SVG图形尺寸的缩放倍数，其中，设当前缩放操作对应的SVG图形尺寸为P，原SVG图形尺寸为Q，则x＝(P/Q)-1，x＝0表示未缩放，x＝1表示P＝2Q即放大后的SVG图形尺寸等于两倍的原SVG图形尺寸，x＝2表示P＝3Q即放大后的SVG图形尺寸等于三倍的原SVG图形尺寸；α为变更系数，可理解的是，α的取值大于零，具体取值可根据需求设置，其中，第二关系函数曲线如图4所示，α的取值决定了缩放倍数0-2之间的曲线斜率，α的取值越大，第一元素及第二元素的透明度随缩放倍数变化的幅度就越大，或者说α的取值越大则施加相同的缩放操作时第一元素及第二元素的透明度的变化就越大，展示内容的切换就越快。

接续前述示例，超市平面图包括反映超市中各区域信息的一级元素和反映各区域中货架信息的二级元素，即一级元素作为第一元素、二级元素作为第二元素，假如初始时刻原图是t₁＝255，t₂＝0(即只展示一级元素)。

若在初始时刻之后的第一时刻获取到例如x＝﹣1的缩小操作(相比于x＝0而言x＝﹣1是缩小操作)则一级元素和二级元素的透明度值不变(透明度值无法大于最大值255或小于最小值0)。

若在初始时刻之后的第一时刻获取到例如x＝1的放大操作，则t₁＝255-α且t₂＝α，即减小第一元素透明度值以相比原图增大一级元素的透明度且增大第二元素透明度值以相比原图减小二级元素的透明度；若在第一时刻之后的第二时刻获取到例如x＝3的放大操作(相比于第一时刻的x＝1而言x＝3是放大操作，即用户持续施加放大操作)，则t₁＝0且t₂＝255，即减小第一元素透明度值以相比第一时刻的平面图增大一级元素的透明度且增大第二元素透明度值以相比第一时刻的平面图减小二级元素的透明度；若在第二时刻之后的第三时刻获取到例如x＝1.5的缩小操作(相比于第二时刻的x＝3而言x＝1.5是缩小操作)，则t₁＝255-1.5α且t₂＝1.5α，即增大第一元素透明度值以相比第二时刻的平面图减小一级元素的透明度且减小第二元素透明度值以相比第二时刻的平面图增大二级元素的透明度。

可理解的是，上述示例是以原图为t₁＝255，t₂＝0这种通常来说初始展示的是最能反映整体信息的元素的SVG图形进行举例说明，若原图中t₁与t₂的取值有所变化则可适应性调整第一关系函数与第二关系函数的具体函数式。进一步，关系函数不限于采用线性函数，也可采用非线性函数以实现特别的显示效果。另外，对于包括三个或更多细节等级元素的SVG图形，可以根据实际需求采用多级的关系函数(同样不限于线性函数)，以实现多级元素的符合需求的透明度变换方式(例如某级元素会随着缩放操作由显示到隐藏再到显示的复杂变化过程)，以实现更特别的展示效果。

在本实施例的一些可选的实现方式中，该方法还包括：

根据第一关系函数计算得到的减小或增大后的第一元素透明度设置SVG图形代码中第一元素的透明度属性，根据第二关系函数计算得到的减小或增大后的第二元素透明度设置SVG图形代码中第二元素的透明度属性；

执行设置后的SVG图形代码以根据变更透明度后的元素展示SVG图形。

此实现方式利用了SVG图形具有XML格式化数据、XML格式化数据具有可读性且可动态修改属性、XML格式文本包括用于描述透明度属性的标签的特点，根据关系函数计算得到的变更后的透明度直接设置SVG图形代码中描述透明度属性的标签的值，有利于实现元素透明度随缩放操作实时变更，有利于实现展示的元素在不同细节等级的第一元素与第二元素之间平滑变换。

在本实施例的一些可选的实现方式中，所述根据第一关系函数计算得到的减小或增大后的第一元素透明度设置SVG图形代码中第一元素的透明度属性，根据第二关系函数计算得到的减小或增大后的第二元素透明度设置SVG图形代码中第二元素的透明度属性包括：

解析SVG图形的XML格式化数据，通过每一第一元素的唯一标识寻找到第一元素并根据第一关系函数计算得到的减小或增大后的第一元素透明度设置SVG图形代码中第一元素的透明度属性，通过每一第二元素的唯一标识寻找到第二元素并根据第二关系函数计算得到的减小或增大后的第二元素透明度设置SVG图形代码中第二元素的透明度属性。

此实现方式利用为每一元素赋予的唯一标识(XML格式文本中添加的用于描述ID属性的标签)，可快速准确地定位第一元素和第二元素，更有利于实现元素透明度随缩放操作实时变更，更有利于实现展示的元素在不同细节等级的第一元素与第二元素之间平滑变换。

接续前述示例，以本实施例提供的SVG图形的交互展示方法在Android系统(安卓系统)的智能手机上执行为例，对变更第一元素和第二元素的透明度进行进一步说明：

标准的SVG图形只能在Android系统的浏览器中渲染显示，Android系统的原生组件(如Image View)无法直接解析SVG图形，但可经过少量的转换将SVG变为Android XML文件，这样就可以被预置为资源文件，Image View可以引用资源，但是实际上，Android XML文件在编译过程中，又做了二次解析转化，所以不适用于本实施例要实现的元素透明度动态变换的场景。因此本示例中，采用直接解析SVG的XML文件，然后根据解析结果在Canvas上画出对应的图形的方式，由于是画完后一次展示，所以现实效率上没有问题。

本示例的应用场景是在Android智能手机的触摸屏上展示一家超市的超市平面图，超市平面图中包含多个区域和每个区域中的多个货架，并在图中展示一些定位信息，例如门窗、收银台等。由于智能手机的触摸屏大小有限，许多的细节内容全部展示出来会显得图中内容凌乱，展示效果不佳。如果采用分布加载方式，可以先加载一张货架的区域平面图，随着用户在触摸屏某区域施加放大操作(例如双指同时按触某区域并双指远离)而展示该区域的货架平面图，以展示该区域的细节信息，这是一种通常的做法，但智能手机需要加载多张图片，如果超市内陈列发生变化，则需要修改多张平面图，维护更新非常繁琐。

与上述不同，应用本示例，则可由一张SVG图形包含了一个超市的所有元素，展示时则先原图展示区域信息，随着用户进行放大操作，区域信息逐渐消失而具体的货架信息逐渐展示出来，由于只有一张SVG图形，也不会在上下或左右滑动显示窗口时由于重新加载图形而出现卡顿现象。

其中，SVG是一种基于XML语法的图像格式，与其他基于像素处理的图像格式不同的是，SVG是对图像的形状进行描述，其本质上是文本文件。SVG图形的XML格式文本是在<svg>标签下的一些标签，例如，<rect>标签代表矩形，<circle>标签代表圆形，<ellipse>标签代表椭圆，<path>标签代表直线，<text>代表文字，标签内部的文字用于描述当前标签的属性，比如位置、颜色、字体粗细等信息，整个文件内容是结构化的。本示例主要应用的是代表填充色的透明度值的“fill-opacity”和代表外框的透明度值“stroke-opacity”，这两者分别在0－1之间取值，0代表完全透明，1代表完全不透明。另外，本示例还为svg里的元素添加ID属性，给各元素分别命名加以区分，可理解的是，ID属性不影响显示结果。

对于SVG图形代码，图5所示的代码段是一个简单的例子，执行代码后可以看到，该例子是在宽180像素高180像素的绘图区域上，绘制了一个宽45像素宽115像素的矩形，外框颜色为#ff7f0000，矩形填充了透明的颜色，具体的显示效果如图6所示。

本示例中，可以在一张SVG图形中绘制多个不同的元素(这里以Android XML格式为例)，并且通过ID属性为每一元素命名，这样就可以快速准确地寻找到各元素。用“stroke-opacity”和“fill-opacity”设置元素的颜色。当设置ARBG格式的透明度值为255(0xff)时，换算为opacity的取值为1(可设置opacity的默认值为1)，则该元素就可以在绘制区域完全显示，而当设置ARBG格式的透明度值为0(0x00)时，换算为opacity的取值为0，则该元素完全隐藏。

进一步，由于SVG图形的XML为格式化数据，并且已预先为SVG图形中的每个元素赋予唯一ID，就可以通过程序解析XML寻找到对应的元素。然后，可以根据需求先对XML中的元素进行预处理，动态修改元素的“stroke-opacity”的值和“fill-opacity”的值，以完成动态设置SVG图形中各元素的透明度属性功能；也可以通过设置元素的“stroke-opacity”的值和“fill-opacity”的值，来动态控制元素的显示和隐藏。图7所示代码是上述过程的一个例子，SVG图形中有三个元素，分别命名为name1、name2和name3，其中位于中间的name2元素呈现的颜色应为绿色，但由于设置了opacity的取值为0，name2元素展示为无色透明或者说被隐藏，如图8所示。

基于上述，采用第一关系函数为

第二关系函数为

时，可以根据当前获取的缩放倍数x动态计算出ARBG格式的区域元素透明度值t₁和ARBG格式的货架元素透明度值t₂，再在将t₁和t₂分别除以255以进行转换，即可得到区域元素的opacity取值和货架元素的opacity取值，从而可设置SVG图形代码中各元素的“stroke-opacity”和“fill-opacity”属性，设置完成后再触发Android的原生控件Canvas重新绘画可见区域，就实现了通过透明度的变更动态显示或隐藏SVG图中的区域元素和货架元素。

可理解的是，本实施例提供的SVG图形的交互展示方法不限于在Android系统的终端设备上执行，还可以在其他操作系统中执行。

在本实施例的一些可选的实现方式中，所述元素包括图形元素和/或文字元素。例如，图2中的第一元素和图3中第二元素均为图形元素。

作为本实施例提供的SVG图形的交互展示方法的拓展，基于采用使不同元素的透明度随缩放操作变更思路，还可根据需求，通过例如建立缩放倍数与不同元素的尺寸、颜色或位置等属性之间的关系函数的方式，使不同元素的尺寸、颜色或位置等属性随缩放操作变更，以实现更丰富的展示效果。

本发明的另一个实施例提供了一种执行上述SVG图形的交互展示方法的终端设备，包括交互模块和展示模块，

所述交互模块，用于响应于用户对SVG图形的缩放操作，变更SVG图形中至少部分元素的透明度，其中，所述可缩放矢量图形包括多个元素；

所述展示模块，用于根据变更透明度后的元素展示所述SVG图形。

需要说明的是，本实施例提供的终端设备的工作流程与上述SVG图形的交互展示方法相似，相关之处可以参照上述说明，在此不再赘述。

终端设备可以是各种电子设备，包括但不限于个人电脑、智能手机、智能手表、平板电脑、个人数字助理等等。

在一具体示例中，SVG图形为SVG地图，终端设备为智能手机，交互模块和展示模块集成于智能手机的触摸屏实现，用户打开智能手机安装的电子地图APP后，触摸屏展示原尺寸的SVG地图，响应于用户施加在触摸屏上的对SVG地图的缩放操作(例如双指同时按触时双指远离则进行放大、双指靠近则进行缩小)，变更SVG地图中反映小区信息的小区元素(具体可为小区模型图元素)和反映小区中楼宇信息的楼宇元素(具体可为楼宇模型图元素)的透明度，以在缩小时展示小区元素，放大时展示楼宇元素。

如图9所示，适于用来实现上述实施例提供的终端设备的计算机系统，包括中央处理模块(CPU)，其可以根据存储在只读存储器(ROM)中的程序或者从存储部分加载到随机访问存储器(RAM)中的程序而执行各种适当的动作和处理。在RAM中，还存储有计算机系统操作所需的各种程序和数据。CPU、ROM以及RAM通过总线被此相连。输入/输入(I/O)接口也连接至总线。

以下部件连接至I/O接口:包括键盘、鼠标等的输入部分；包括诸如液晶显示器(LCD)等以及扬声器等的输出部分；包括硬盘等的存储部分；以及包括诸如LAN卡、调制解调器等的网络接口卡的通信部分。通信部分经由诸如因特网的网络执行通信处理。驱动器也根据需要连接至I/O接口。可拆卸介质，诸如磁盘、光盘、磁光盘、半导体存储器等等，根据需要安装在驱动器上，以便于从其上读出的计算机程序根据需要被安装入存储部分。

特别地，根据本实施例，上文流程图描述的过程可以被实现为计算机软件程序。例如，本实施例包括一种计算机程序产品，其包括有形地包含在计算机可读介质上的计算机程序，上述计算机程序包含用于执行流程图所示的方法的程序代码。在这样的实施例中，该计算机程序可以通过通信部分从网络上被下载和安装，和/或从可拆卸介质被安装。

附图中的流程图和示意图，图示了本实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或示意图中的每个方框可以代表一个模块、程序段或代码的一部分，上述模块、程序段或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个接连地表示的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，示意图和/或流程图中的每个方框、以及示意和/或流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。

作为另一方面，本实施例还提供了一种非易失性计算机存储介质，该非易失性计算机存储介质可以是上述实施例中上述装置中所包含的非易失性计算机存储介质，也可以是单独存在，未装配入终端中的非易失性计算机存储介质。上述非易失性计算机存储介质存储有一个或者多个程序，当上述一个或者多个程序被一个设备执行时，使得上述设备：响应于用户对SVG图形的缩放操作，变更SVG图形中至少部分元素的透明度，其中，所述可缩放矢量图形包括多个元素；根据变更透明度后的元素展示所述SVG图形。

在本发明的描述中，需要说明的是，诸如第一和第二等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。

显然，本发明的上述实施例仅仅是为清楚地说明本发明所作的举例，而并非是对本发明的实施方式的限定，对于本领域的普通技术人员来说，在上述说明的基础上还可以做出其它不同形式的变化或变动，这里无法对所有的实施方式予以穷举，凡是属于本发明的技术方案所引伸出的显而易见的变化或变动仍处于本发明的保护范围之列。

Claims (12)

1.一种可缩放矢量图形的交互展示方法，其特征在于，包括：

响应于用户对可缩放矢量图形的缩放操作，变更可缩放矢量图形中至少部分元素的透明度，其中，所述可缩放矢量图形包括多个元素；

根据变更透明度后的元素展示所述可缩放矢量图形。

2.根据权利要求1所述的方法，其特征在于，所述响应于用户对可缩放矢量图形的缩放操作，变更可缩放矢量图形中至少部分元素的透明度包括：

响应于用户对可缩放矢量图形的缩小操作，减小可缩放矢量图形中反映整体信息的元素的透明度并增大可缩放矢量图形中反映细节信息的元素的透明度；

响应于用户对可缩放矢量图形的放大操作，增大可缩放矢量图形中反映整体信息的元素的透明度并减小可缩放矢量图形中反映细节信息的元素的透明度。

3.根据权利要求2所述的方法，其特征在于，所述可缩放矢量图形包括至少一个反映整体信息的第一元素和至少一个反映细节信息的第二元素；

所述响应于用户对可缩放矢量图形的缩小操作，减小可缩放矢量图形中反映整体信息的元素的透明度并增大可缩放矢量图形中反映细节信息的元素的透明度包括：

响应于用户对可缩放矢量图形的缩小操作，根据第一元素透明度与缩放倍数之间的第一关系函数计算减小后的第一元素透明度，根据第二元素的透明度与缩放倍数之间的第二关系函数计算增大后的第二元素透明度；

所述响应于用户对可缩放矢量图形的放大操作，增大可缩放矢量图形中反映整体信息的元素的透明度并减小可缩放矢量图形中反映细节信息的元素的透明度包括：

响应于用户对可缩放矢量图形的放大操作，根据第一元素透明度与缩放倍数之间的第一关系函数计算增大后的第一元素透明度并根据第二元素透明度与缩放倍数之间的第二关系函数计算减小后的第二元素透明度。

4.根据权利要求3所述的方法，其特征在于，所述第一关系函数和所述第二关系函数分别为线性函数。

5.根据权利要求4所述的方法，其特征在于，第一关系函数为

第二关系函数为

其中，t₁为第一元素透明度值，t₁＝0表示完全透明，t₁＝255表示完全不透明，t₂为第二元素透明度值，t₂＝0表示完全透明，t₂＝255表示完全不透明，x为当前缩放操作对应的可缩放矢量图形尺寸相比于原可缩放矢量图形尺寸的缩放倍数，α为变更系数。

6.根据权利要求3所述的方法，其特征在于，该方法还包括：

根据第一关系函数计算得到的减小或增大后的第一元素透明度设置可缩放矢量图形代码中第一元素的透明度属性，根据第二关系函数计算得到的减小或增大后的第二元素透明度设置可缩放矢量图形代码中第二元素的透明度属性；

执行设置后的可缩放矢量图形代码以根据变更透明度后的元素展示可缩放矢量图形。

7.根据权利要求6所述的方法，其特征在于，所述根据第一关系函数计算得到的减小或增大后的第一元素透明度设置可缩放矢量图形代码中第一元素的透明度属性，根据第二关系函数计算得到的减小或增大后的第二元素透明度设置可缩放矢量图形代码中第二元素的透明度属性包括：

解析可缩放矢量图形的XML格式化数据，通过每一第一元素的唯一标识寻找到第一元素并根据第一关系函数计算得到的减小或增大后的第一元素透明度设置可缩放矢量图形代码中第一元素的透明度属性，通过每一第二元素的唯一标识寻找到第二元素并根据第二关系函数计算得到的减小或增大后的第二元素透明度设置可缩放矢量图形代码中第二元素的透明度属性。

8.根据权利要求1所述的方法，其特征在于，所述元素包括图形元素和/或文字元素。

9.根据权利要求1所述的方法，其特征在于，所述可缩放矢量图形为可缩放矢量地图。

10.一种执行如权利要求1-9中任一项所述方法的终端设备，其特征在于，包括交互模块和展示模块，

所述交互模块，用于响应于用户对可缩放矢量图形的缩放操作，变更可缩放矢量图形中至少部分元素的透明度，其中，所述可缩放矢量图形包括多个元素；

所述展示模块，用于根据变更透明度后的元素展示所述可缩放矢量图形。

11.一种计算机设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述程序时实现如权利要求1-9中任一项所述的方法。

12.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，该程序被处理器执行时实现如权利要求1-9中任一项所述的方法。

Images