CN111737618A - 用于Web端的矢量图显示方法、装置和计算机设备 - Google Patents

Abstract

本发明提供了一种用于Web端的矢量图显示方法、装置和计算机设备。该显示方法包括：获取待显示矢量图的图元集合，其中，所述矢量图包括若干所述图元集合，所述图元集合包括若干图元，所述图元集合中的各个图元可采用相同的WebGL绘制命令进行绘制；确定所述图元集合所对应的WebGL绘制命令；以及调用所述WebGL绘制命令绘制所述图元集合中的各个图元通过本发明，能够实现Web端的矢量图的快速显示。

Description

用于Web端的矢量图显示方法、装置和计算机设备

技术领域

本发明涉及矢量图处理技术领域，尤其涉及一种用于Web端的矢量图显示方法、装置和计算机设备。

背景技术

矢量图是一种可以矢量缩放和交互的图纸格式，相对于图片格式或PDF格式，矢量图纸能够被无极缩放，这使得用户可以精确地查看图纸的每一个细节。行业内最著名的矢量图纸软件是欧特克公司的AutoCAD产品，其文件格式是DWG，该软件是一款图形设计软件，可以让用户自由地新建和编辑各种基本图元。AutoCAD软件同样提供显示功能，将设计好的图元显示在软件图形界面中。但是由于AutoCAD软件开发的时间很早，没有考虑到对于大模型的显示优化，某些大数据量的图纸在AutoCAD打开和交互性能很差。对于用户来说，直观的感受是大数据量的模型的打开和使用不流畅。

为了解决大模型的显示效率(包括基于打开操作以及缩放、平移和旋转等交互操作时的显示)问题，特别是基于网页版的大模型的显示效率问题，发明人对现有的网页渲染技术进行了如下的研究：在现有技术中，网页渲染图形主流的技术有Canvas、WebGL、Three.js等技术。在效率方面，Canvas由于渲染方法与硬件平台相关，以及其渲染API对底层渲染接口进行了层层封装，使得其显示效率比较一般，因而，发明人对基于WebGL和Three.js的显示技术进一步的研究。WebGL和Three.js通常会直接使用GPU进行渲染，对于利用GPU进行渲染的方法，在渲染每个图元时均需要调用绘制命令，而每次调用绘制命令均会有较大的开销，因为其不仅调用最终的绘制行为，还需要有很多的前期准备工作，例如准备数据、传送数据以及设置显示状态等工作，因此，调用绘制命令所导致的资源开销，成为进一步提升基于网页版的大模型渲染效率的障碍。

综上所述，如何进一步提升矢量图，特别是大模型的矢量图的渲染效率，成为本领域亟需解决的技术问题。

发明内容

本发明的目的是提供一种用于Web端的矢量图显示方法、装置、计算机设备和可读存储介质，用于解决现有技术中的Web端的矢量图的渲染效率低的技术问题。

一方面，为实现上述目的，本发明提供了一种用于Web端的矢量图显示方法。

该用于Web端的矢量图显示方法包括：获取待显示矢量图的图元集合，其中，所述矢量图包括若干所述图元集合，所述图元集合包括若干图元，所述图元集合中的各个图元可采用相同的WebGL绘制命令进行绘制；确定所述图元集合所对应的WebGL绘制命令；以及调用所述WebGL绘制命令绘制所述图元集合中的各个图元。

进一步地，所述图元集合中的图元位于同一图层、具有相同的颜色且属于同一类型。

进一步地，所述图元集合包括图元数据和属性数据，其中，所述属性数据包括所述图元集合中图元所处的图层和所述图元的颜色与类型；确定所述图元集合所对应的所述WebGL绘制命令的步骤包括：解析所述属性数据，根据解析得到的所述图元的颜色与类型确定所述WebGL绘制命令；调用所述WebGL绘制命令绘制所述图元集合中的各个图元的步骤具体为：调用所述WebGL绘制命令，将所述图元数据绘制在解析得到的所述图元所处的图层。

进一步地，所述图元集合包括图元数据，所述图元集合的名称包括所述图元集合的标识和所述图元集合中图元所处的图层；确定所述图元集合所对应的WebGL绘制命令的步骤包括：获取预存的标识与WebGL绘制命令的对应关系表，解析所述图元集合的名称，在所述对应关系表中，根据解析得到的所述图元集合的标识查找对应的WebGL绘制命令；调用所述WebGL绘制命令绘制所述图元集合中的各个图元的步骤具体为：调用所述WebGL绘制命令，将所述图元数据绘制在解析得到的所述图元所处的图层。

