CN104680421A - 一种可伸缩矢量图形svg显示方法及装置 - Google Patents

Abstract

本发明公开了一种可伸缩矢量图形SVG显示方法，用以提高SVG的显示效率。具体包括：获取并解析SVG文件，获得组成该SVG文件的各SVG元素对象，描绘各个SVG元素对象生成SVG原始图，并保存至内存，从内存中获取该SVG原始图并映射至用户显示区进行显示。本发明还公开了一种SVG显示装置。

Description

一种可伸缩矢量图形SVG显示方法及装置

技术领域

本发明涉及电力自动化技术领域，尤其涉及一种可伸缩矢量图形SVG显示方法及装置。

背景技术

电力系统中的电气设备按作用不同可分为一次设备和二次设备。一次设备是指直接进行电能的生产、输送、分配的电气设备，由一次设备连接组成的电路称为一次接线或主接线，电路图称为一次接线图或一次设备接线图。

根据国家电网公司对智能变电站辅助系统关于一次设备接线图的显示要求，一次设备接线图采用可伸缩矢量图形（Scalable Vector Graphics，SVG）显示方式。SVG是一种开放标准的文本式矢量图形描述语言，他是基于XML、专门为网络而设计的图像格式，SVG图形可以是动态的、可交互性的，使用SVG可以在网页上显示出各种各样的高质量的矢量图形。SVG完全支持文档对象模型（Document Object Model，DOM)，其中，DOM是一种文档平台，它把文档看成是由一系列元素组成的节点树，允许程序或脚本动态的存储或上传文件的内容、结构或样式。

现有显示SVG图形的方法有以下两种：

第一种，基于QT的SVGlibrary进行显示，其中SVGlibrary是已封装完成的开发库，仅支持简单的SVG格式，难以支持自定义符号的显示，并且不支持DOM，难以对SVG进行编辑；

第二种，基于java的Batik工具包进行显示，Batik允许开发者自定义元素，但是Batik是非开源库，开发者能够作出的修改受到很大的限制。

以上两种显示方式均是采用现有已封装完成的SVG开发库（SVGlibrary、Batik）进行SVG图形显示功能的开发，受到开发库提供的方法以及接口的限制，难以满足显示性能以及个性化的需求。并且，以上两种显示方式在解析SVG文件后，生成SVG图形直接显示，在SVG文件中包含大量的SVG元素时（如上千个），显示效率明显下降。

发明内容

本发明提供一种可伸缩矢量图形SVG显示方法及装置，用以提高SVG显示效率。

本发明实施例提供的具体技术方案如下：

一种可伸缩矢量图形SVG显示方法，包括：

获取并解析可伸缩矢量图SVG文件，获得组成所述SVG文件的各SVG元素对象；

描绘各个所述SVG元素对象生成SVG原始图，并保存至内存；

从内存中获取所述SVG原始图并映射至用户显示区进行显示。

一种可伸缩矢量图形SVG显示装置，包括：

解析单元，用于获取并解析可伸缩矢量图SVG文件，获得组成所述SVG文件的各SVG元素对象；

原始图生成单元，用于描绘各个所述SVG元素对象生成SVG原始图，并保存至内存；

映射单元，用于从内存中获取所述SVG原始图并映射至用户显示区进行显示。

基于上述技术方案，本发明实施例中，获取并解析SVG文件得到组成该SVG文件的各SVG元素对象，通过描绘各个SVG元素对象生成SVG原始图后，将生成的SVG原始图保存至内存，从而在每次显示SVG原始图时可以从内存中获取该SVG原始图并映射至用户显示区进行显示，避免了现有的SVG显示方法每次进行显示时均需要进行解析SVG文件得到SVG原始对象，并需要描绘生成SVG原始图像，提高了显示效率。

附图说明

图1为本发明实施例中进行SVG显示的方法流程图；

图2为本发明第一具体实施例的显示SVG的详细方法流程图；

图3为本发明第二具体实施例中SVG缩放的详细方法流程图；

图4为本发明实施例中SVG缩放的示意图；

图5为本发明实施例中SVG显示装置结构示意图。

具体实施方式

为了解决现有的SVG显示方法显示效率低下的问题，本发明实施例提供了一种SVG显示方法，以提高SVG的显示效率。

下面结合附图对本发明优选的实施方式进行详细说明。

如附图1所示，本发明实施例中，进行SVG显示的具体方法流程如下：

步骤101：获取并解析SVG文件，获得组成该SVG文件的各SVG元素对象。