进一步地，所述用于Web端的矢量图显示方法还包括：接收图层隐藏命令，确定所述图层隐藏命令所指示的待隐藏图层，判断所述图元集合中的图元是否位于所述待隐藏图层；调用所述WebGL绘制命令绘制所述图元集合中的各个图元的步骤具体为：当所述图元集合中的图元处于的图层与所述待隐藏图层不同时，调用所述WebGL绘制命令绘制所述图元集合中的各个图元。

进一步地，获取待显示矢量图的图元集合的步骤包括：向云端发送矢量图请求，其中，所述云端在接收到所述请求后返回所述矢量图对应的图元数据包的存储地址，其中，所述矢量图对应多个图元数据包，所述图元数据包包括若干所述图元集合；根据所述存储地址下载所述图元数据包；从所述图元数据包中解析所述图元集合。

进一步地，从所述图元数据包中解析所述图元集合的步骤包括：读取预存的所述矢量图对应的数据配置文件，其中，所述数据配置文件包括图元集合对应的数据包标识、数据起始位置和数据大小；确定所述数据包标识所指示的所述图元数据包，得到目标图元数据包；从所述目标图元数据包中所述数据起始位置处开始，读取所述数据大小的数据，得到所述图元集合。

另一方面，为实现上述目的，本发明提供了一种用于Web端的矢量图显示装置。

该用于Web端的矢量图显示装置包括：获取模块，用于获取待显示矢量图的图元集合，其中，所述矢量图包括若干所述图元集合，所述图元集合包括若干图元，所述图元集合中的各个图元可采用相同的WebGL绘制命令进行绘制；确定模块，用于确定所述图元集合所对应的WebGL绘制命令；以及绘制模块，用于调用所述WebGL绘制命令绘制所述图元集合中的各个图元。

为实现上述目的，本发明还提供一种计算机设备，包括存储器、处理器以及存储在存储器上并可在处理器上运行的计算机程序，该处理器执行计算机程序时实现上述方法的步骤。

为实现上述目的，本发明还提供计算机可读存储介质，其上存储有计算机程序，该计算机程序被处理器执行时实现上述方法的步骤。

本发明提供的用于Web端的矢量图显示方法、装置、计算机设备和可读存储介质，待显示的矢量图包括若干图元集合，图元集合中的图元可采用相同的WebGL绘制命令进行绘制，在Web端显示该矢量图时，首先获取矢量图的图元集合，然后确定每个图元集合所对应的WebGL绘制命令，针对一个图元集合，通过确定的其对应的WebGL绘制命令绘制其中的各个图元，将矢量图的各个图元集合中的图元均通过确定的WebGL绘制命令绘制，实现矢量图在Web端的显示。根据本发明提供的显示方法、装置、计算机设备和可读存储介质，对于Web端的矢量图的显示，使被合并至同一图元集合的图元，在绘制时仅使用一次绘制调用，这对于矢量图的原始文件中有大量图元的矢量图模型来说，在显示时能大幅减少绘制调用，从而提升显示效率。

附图说明

通过阅读下文优选实施方式的详细描述，各种其他的优点和益处对于本领域普通技术人员将变得清楚明了。附图仅用于示出优选实施方式的目的，而并不认为是对本发明的限制。而且在整个附图中，用相同的参考符号表示相同的部件。在附图中：

图1为本发明实施例一提供的用于Web端的矢量图显示方法的流程图；

图2为本发明实施例二提供的用于Web端的矢量图显示装置的框图；

图3为本发明实施例三提供的计算机设备的硬件结构图。

具体实施方式

为了使本发明的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本发明进行进一步详细说明。应当理解，此处所描述的具体实施例仅用以解释本发明，并不用于限定本发明。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

为了提升Web端矢量图的渲染效率，特别是大模型矢量图的渲染效率，本发明提供了一种用于Web端的矢量图显示方法、装置、计算机设备和可读存储介质，在本发明提供的用于Web端的矢量图显示方法中，对于Web端待显示的矢量图，将其包括的图元按照显示时采用的WebGL绘制命令进行合并，也就是说，将可采用相同的WebGL绘制命令进行绘制的图元合并为图元集合，从而矢量图包括若干图元集合，图元集合包括若干图元，基于此，在Web端进行矢量图的显示时，首先获取待显示矢量图的图元集合，针对一个图元集合，确定该图元集合所对应的WebGL绘制命令，进而调用该WebGL绘制命令，通过该WebGL绘制命令绘制图元集合中的各个图元，完成矢量图所包括的图元集合的绘制，便完成矢量图的渲染。从中可以看出，在Web端进行矢量图的显示时，针对一个图元集合只需要调用一次WebGL绘制命令，也就是说，针对图元集合所包括的图元，只需调用一次WebGL绘制命令，与现有技术中绘制每个图元时均需要调用一次WebGL绘制命令相比，减少了绘制调用所需的资源开销，特别是针对具有大量图元的较大模型而言，在显示时能够大幅减少绘制调用，从而显著提升渲染效率。

关于本发明提供的用于Web端的矢量图显示方法、装置、计算机设备和可读存储介质的具体实施例，将在下文中详细描述。

实施例一

本发明实施例提供了一种用于Web端的矢量图显示方法，可选地，该用于Web端的矢量图显示方法应用于网页端，基于WebGL的技术渲染矢量图，利用GPU进行渲染，具体是通过调用WebGL绘制命令中的OpenGL的绘制命令进行绘制，通过该方法，能够减少绘制命令的调用次数，提升显示效率，当该显示方法响应于用户的浏览操作时，网页端能够快速打开用户选择的模型，当该显示方法响应于用户的交互操作时，例如对模型的方法、缩小和平移等操作，网页端能够实现无极的大小和位置变化，提升用户体验，具体地，图1为本发明实施例一提供的用于Web端的矢量图显示方法的流程图，如图1所示，该实施例提供的用于Web端的矢量图显示方法包括如下的步骤S101至步骤S103。

步骤S101：获取待显示矢量图的图元集合。

其中，矢量图包括若干图元集合，图元集合包括若干图元，图元集合中的各个图元可采用相同的绘制命令进行绘制。

具体而言，矢量图包括多个图元，图元具有多种属性，例如图元所处的图层、图元显示的颜色、图元所属的类型以及图元的材质等，其中，如果将能够影响绘制图元时所采用的绘制命令的属性称作绘制命令决定属性，当不同的图元具有相同的绘制命令决定属性时，这部分图元即可采用相同的绘制命令进行绘制。基于此，本发明提出图元集合的概念，该图元集合中的各个图元可采用相同的绘制命令进行绘制，那么，对矢量图所包括的图元进行合并，具体是将具有相同绘制命令决定属性的图元合并在一个或多个图元集合后，矢量图包括若干图元集合，在该步骤S101中，获取待显示矢量图的图元集合，即可获取到待显示矢量图的图元。

可选地，上述绘制命令决定属性包括图元所处的图层、图元显示的颜色、图元所属的类型，其中，图元所属的类型具体为点图元类型、线图元类型或网络图元类型。也即，图元集合中的图元位于同一图层、具有相同的颜色且属于同一类型。

步骤S102：确定图元集合所对应的WebGL绘制命令。

针对获取到的图元集合，通过该步骤S102，确定绘制其中图元时需要调用的WebGL绘制命令。

可选地，可以针对每个图元集合配置其所适合的WebGL绘制命令，则在该步骤S102中，根据该配置即可确定图元集合所对应的WebGL绘制命令；或者，也可根据图元集合的WebGL绘制命令决定属性来确定图元集合所对应的WebGL绘制命令。

步骤S103：调用WebGL绘制命令绘制图元集合中的各个图元。

针对一个图元集合，确定其所对应的WebGL绘制命令后，通过该步骤S103，调用此WebGL绘制命令，对图元集合中的各个图元进行绘制，通过调用一次WebGL绘制命令，实现图元集合中所有图元的绘制。将待显示矢量图所对应的图元集合绘制完成后，也即实现了矢量图的显示。

例如，某矢量图具有位于同一图层、具有相同颜色的8根线段图元，按照传统的绘制方式需要调用8次WebGL绘制命令，而通过该实施例提供的用于Web端的矢量图显示方法，将上述8根线段图元合并为一个图元集合，调用一次WebGL绘制命令即可绘制8根线段。