在一个优选地实施例中，基于wxSVG基础库加载SVG文件，读取并调用Expat开发库解析该SVG文件。具体地，通过加载wxSVG基础库的接口SVGLoadxml获取SVG文件，通过wxSVG调用Expat的可扩展标记语言（XML）解析库，解析SVG文件。

该优选的实施方式中，wxSVG基础库用于初始化SVG文件的运行环境，采用wxSVG基础库可以提高运行速度，实际应用中，也可以采用其它基础库实现该功能，本发明并不以此为限。

该优选的实施方式中，Expat开发库可以实现跨平台处理，实际应用中，也可以采用其它开发库实现解析SVG文件的功能，本发明并不以此为限。

更为优选地，采用流方式读取并调用Expat开发库解析该SVG文件，在SVG文件包含大量的SVG元素对象时，采用流方式可以在读取SVG文件的同时对已读取的部分进行解析，提高处理效率。

步骤102：描绘各个SVG元素对象生成SVG原始图，并保存至内存。

在一个具体实施例中，解析获得组成SVG文件的各SVG元素对象后，将获得的各SVG元素对象保存至内存中的SVG元素容器（即内存存储区块）中，再从该SVG元素容器中获取各SVG元素对象加载至图形库（例如图形工具包AGG（Anti-Grain Geometry）），基于该图形库描绘生成SVG原始图。

例如，通过加载DrawnSVGxml方法描绘各SVG元素对象生成SVG原始图，其中，DrawnSVGxml方法用于实现从SVG元素容器中获取SVG元素，针对每一个SVG元素，通过图形库AGG，描绘出SVG元素的原始图形，最终完整描绘出所有SVG元素原始图。

步骤103：从内存中获取SVG原始图并映射至用户显示区进行显示。

其中，从内存中获取SVG原始图并映射至用户显示区进行显示，具体有以下两种具体实现：

第一种具体实现为：从内存中读取SVG原始图，并获得该SVG原始图的尺寸以及用户显示区的尺寸，根据SVG原始图的尺寸以及用户显示区的尺寸确定缩放比例，按照该缩放比例对SVG原始图进行缩放后，映射至用户显示区。

第二种具体实现为：从内存中读取SVG原始图，并获取用户显示区的尺寸，根据默认的坐标点从SVG原始图中获取与用户显示区的尺寸相匹配的部分原始图，将获取的部分原始图映射至用户显示区。

针对以上两种具体实现，进一步地，在将缩放后的SVG原始图或部分原始图映射至用户显示区后，还可以进行以下具体操作：获取用户的动作指示，该动作指示中包括用于确定SVG原始图中待显示区域的坐标点以及缩放比例；根据该动作指示中携带的坐标点在SVG原始图中确定待显示区域，并按照动作指示中携带的缩放比例对待显示区域进行缩放后，映射至用户显示区进行显示。

具体地，用户的动作指示可以是用户在对用户显示区进行范围划定、上移、下移、左移、右移、放大、缩小等动作中的一种或一种以上的组合后生成。

其中，用户的动作指示中携带的缩放比例为当前用户显示区中显示的图形相对于SVG原始图的缩放比例与用户动作指示的缩放比例的乘积。针对第二种具体实现，首次在用户显示区进行显示时，当前用户显示区中显示的图形相对于SVG原始图的缩放比例为1。

其中，用户的动作指示中携带的用于确定SVG原始图中待显示区域的坐标点可以是用于确定SVG原始图中待显示区域的中心点坐标，也可以是用于确定SVG原始图中待显示区域的边界点坐标。

例如，用于确定SVG原始图中待显示区域的边界点坐标为区域的左上顶点的坐标。

具体地，用户的动作指示中携带的坐标点为：用户对用户显示区进行的上移、下移、左移、右移等操作的时移动的距离，按照用户显示区中显示的图形相对于SVG原始图的缩放比例进行转换后，将转换后的距离与用于确定当前用户显示区的图形的、SVG原始图中的坐标值进行叠加后得到。

例如，用户显示区中显示的图形为对SVG原始图缩小一倍后的图形，用户的动作为放大两倍，指示的待显示区域的中心点为用户显示区的中心点，则与该用户的动作相应的动作指示中携带的待显示区域的中心点坐标为SVG原始图的中心点坐标，动作指示中的携带的缩放比例为1，则待显示区域为SVG原始图中以SVG原始图的中心点、与用户显示区相匹配的区域。