在该实施例提供的用于Web端的矢量图显示方法中，待显示的矢量图包括若干图元集合，图元集合中的图元可采用相同的WebGL绘制命令进行绘制，在显示该矢量图时，首先获取矢量图的图元集合，然后确定每个图元集合所对应的WebGL绘制命令，针对一个图元集合，通过确定的其对应的WebGL绘制命令绘制其中的各个图元，将矢量图的各个图元集合中的图元均通过确定的WebGL绘制命令绘制，实现矢量图的显示。从中可以看出，被合并至同一图元集合的图元，在绘制时将仅使用一次绘制调用，这对于矢量图的原始文件中有大量图元的矢量图模型来说，在显示时能大幅减少绘制调用，从而提升显示效率。

可选地，在一种实施例中，图元集合包括图元数据和属性数据，其中，属性数据包括图元集合中图元所处的图层和图元的颜色与类型；确定图元集合所对应的WebGL绘制命令的步骤包括：解析属性数据，根据解析得到的图元的颜色与类型确定WebGL绘制命令；调用WebGL绘制命令绘制图元集合中的各个图元的步骤具体为：调用WebGL绘制命令，将图元数据绘制在解析得到的图元所处的图层。

具体而言，图元数据是指图元的索引数据以及几何数据等图元显示的原始数据，属性数据也即上述WebGL绘制命令决定属性。在确定图元集合所对应的WebGL绘制命令时，解析图元集合中的属性数据，即可解析到图元集合中图元所处的图层和图元的颜色与类型，而图元的颜色和/或类型不同时，绘制时所调用的WebGL绘制命令不同，因而，能够根据解析得到的图元的颜色与类型确定出WebGL绘制命令。同时，处于同一图层且颜色与类型分别相同的图元，可通过调用一次WebGL绘制命令进行绘制，因此，通过WebGL绘制命令绘制图元集合中的各个图元时，利用确定出的WebGL绘制命令，将图元数据绘制在解析得到的图层，实现图元集合中所有图元的一次绘制。

可选地，在一种实施例中，图元集合包括图元数据，图元集合的名称包括图元集合的标识和图元集合中图元所处的图层；确定图元集合所对应的WebGL绘制命令的步骤包括：获取预存的标识与WebGL绘制命令的对应关系表，解析图元集合的名称，在对应关系表中，根据解析得到的图元集合的标识查找对应的WebGL绘制命令；调用WebGL绘制命令绘制图元集合中的各个图元的步骤具体为：调用WebGL绘制命令，将图元数据绘制在解析得到的图元所处的图层。

具体而言，在对图元集合进行命名时，依据标识和图元所处的图层进行命名，也就是说，通过图元集合的名称，能够确定出图元集合的标识和图元集合中图元所处的图层，同时，预置标识与WebGL绘制命令的对应关系表，在已知图元集合的标识的前提下，均可通过该对应关系表查询到图元集合所对应的WebGL绘制命令。在确定图元集合所对应的WebGL绘制命令时，获取该对应关系表，并且解析图元集合的名称，能够解析到图元集合的标识和图元集合中图元所处的图层，进而以解析得到的图元集合的标识为查询条件，在对应关系表中即可查询到图元集合对应的WebGL绘制命令；在通过WebGL绘制命令绘制图元集合中的各个图元时，利用查询到的WebGL绘制命令，将图元数据绘制在解析得到的图层，实现图元集合中所有图元的一次绘制。

可选地，在一种实施例中，用于Web端的矢量图显示方法还包括：接收图层隐藏命令，确定图层隐藏命令所指示的待隐藏图层，判断图元集合中的图元是否位于待隐藏图层；调用WebGL绘制命令绘制图元集合中的各个图元的步骤具体为：当图元集合中的图元处于的图层与待隐藏图层不同时，调用WebGL绘制命令绘制图元集合中的各个图元。

具体而言，在交互过程中，用户基于观看需求会选中模型的某一个或几个图层，进行隐藏操作，当用户选中图层要隐藏时，网页端接收到图层隐藏命令，图层隐藏命令指示哪些图层需要隐层，因此，通过图层隐藏命令可确定待隐藏图层，在通过WebGL绘制命令绘制图元集合中的各个图元之前，先判断图元集合中的图元是否位于待隐藏图层，例如，通过解析图元集合的属性数据得到图元集合中的图元所处的图层，再判断解析得到的图层与待隐藏图层是否一致；又如，通过解析图元集合的名称得到图元集合中的图元所处的图层，再判断解析得到的图层与待隐藏图层是否一致。当图元集合中的图元位于待隐藏图层，则无需再对图元集合中的图元进行绘制，仅当图元集合中的图元处于的图层与待隐藏图层不同时，通过WebGL绘制命令绘制图元集合中的各个图元。因此，在实现图元集合中图元侧一次绘制的同时，能够方便地实现图层的隐藏，而无需遍历每个图元的图层。

可选地，在一种实施例中，获取待显示矢量图的图元集合的步骤包括：向云端发送矢量图请求，其中，云端在接收到请求后返回矢量图对应的图元数据包的存储地址，其中，矢量图对应多个图元数据包，图元数据包包括若干图元集合；根据存储地址下载图元数据包；从图元数据包中解析图元集合。

具体而言，在云场景下，云端存储系统在存储矢量图时，以图元数据包的形式存储，每个矢量图对应包括多个图元数据包，一个图元数据包包括一个或多个图元集合，可选地，可限制图元数据包的大小在预设大小范围内，以避免图元数据包过大而影响传输速度。云端存储有矢量图的标识信息和矢量图对应的图元数据包的存储地址，该存储地址为图元数据包在存储系统中的地址。当Web端需要显示矢量图时，可根据该矢量图的标识信息向云端发送矢量图请求，云端接收到请求后，根据标识信息确定矢量图对应的图元数据包的存储地址，将该存储地址返回至Web端，然后由Web端向存储地址下载图元数据包，然后从图元数据包中解析出图元集合，进而再确定图元集合所对应的WebGL绘制命令并进行绘制。从中可以看出，通过图元数据包的形式，能够在请求图元数据时，使用异步的方式较为流畅的下载。

可选地，在一种实施例中，从图元数据包中解析图元集合的步骤包括：读取预存的矢量图对应的数据配置文件，其中，数据配置文件包括图元集合对应的数据包标识、数据起始位置和数据大小；确定数据包标识所指示的图元数据包，得到目标图元数据包；从目标图元数据包中数据起始位置处开始，读取数据大小的数据，得到图元集合。

具体而言，预配置矢量图对应的数据配置文件，在该数据配置文件中，设置图元集合对应的数据包标识，也即图元集合所处的图元数据包的标识；设置数据起始位置，也即图元集合在其所处的图元数据包中的起始位置；设置数据大小，也即图元集合在图元数据包中占用的大小，将该数据配置文件预存。在进行矢量图显示的数据准备阶段，从下载到的图元数据包中解析图元集合时，读取上述数据配置文件，得到矢量图的各个图元集合对应的数据包标识、数据起始位置和数据大小。对于一个图元集合，数据包标识所指示的图元数据包即为该图元集合所在的图元数据包，该处定义为目标图元数据包，确定目标图元数据包后，从目标图元数据包中数据起始位置所指示的位置开始，读取数据大小所指示的数据，所读的数据即为图元集合。可选地，在Web端，首先请求图元数据包，并从图元数据包中解析出图元集合，再最终借由WebGL渲染技术对图元进行渲染，实现矢量图在Web的渲染。

实施例二

对应于上述实施例一，本发明实施例二提供了一种用于Web端的矢量图显示装置，相关技术特征和对应的技术效果可参考上述实施例一，该处不再详述。其中，图2为本发明实施例二提供的用于Web端的矢量图显示装置的框图，如图2所示，该装置包括获取模块201、第一确定模块202和绘制模块203：

获取模块201用于获取待显示矢量图的图元集合，其中，矢量图包括若干图元集合，图元集合包括若干图元，图元集合中的各个图元可采用相同的WebGL绘制命令进行绘制；第一确定模块202用于确定图元集合所对应的WebGL绘制命令；以及绘制模块203用于调用WebGL绘制命令绘制图元集合中的各个图元。

可选地，在一种实施例中，图元集合中的图元位于同一图层、具有相同的颜色且属于同一类型。

可选地，在一种实施例中，图元集合包括图元数据和属性数据，其中，属性数据包括图元集合中图元所处的图层和图元的颜色与类型；第一确定模块202包括第一解析单元和确定单元，其中，第一解析单元用于解析属性数据，确定单元用于根据解析得到的图元的颜色与类型确定WebGL绘制命令；绘制模块203还用于调用WebGL绘制命令，将图元数据绘制在解析得到的图元所处的图层。