以下通过两个具体实施例对本发明实施例提供的方法进行详细说明。

第一具体实施例，如附图2所示，加载SVG文件生成SVG原始图并显示的具体过程如下：

步骤201：启动wxSVG基础库初始化SVG文件的运行环境；

步骤202：采用wxSVG基础库调用Expat开发库，使用Expat开发库的XML解析库；

步骤203：采用流方式读取SVG文件，并解析获得各SVG元素对象存储至内存中的SVG元素容器，若解析过程出现错误，则转至步骤208，若解析过程正常，则继续执行后续步骤；

步骤204：从SVG元素容器中读取各SVG原始对象加载到AGG图形库；

步骤205：加载DrawnSVGxml描绘各SVG元素对象至内存显示区；

步骤206：在内存显示区中生成SVG原始图；

步骤207：将内存显示区中的SVG原始图映射至用户显示区进行显示；

步骤208：结束本次SVG显示过程。

第二具体实施例中，如附图3和附图4所示，在步骤207之后，根据用户的动作指示，需要对当前显示的SVG全部或部分进行缩放显示的详细流程如下：

步骤301：根据用户的动作确定用户显示区中待缩放的SVG区域；

步骤302：确定用户显示区中待缩放的SVG区域的大小以及计算获得用户显示区中待缩放的SVG区域在SVG原始图中的定位点的坐标；

具体计算方法可以是：根据用户显示区域当前显示的SVG的坐标原点（x0，y0）在SVG原始图中的坐标值（x1，y1）、当前显示的SVG相对于SVG原始图的缩放比例（横坐标缩放比例a、纵坐标缩放比例b）、以及待缩放的SVG区域的定位点在用户显示区域当前显示的SVG中的坐标值（x2，y2）确定，即{（x2-x0）/2，（y2-y0）/2}为待缩放的SVG区域在SVG原始图中的定位点的坐标。

实际应用中，待缩放的SVG的定位点可以是一个或多个，如附图4中所示，待缩放的SVG区域的定位点为两个，附图4中SVG原始图中的定位点A和定位点B确定的区域，即为用户显示区中的待缩放的SVG区域相应的SVG原始区域。

步骤303：根据动作指示的缩放比例以及用户显示区中当前显示的图像相对于SVG原始图的缩放比例，确定待缩放的SVG区域相对于SVG原始图的缩放比例，确定需要对SVG原始图进行放大时，执行步骤304，否则，确定需要对SVG原始图进行缩小时，执行步骤305；

步骤304：确定内存中的SVG原始图中与用户显示区中待缩放的SVG区域相应的SVG原始区域，按照确定的、待缩放的SVG区域相对于SVG原始图的缩放比例对该SVG原始区域进行放大并显示；

步骤305：确定内存中的SVG原始图中与用户显示区中待缩放的SVG区域相应的SVG原始区域，按照确定的、待缩放的SVG区域相对于SVG原始图的缩放比例对该SVG原始区域进行缩小并显示；

步骤306：刷新用户显示区，以显示缩放处理后的SVG。

基于相同的原理，本发明还提供了一种SVG显示装置，其具体实施可参见上述方法部分的描述，重复之处不再赘述，如附图5所示，该装置主要包括以下处理单元;

解析单元501，用于获取并解析SVG文件，获得组成该SVG文件的各SVG元素对象；

原始图生成单元502，用于描绘各个SVG元素对象生成SVG原始图，并保存至内存；

映射单元503，用于从内存中获取该SVG原始图并映射至用户显示区进行显示。

在一个具体实施例中，映射单元具体用于：

从内存中读取SVG原始图，并获得该SVG原始图的尺寸以及用户显示区的尺寸；

根据SVG原始图的尺寸以及用户显示区的尺寸确定缩放比例，按照该缩放比例对SVG原始图进行缩放后，映射至用户显示区。

在另一个具体实施例中，映射单元具体用于：

从内存中读取SVG原始图，并获取用户显示区的尺寸；

根据默认的坐标点从SVG原始图中获取与用户显示区的尺寸相匹配的部分原始图，将获取的部分原始图映射至用户显示区。

针对以上两个具体实施例，映射单元还用于：

获取用户的动作指示，该动作指示中包括用于确定SVG原始图中待显示区域的坐标点以及缩放比例；

根据该动作指示中携带的坐标点在SVG原始图中确定待显示区域，并按照动作指示中携带的缩放比例对该待显示区域进行缩放后，映射至用户显示区进行显示。

在一个优选的实施例中，解析单元具体用于：

基于wxSVG基础库获取SVG文件；调用Expat开发库解析该SVG文件。

基于上述技术方案，本发明实施例中，获取并解析SVG文件得到组成该SVG文件的各SVG元素对象，通过描绘各个SVG元素对象生成SVG原始图后，将生成的SVG原始图保存至内存，从而在每次显示SVG原始图时可以从内存中获取该SVG原始图并映射至用户显示区进行显示，避免了现有的SVG显示方法每次进行显示时均需要进行解析SVG文件得到SVG原始对象，并需要描绘生成SVG原始图像，提高了显示效率。

显然，本领域的技术人员可以对本发明进行各种改动和变型而不脱离本发明的精神和范围。这样，倘若本发明的这些修改和变型属于本发明权利要求及其等同技术的范围之内，则本发明也意图包含这些改动和变型在内。

Claims (10)

1.一种可伸缩矢量图形SVG显示方法，其特征在于，包括：

获取并解析可伸缩矢量图SVG文件，获得组成所述SVG文件的各SVG元素对象；

描绘各个所述SVG元素对象生成SVG原始图，并保存至内存；

从内存中获取所述SVG原始图并映射至用户显示区进行显示。

2.如权利要求1所述的方法，其特征在于，从内存中获取所述SVG原始图并映射至用户显示区进行显示，具体包括：

从内存中读取所述SVG原始图，并获得所述SVG原始图的尺寸以及用户显示区的尺寸；

根据所述SVG原始图的尺寸以及所述用户显示区的尺寸确定缩放比例，按照所述缩放比例对所述SVG原始图进行缩放后，映射至所述用户显示区。

3.如权利要求1所述的方法，其特征在于，从内存中获取所述SVG原始图并映射至用户显示区进行显示，具体包括：

从内存中读取所述SVG原始图，并获取用户显示区的尺寸；

根据默认的坐标点从所述SVG原始图中获取与所述用户显示区的尺寸相匹配的部分原始图，将获取的部分原始图映射至所述用户显示区。

4.如权利要求2或3所述的方法，其特征在于，从内存中获取所述SVG原始图并映射至用户显示区进行显示，还包括：

获取用户的动作指示，所述动作指示中包括用于确定所述SVG原始图中待显示区域的坐标点以及缩放比例；

根据所述动作指示中携带的坐标点以及缩放比例在所述SVG原始图中确定待显示区域，并按照所述动作指示中携带的缩放比例对所述待显示区域进行缩放后，映射至所述用户显示区进行显示。

5.如权利要求1所述的方法，其特征在于，获取并解析可伸缩矢量图SVG文件，包括：

基于wxSVG基础库获取所述SVG文件；

调用Expat开发库解析所述SVG文件。

6.一种可伸缩矢量图形SVG显示装置，其特征在于，包括：

解析单元，用于获取并解析可伸缩矢量图SVG文件，获得组成所述SVG文件的各SVG元素对象；

原始图生成单元，用于描绘各个所述SVG元素对象生成SVG原始图，并保存至内存；

映射单元，用于从内存中获取所述SVG原始图并映射至用户显示区进行显示。

7.如权利要求6所述的装置，其特征在于，所述映射单元具体用于：

从内存中读取所述SVG原始图，并获得所述SVG原始图的尺寸以及用户显示区的尺寸；

根据所述SVG原始图的尺寸以及所述用户显示区的尺寸确定缩放比例，按照所述缩放比例对所述SVG原始图进行缩放后，映射至所述用户显示区。

8.如权利要求6所述的装置，其特征在于，所述映射单元具体用于：

从内存中读取所述SVG原始图，并获取用户显示区的尺寸；

根据默认的坐标点从所述SVG原始图中获取与所述用户显示区的尺寸相匹配的部分原始图，将获取的部分原始图映射至所述用户显示区。

9.如权利要求7或8所述的装置，其特征在于，所述映射单元还用于：

获取用户的动作指示，所述动作指示中包括用于确定所述SVG原始图中待显示区域的坐标点以及缩放比例；

根据所述动作指示中携带的坐标点在所述SVG原始图中确定待显示区域，并按照所述动作指示中携带的缩放比例对所述待显示区域进行缩放后，映射至所述用户显示区进行显示。

10.如权利要求6所述的装置，其特征在于，所述解析单元具体用于：

基于wxSVG基础库获取所述SVG文件；

调用Expat开发库解析所述SVG文件。