可选地，在一种实施例中，图元集合包括图元数据，图元集合的名称包括图元集合的标识和图元集合中图元所处的图层；第一确定模块202包括获取单元、第二解析单元和查找单元，其中，获取单元用于获取预存的标识与WebGL绘制命令的对应关系表，第二解析单元应用于解析图元集合的名称，查找单元用于在对应关系表中，根据解析得到的图元集合的标识查找对应的WebGL绘制命令；绘制模块203还用于调用WebGL绘制命令，将图元数据绘制在解析得到的图元所处的图层。

可选地，在一种实施例中，用于Web端的矢量图显示装置还包括：接收模块、第二确定模块和判断模块，其中，接收模块用于接收图层隐藏命令，第二确定模块用于确定图层隐藏命令所指示的待隐藏图层，判断模块用于判断图元集合中的图元是否位于待隐藏图层；绘制模块203还用于当图元集合中的图元处于的图层与待隐藏图层不同时，调用WebGL绘制命令绘制图元集合中的各个图元。

可选地，在一种实施例中，获取模块201包括：发送单元、下载单元和第三解析单元，其中，发送单元用于向云端发送矢量图请求，其中，云端在接收到请求后返回矢量图对应的图元数据包的存储地址，其中，矢量图对应多个图元数据包，图元数据包包括若干图元集合；下载单元用于根据存储地址下载图元数据包；解析单元用于从图元数据包中解析图元集合。

可选地，在一种实施例中，解析单元从图元数据包中解析图元集合时，具体执行的步骤包括：读取预存的矢量图对应的数据配置文件，其中，数据配置文件包括图元集合对应的数据包标识、数据起始位置和数据大小；确定数据包标识所指示的图元数据包，得到目标图元数据包；从目标图元数据包中数据起始位置处开始，读取数据大小的数据，得到图元集合。

实施例三

本实施例还提供一种计算机设备，如可以执行程序的智能手机、平板电脑、笔记本电脑、台式计算机、机架式服务器、刀片式服务器、塔式服务器或机柜式服务器(包括独立的服务器，或者多个服务器所组成的服务器集群)等。如图3所示，本实施例的计算机设备01至少包括但不限于：可通过系统总线相互通信连接的存储器011、处理器012，如图3所示。需要指出的是，图3仅示出了具有组件存储器011和处理器012的计算机设备01，但是应理解的是，并不要求实施所有示出的组件，可以替代的实施更多或者更少的组件。

本实施例中，存储器011(即可读存储介质)包括闪存、硬盘、多媒体卡、卡型存储器(例如，SD或DX存储器等)、随机访问存储器(RAM)、静态随机访问存储器(SRAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、可编程只读存储器(PROM)、磁性存储器、磁盘、光盘等。在一些实施例中，存储器011可以是计算机设备01的内部存储单元，例如该计算机设备01的硬盘或内存。在另一些实施例中，存储器011也可以是计算机设备01的外部存储设备，例如该计算机设备01上配备的插接式硬盘，智能存储卡(Smart Media Card,SMC)，安全数字(Secure Digital,SD)卡，闪存卡(FlashCard)等。当然，存储器011还可以既包括计算机设备01的内部存储单元也包括其外部存储设备。本实施例中，存储器011通常用于存储安装于计算机设备01的操作系统和各类应用软件，例如实施例二的矢量图的显示装置的程序代码等。此外，存储器011还可以用于暂时地存储已经输出或者将要输出的各类数据。

处理器012在一些实施例中可以是中央处理器(Central Processing Unit，CPU)、控制器、微控制器、微处理器、或其他数据处理芯片。该处理器012通常用于控制计算机设备01的总体操作。本实施例中，处理器012用于运行存储器011中存储的程序代码或者处理数据，例如用于Web端的矢量图显示方法等。

实施例四

本实施例还提供一种计算机可读存储介质，如闪存、硬盘、多媒体卡、卡型存储器(例如，SD或DX存储器等)、随机访问存储器(RAM)、静态随机访问存储器(SRAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、可编程只读存储器(PROM)、磁性存储器、磁盘、光盘、服务器、App应用商城等等，其上存储有计算机程序，程序被处理器执行时实现相应功能。本实施例的计算机可读存储介质用于存储矢量图的显示装置，被处理器执行时实现实施例一的用于Web端的矢量图显示方法。

需要说明的是，在本文中，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者装置不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者装置所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括该要素的过程、方法、物品或者装置中还存在另外的相同要素。

上述本发明实施例序号仅仅为了描述，不代表实施例的优劣。

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到上述实施例方法可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。

以上仅为本发明的优选实施例，并非因此限制本发明的专利范围，凡是利用本发明说明书及附图内容所作的等效结构或等效流程变换，或直接或间接运用在其他相关的技术领域，均同理包括在本发明的专利保护范围内。

Claims (10)

1.一种用于Web端的矢量图显示方法，其特征在于，包括：

获取待显示矢量图的图元集合，其中，所述矢量图包括若干所述图元集合，所述图元集合包括若干图元，所述图元集合中的各个图元可采用相同的WebGL绘制命令进行绘制；

确定所述图元集合所对应的WebGL绘制命令；以及

调用所述WebGL绘制命令绘制所述图元集合中的各个图元。

2.根据权利要求1所述的用于Web端的矢量图显示方法，其特征在于，所述图元集合中的图元位于同一图层、具有相同的颜色且属于同一类型。

3.根据权利要求2所述的用于Web端的矢量图显示方法，其特征在于，

所述图元集合包括图元数据和属性数据，其中，所述属性数据包括所述图元集合中图元所处的图层和所述图元的颜色与类型；

确定所述图元集合所对应的所述WebGL绘制命令的步骤包括：解析所述属性数据，根据解析得到的所述图元的颜色与类型确定所述WebGL绘制命令；

调用所述WebGL绘制命令绘制所述图元集合中的各个图元的步骤具体为：调用所述WebGL绘制命令，将所述图元数据绘制在解析得到的所述图元所处的图层。

4.根据权利要求2所述的用于Web端的矢量图显示方法，其特征在于，

所述图元集合包括图元数据，所述图元集合的名称包括所述图元集合的标识和所述图元集合中图元所处的图层；

确定所述图元集合所对应的WebGL绘制命令的步骤包括：获取预存的标识与WebGL绘制命令的对应关系表，解析所述图元集合的名称，在所述对应关系表中，根据解析得到的所述图元集合的标识查找对应的WebGL绘制命令；

调用所述WebGL绘制命令绘制所述图元集合中的各个图元的步骤具体为：调用所述WebGL绘制命令，将所述图元数据绘制在解析得到的所述图元所处的图层。

5.根据权利要求2所述的用于Web端的矢量图显示方法，其特征在于，

所述用于Web端的矢量图显示方法还包括：接收图层隐藏命令，确定所述图层隐藏命令所指示的待隐藏图层，判断所述图元集合中的图元是否位于所述待隐藏图层；

调用所述WebGL绘制命令绘制所述图元集合中的各个图元的步骤具体为：当所述图元集合中的图元处于的图层与所述待隐藏图层不同时，调用所述WebGL绘制命令绘制所述图元集合中的各个图元。

6.根据权利要求1所述的用于Web端的矢量图显示方法，其特征在于，获取待显示矢量图的图元集合的步骤包括：

向云端发送矢量图请求，其中，所述云端在接收到所述请求后返回所述矢量图对应的图元数据包的存储地址，其中，所述矢量图对应多个图元数据包，所述图元数据包包括若干所述图元集合；

根据所述存储地址下载所述图元数据包；

从所述图元数据包中解析所述图元集合。

7.根据权利要求6所述的用于Web端的矢量图显示方法，其特征在于，从所述图元数据包中解析所述图元集合的步骤包括：

读取预存的所述矢量图对应的数据配置文件，其中，所述数据配置文件包括图元集合对应的数据包标识、数据起始位置和数据大小；

确定所述数据包标识所指示的所述图元数据包，得到目标图元数据包；

从所述目标图元数据包中所述数据起始位置处开始，读取所述数据大小的数据，得到所述图元集合。

8.一种用于Web端的矢量图显示装置，其特征在于，包括：

获取模块，用于获取待显示矢量图的图元集合，其中，所述矢量图包括若干所述图元集合，所述图元集合包括若干图元，所述图元集合中的各个图元可采用相同的WebGL绘制命令进行绘制；

确定模块，用于确定所述图元集合所对应的WebGL绘制命令；以及

绘制模块，用于调用所述WebGL绘制命令绘制所述图元集合中的各个图元。

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

10.一种计算机可读存储介质，其上存储有计算机程序，其特征在于：所述计算机程序被处理器执行时实现权利要求1至7任一项所述方法的步骤。

Images