CN114820853A - 矢量图形的处理方法、装置、计算机设备和存储介质 - Google Patents

Abstract

本申请涉及一种矢量图形的处理方法、装置、计算机设备和存储介质。所述方法包括：获取可缩放的矢量图形SVG文件；对SVG文件进行解析，根据解析结果设置第一渲染参数；对SVG文件进行三角形剖分，得到第二渲染参数；根据第一渲染参数和第二渲染参数，将SVG文件渲染到画布上。该方案主要通过先对SVG文件进行解析，再根据解析出的不同元素类型来设置渲染参数，以及对复杂形状先三角形剖分再渲染，因此能够有效提高矢量图的图像处理效率。

Description

矢量图形的处理方法、装置、计算机设备和存储介质

技术领域

本申请涉及图像处理技术领域，特别是涉及一种矢量图形的处理方法、装置、计算机设备和存储介质。

背景技术

矢量图与位图相比，位图存储的是每个像素点的颜色信息，在画面内容复杂，色彩丰富如存储图像时优势明显，但是位图占用磁盘空间较大。而矢量图画面线条简单，颜色较少，占用磁盘空间少，且易于编辑，放大线条轮廓依然清晰。可缩放的矢量图形(ScalableVector Graphics，SVG)是一种用XML定义的语言来描述的二维矢量及矢量/栅格图形。如果将SVG和位图放大对比，位图会出现比较明显的马赛克斑点，失真明显。

虽然SVG具有上述缩放不失真和占用存储空间小等优点，但由于二维图形的处理引擎例如常见的Skia，Cario等均有一些限制，如Skia创建图形处理器上下文时，其控制台并不关联显示系统，因此是无法直接渲染上屏的，在绘制完成之后需要额外的一次内存拷贝，这使其不适合做实时渲染。

因此，如何提高SVG文件的处理效率是亟待解决的技术问题。

发明内容

本申请提供一种矢量图形的处理方法、装置、计算机设备和计算机可读存储介质，能够有效提高对SVG文件的处理效率，且可以直接渲染上屏，实现实时渲染。

第一方面，提供一种矢量图形的处理方法，包括：获取可缩放的矢量图形SVG文件；对SVG文件进行解析，根据解析结果设置第一渲染参数；对SVG文件解析出的图元进行三角形剖分，得到第二渲染参数；根据第一渲染参数和第二渲染参数，将SVG文件渲染到画布上。

在本申请技术方案中，主要通过先对SVG文件进行解析，再根据解析结果来设置渲染参数，以及对复杂图形进行三角形剖分后再设置渲染参数，因此能够有效提高矢量图的图像处理效率。

结合第一方面，在第一方面的某些实现方式中，在将SVG文件渲染到画布上时，可以采用下面的操作：选择第一渲染方式进行渲染或者选择第二渲染方式进行渲染；所述第一渲染方式为利用图形处理器根据所述第一渲染参数和所述第二渲染参数直接进行渲染；所述第二渲染方式包括：利用通用中央处理器得到所述SVG文件的纹理图像的第三渲染参数，以及根据所述第三渲染参数进行渲染。

上述对于两种渲染方式的灵活选择，使得用户可以根据设备情况或者个人喜好等来自主选择渲染方式。此外，第一渲染方式主要利用了图形处理器在处理图像类的运算时的高效的优势，可以有效提高渲染效率。第二渲染方式则弥补了不具备图形处理器时的情况，如何利用通用中央处理器来实现较高效率的渲染，相比于传统的利用通用中央处理器直接进行渲染的方式，依然有较高的处理效率。

结合第一方面，在第一方面的某些实现方式中，在选择第一渲染方式进行渲染或者选择第二渲染方式进行渲染时，可以包括：根据所述图形处理器和/或所述通用中央处理器的负载状态，选择所述第一渲染方式或者选择所述第二渲染方式。

结合第一方面，在第一方面的某些实现方式中，在对SVG文件进行解析，根据解析结果设置第一渲染参数时，可以采用下面的操作：载入SVG文件，解析SVG文件的SVG元素，SVG元素的类型包括文本、路径和图像；根据类型，设置第一渲染参数。

结合第一方面，在第一方面的某些实现方式中，在根据类型设置第一渲染参数时，可以采用下面的操作：

当类型为文本时，将文本转化为路径，再根据路径的解析参数设置第一渲染参数；或者

当类型为路径时，根据路径的解析参数设置第一渲染参数；或者

当类型为图像时，根据图像设置第一渲染参数。

结合第一方面，在第一方面的某些实现方式中，所述第一渲染参数包括渲染引擎状态参数和图像纹理参数。

结合第一方面，在第一方面的某些实现方式中，所述第二渲染参数包括顶点着色器输入变量和片段着色器输入变量。

第二方面提供一种矢量图形的处理装置，该装置包括能够实现第一方面及其任意一种实现方式的方法的单元。

第三方面提供一种计算机设备，包括存储器和处理器，所述存储器存储有计算机程序，所述处理器执行所述计算机程序时能够实现第一方面及其任意一种实现方式的方法。

第四方面提供一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时能够实现第一方面及其任意一种实现方式的方法。

第五方面，本申请提供一种芯片，包括处理器。处理器用于读取并执行存储器中存储的计算机程序，以执行第一方面或其任意可能的实现方式中的方法。

可选地，所述芯片还包括存储器，存储器与处理器通过电路或电线与存储器连接。

进一步可选地，所述芯片还包括通信接口。

第六方面，本申请提供一种计算机程序产品，所述计算机程序产品包括计算机程序代码，当所述计算机程序代码在计算机上运行时，使得计算机执行第一方面或其任意可能的实现方式中的方法。

上述矢量图形的处理方法、装置、计算机设备和存储介质，主要通过先对SVG文件进行解析，再根据解析结果来设置渲染参数，以及对复杂图形进行三角形剖分后再设置渲染参数，因此能够有效提高矢量图的图像处理效率。

附图说明

图1是本申请实施例的矢量图形的处理方法的示意性流程图。

图2是本申请实施例的SVG文件的解析方法的示意性流程图。

图3是图2所示解析方法的一个示例的示意性流程图。

图4是本申请实施例的三角形剖分结果示意图。

图5是本申请实施例的渲染过程的示意性流程图。

图6是本申请实施例的一种矢量图形的处理方法的示意性流程图。

图7是本申请实施例的矢量图形的处理装置的结构示意图。

图8是本申请实施例的一种计算机设备的结构示意图。

图9是本申请实施例的另一种计算机设备的结构示意图。

具体实施方式

为了使本申请的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本申请进行进一步详细说明。应当理解，此处描述的具体实施例仅仅用以解释本申请，并不用于限定本申请。

图1是本申请实施例的矢量图形的处理方法的示意性流程图。下面对图1所示各步骤进行介绍。本申请实施例的方案支持多平台使用，包括iOS,Android及web浏览器平台等。

101、获取SVG文件。

可选地，可以通过数据接口、通信接口、读取装置等从存储单元或者从外部或者从网络中等获取上述SVG文件的数据流。例如，可以通过数据接口从终端设备的存储单元中载入所述SVG文件。

102、对SVG文件进行解析，根据解析结果设置第一渲染参数。

SVG文件中可包括矢量图形、文本、图像等至少一种图形对象。对SVG文件进行解析，得到对应的类型的图形对象，再针对图形对象设置对应的渲染参数，作为第一渲染参数。

103、对SVG文件解析出的图元进行三角形剖分，得到第二渲染参数。

三角形剖分是指对复杂多边形剖分成多个三角形。通过对SVG文件解析出的图元进行三角形剖分得到三角形，再根据三角形顶点或纹理绘制可以得到第二渲染参数。

104、根据第一渲染参数和第二渲染参数，将SVG文件的图形渲染到画布上。

可选地，可以采用OpenGL ES工具进行渲染，例如OpenGL ES2.0。目前的矢量图形算法标准(Open Vector Graphics，OpenVG)中并没有有效的可以落到实处的SVG图形的渲染方案。OpenVG^TM是针对诸如Flash和SVG的矢量图形算法库提供底层硬件加速界面的免授权费、跨平台应用程序接口API。其初始目标主要面向需要高质量矢量图形算法加速技术的便携手持设备，用以在小屏幕设备上实现动人心弦的用户界面和文本显示效果，并支持硬件加速以在极低的处理器功率级别下实现流畅的交互性能。OpenVG有一些实现软件，ShivaVG、AmanithVG和MonkVG。但现有的OpenVG软件要么是不支持移动端，版本较老，要么是闭源软件或者功能不健全，所以目前依然缺乏实用的OpenVG实现。

而在本申请技术方案中，则可以利用OpenGL ES或者WebGL来执行上述SVG图形的处理方法的步骤，实现实时有效的渲染。例如可以利用OpenGL ES2.0来执行。基于OpenGLES的矢量图形绘制方法能够实现快速绘制，降低CPU负载，提升用户体验。

在图1所示方案中，主要通过先对SVG文件进行解析，再根据解析结果来设置渲染参数，以及利用三角形剖分来先对复杂图形进行剖分再设置渲染参数，因此能够有效提高矢量图的图像处理效率。

在执行步骤102时，在一些实现方式中，可以载入SVG文件，解析SVG文件，然后根据解析结果中SVG元素的类型，设置第一渲染参数。其中，SVG元素的类型包括文本、路径和图像。

为了便于理解，下面先对SVG的三种类型的图形对象进行介绍。

如上文所述，SVG允许三种类型的图形对象：矢量图形(例如,由直线和曲线组成的路径),图像(image)和文本(text)，在本申请中可以分别称之为路径、图像和文本。图形对象也可以称之为SVG元素。上述类型也可以称之为标签。图形对象可以预先进行分组,格式化,变换和合成而变成为渲染的对象。其特色包括嵌套变换,路径剪裁,透明蒙版,滤镜效果和模板对象。

SVG的基本形状元素包括矩形，圆形，椭圆，线条，折线，多边形和路径。基本形状包含着色属性，着色属性包含填充(Filling)和描边(Stroking)。着色方法可以使用单一颜色，渐变颜色(线性渐变和放射渐变)和图案填充。路径(path)可能是SVG中最常见的形状，也是SVG库中最强大的元素基本形状。因此可以用path元素绘制矩形(直角矩形或者圆角矩形)、圆形、椭圆、折线形、多边形，以及一些其他的形状，例如贝塞尔曲线、2次曲线等曲线。路径包含很多绘制原语，例如：M＝moveto，L＝lineto，H＝horizontal lineto，V＝vertical lineto，C＝curveto，S＝smooth curveto，Q＝quadratic Belzier curve，T＝smooth quadratic Belzier curveto，A＝elliptical Arc，Z＝closepath。比如，<path d＝"M250 150 L150 350 L350 350 Z"/>定义了一条路径，它开始于位置(250，150)，到达位置(150，350)，然后从那里开始到(350，350)，最后在(250，150)关闭路径。

SVG的文本是一些文字符号的形状的组合，<text>元素用于定义文本。

SVG图像，SVG图像就是包含一组包括特定的颜色和透明度的像素点的矩形框，SVG<image>元素用于将位图图像嵌入SVG图像内。SVG图像格式转换软件支持JPEG、PNG格式；在SVG中，图像(image)元素也可以嵌入任意光栅图像。在光栅图像中，可以对内容使用SVG的滤镜，蒙版，旋转，剪辑和所有其他工具。

SVG使用格式(style)定义各种各样的样式，比如定义对象如何着色的如填充颜色，线宽等，定义文本类型和大小。

SVG文件解析可以采用的方法是TinyXML，因为SVG文件本质是XML文件，使用该软件库能够比较高效的解析SVG中的各种元素。另外SVG文件存在标签嵌套的情形需要逐层递归的处理，解析出的各种变量将保存在归属于各自对象的属性中，并且作用于基于OpenVG标准的以OpenGL ES作为后端的矢量渲染库中。

为了便于理解上述解析过程，下面结合图2进行介绍。

图2是本申请实施例的SVG文件的解析方法的示意性流程图。

201、载入SVG文件，解析SVG文件的SVG元素，得到SVG元素的类型。

针对SVG文件存在嵌套情形，可以采用递归处理方式进行解析，并将解析结果，即上述解析出的元素(图像对象)、元素的类型保存在不同类型对象的结构体中。

202、根据SVG元素的类型，设置渲染参数。

在一种可能的实现方式中，步骤202可以包括步骤202A和步骤202B。

202A、判断元素类型。

202B、当所述类型为文本时，将文本转化为路径，再根据路径的解析参数设置第一渲染参数；或者

当所述类型为路径时，根据路径的解析参数设置第一渲染参数；或者

当所述类型为图像时，根据图像设置第一渲染参数。

可选地，第一渲染参数可以包括渲染引擎状态参数和纹理参数，其中，文本和路径可以生成渲染引擎状态参数，图像可以生成纹理参数。

可选地，当所述类型为文本时，除了上述将文本转化为路径的方式外，也可以采用字库贴图的方式渲染。但采用将文本转化为路径的方式时渲染效率更高。也就是说，对于文本的渲染方式，既可以采用字库贴图的方式，也可以采用上述将文本转化为路径，再根据路径的解析参数设置第一渲染参数的方式。当采用上述将文本转化为路径，再根据路径的解析参数设置第一渲染参数的方式时，能够进一步提高渲染效率。

应理解，上述只是给出了步骤202的一种实现方式，且该实现方式对不同类型的元素进行不同方式的处理，且上述处理方式易于实现，并达到较好的效果。但本领域技术人员也可以采用其他处理方式实现步骤202的功能，只要是根据元素类型来设置参数即可，例如在对于文本的渲染时，既可以采用字库贴图的方式，也可以采用将文本转化为路径，再根据路径的解析参数设置第一渲染参数的方式。也就是说，具体实现方式可以不同，在此不再一一列举。

203、判断是否解析完SVG文件的所有标签，当判断结果为“是”时结束，当判断结果为“否”时转为执行解析SVG元素的步骤。

从图2所示方法可以看出，本申请实施例对于不同类型的SVG元素的处理方式是不同的，具体而言，对于文本类型的先将其转化为路径，再采用与路径相同的处理方式。如果是路径类型，那么第一步解析路径的绘制参数，比如填充颜色，填充方法，描边颜色和描边方法等，然后按照解析参数设置渲染引擎的状态参数。如果是图像类型，则直接按照纹理绘制的方法进行设置纹理参数。将文本绘制转化为路径再处理能够提升绘制效率，降低绘制复杂度。

图3是图2所示解析方法的一个示例的示意性流程图。下面图3所示各个步骤进行介绍。

301、初始化。

302、载入SVG文件。

在初始化好后，读入SVG流。

303、解析SVG元素。

步骤302和303的组合是步骤201的示例。

304、判断元素类型是否为文本，当判断结果为“是”时执行步骤305，当判断结果为“否”时执行步骤306。

305、判断元素类型是否为路径，当判断结果为“是”时执行步骤307，当判断结果为“否”时执行步骤308。

306、将文本转化为路径。

307、解析路径参数。

308、判断类型是否为图像，当判断结果为“是”时执行步骤309，当判断结果为“否”时执行步骤310。

309、设置渲染参数。

步骤304-309是步骤202的一个示例，具体而言，是步骤202A-202B的示例。

步骤304-309相当于针对解析到的不同元素类型，进行了不同处理。总体分为三类，第一类判断是否是文本类型，如果是文本类型，按照上述的方法首先转化为路径类型，然后按照路径处理方法进行处理。如果是路径类型，那么第一步解析路径的绘制参数，比如填充颜色，填充方法，描边颜色和描边方法等，然后按照解析参数设置渲染引擎的状态参数。如果是图像类型，那么直接按照纹理绘制的方法进行设置纹理参数。

310、判断是否解析完成，当判断结果为“是”时结束，当判断结果为“否”时执行步骤302。步骤310是步骤203的示例。

也就是说，在图3所示方法中，对于SVG元素逐个依次进行类型判断、选择与类型对应的处理方式，最终得到渲染参数。

下面对步骤103中的三角形剖分进行介绍。矢量图形的路径经过不同的绘制原语比如moveto,lineto,curveto等能够构成封闭图形，但是基于OpenGL ES的渲染后端是点，线，三角形，四边形或者凸多边形作为基本图元的绘制方式，对于有孔或者凹多边形不支持，所以需要对复杂多边形进行三角形剖分，如图4所示。图4时本申请实施例的三角形剖分结果示意图。从图4可以看出，复杂多边形可以剖分成多个三角形，例如图4中的(a)的图形被剖分成两个三角形，图4中的(b)被剖分成多个三角形。

对于曲面细分可以通过镶嵌器对象来工作。镶嵌器对象类似于二次方程状态对象需要创建以及销毁。

镶嵌的基本过程是将非凸多边形的所有顶点发送至镶嵌器中而不是直接发送至OpenGL渲染管线。然后通过镶嵌器(tessellator)镶嵌多边形。最后，当镶嵌完成，镶嵌器会通过用户定义的回调函例程(callback routine)用OpenGL命令渲染镶嵌多边形或者执行用户自定义操作。

描边的三角形剖分算法和填充的类似，主要原理是通过相邻的节点之间按照不同描边宽度构建三角形，然后通过OpenGL渲染三角形实现描边效果。

通过对多边形的剖分可以得到三角形顶点，通过对路径的参数设置得到三角形渲染的填充，描边等的设置，最后使用OpenGL ES等工具画在画布上。

也就是说，在本申请实施例中，对于复杂多边形，进行三角形剖分。具体而言，对于路径的绘制，执行三角形剖分步骤，获取三角形顶点，设置顶点着色器输入变量，对于纹理绘制，设置纹理状态，设置片段着色器输入变量。简而言之，对SVG文件进行三角形剖分，最终得到第二渲染参数。第二渲染参数包括顶点着色器输入变量和片段着色器输入变量。

下面对步骤104的渲染过程进行具体介绍。

在一些实现方式中，可以利用图形处理器(Graphics Processing Unit，GPU)进行渲染，即利用GPU将SVG文件画到画布上。这类实现方式充分发挥了GPU在图像处理方面运算快处理效率高的优势，从而有效提高矢量图形渲染的处理效率。

在另一些实现方式中，可以选择第一渲染方式进行渲染或者选择第二渲染方式进行渲染，所述第一渲染方式为利用所述GPU根据所述第一渲染参数和所述第二渲染参数直接进行渲染，所述第二渲染方式包括：利用通用中央处理器(Central Processing Unit，CPU)得到所述SVG文件的纹理图像的第三渲染参数，以及根据所述第三渲染参数进行渲染。

应理解，上述对于两种渲染方式的选择，使得可以在负载均衡的情况下自动选择第一渲染方式或者第二渲染方式，从而提高渲染效率。也可以使得用户可以根据设备情况或者个人喜好等来自主选择渲染方式。

第一渲染方式主要利用了GPU在处理图像类的运算时的高效的优势，可以有效提高渲染效率。

可选地，在第二渲染方式中，还可以进一步选择利用CPU或GPU进行渲染。第二渲染方式中CPU和GPU的结合来实现较高效率的渲染，相比于传统的利用CPU直接进行渲染的方式，均有较高的处理效率。

渲染对于不同类型的绘制对象有不同的处理方法。比如对于渐变着色包括线性渐变或者放射性渐变，常规办法是先在CPU上完成栅格图像绘制，然后通过纹理映射的方式使用OpenGL ES进行渲染，这种处理方法效率不高，因为CPU先行绘制纹理图像拖慢了处理速度。而在本申请技术方案中则根据负载情况选择渲染引擎GPU或者CPU，能够明显提升绘制效率。另外对于SVG的图像类型元素绘制方法也是通过纹理映射的方式进行渲染。对于文本对象的渲染，本设计方案通过转化为路径绘制的方式进行渲染，因为文本字形也是一种特殊的多边形。对于一些基本形状如矩形等的绘制，因为这些对象均可以转化为路径表达，路径支持在各种条件下的绘制，如绝对路径和相对路径绘制，子路径等。

在一些实现方式中，在选择两种渲染方式之一时，还可以设置判断条件，确定选择哪一种渲染方式。例如，可以根据所述GPU和/或所述CPU的负载状态，选择所述第一渲染方式或者选择所述第二渲染方式。

举例说明，例如可以判断GPU的负载状态来选择，当GPU负载较小或空闲时，说明能够尽快执行渲染相关操作，此时选择第一渲染方式。当GPU负载较大或满载时说明无暇或需要较长时间后才能执行渲染相关操作，此时选择第二渲染方式。又例如可以判断CPU的负载状态来选择，当CPU负载较小或空闲时，说明能够尽快执行渲染相关操作，此时选择第二渲染方式。当CPU负载较大或满载时说明无暇或需要较长时间后才能执行渲染相关操作，此时选择第一渲染方式。再例如，由于GPU对图形的处理能力远高于CPU，所以可以优先使用GPU进行处理，所以可以判断GPU和CPU的负载状态来选择，当GPU负载较小或空闲时，优先选择第二渲染方式。当GPU负载较大或满载而CPU空闲时选择第一渲染方式。此外，如上文所述，第二渲染方式的具体渲染操作也可以预设为CPU执行或者GPU执行。例如，可以是GPU执行，此时第一渲染方式和第二渲染方式都是具体的渲染步骤是由GPU执行的，只是第一渲染方式是全部由GPU执行，而第二渲染方式是GPU和CPU的结合，具体而言，先由CPU生成纹理参数，再由GPU执行渲染。此时，两种渲染方式都可以借助于GPU的处理图像的优势达到有效提高渲染效率的目的。又例如，可以是CPU执行，此时第一渲染方式是全部由GPU执行，而第二渲染方式是全部由CPU执行。此时，两种渲染方式是借助于灵活选择来达到有效提高渲染效率的目的。

在一些实现方式中，还可以在CPU和/或GPU负载较低时，通过增加第二渲染参数的精度，提高渲染质量；或者在CPU和/或GPU负载较高时，通过降低第二渲染参数的精度，保证流畅度。也就是说，可以根据GPU和/或CPU的负载状态来调整第二渲染参数，以达到更高的渲染质量或者达到更快的渲染速率。

也就是说，在步骤104中，可以判断是否开启扩展功能，以及选择处理方法。开启扩展功能可以通过设置OpenGL变量状态实现，通过扩展默认方法支持用户自定义渲染对象和渲染方法。如果开启了扩展功能，则直接设置OpenGL状态参数然后通过GPU渲染得到渲染结果，如果没有开启扩展功能，则首先使用CPU计算出纹理图像，然后再设计渲染参数，通过纹理映射进行渲染。下面结合图5进行介绍。

图5是本申请实施例的渲染过程的示意性流程图。

501、初始化。

502、判断是否开启扩展功能，当判断结果为“是”时，执行步骤504，当判断结果为“否”时，执行步骤503。

可选地，判断条件(依据)可以为负载情况，即根据负载情况确定是否需要开启扩展功能。例如，可以根据所述GPU和/或所述CPU的负载状态，选择所述第一渲染方式或者选择所述第二渲染方式。例如，可以在GPU空闲时优先选择GPU，当GPU被占用时选择CPU，也就是判断条件为GPU是否空闲。

可选地，判断条件还可以为任务量预估，例如复杂图形、较大的图形渲染过程需要的运算等执行较多，优先选用GPU，而对于简单图形、较小的图形渲染过程需要的运算等执行过程较少，优先选用CPU。

应理解，还有很多其他判断条件的情况，以及上述根据负载情况来判断也可能存在其他实现方式，上述根据任务量预估也可能存在其他实现方式，为了简洁，不再一一列举。

503、利用CPU得到所述SVG文件的纹理图像。

504、设置扩展功能渲染参数。

需要说明的是，此处扩展功能渲染参数可以理解为可能是第一渲染参数和第二渲染参数，也可以能是第三渲染参数。

第一渲染参数和第二渲染参数是OpenGL状态参数。当开启了扩展功能，则利用GPU，根据第一渲染参数和第二渲染参数来进行渲染。如果没有开启扩展功能，则执行步骤504，利用CPU生成SVG文件的纹理图像，而第三渲染参数则是对应于该纹理图像的参数，此时利用GPU，根据第三渲染参数来进行渲染。

505、利用GPU进行渲染。

506、结束。

在图5所示渲染过程中，实现了两种渲染方式的灵活选择，其中第一渲染方式对应的是启动扩展功能的情况，即执行步骤502、504和505；第二渲染方式的其中一个例子(CPU和GPU结合)对应的是不启动扩展功能的情况，即执行步骤502、503、504和505。

如上文所述，本申请实施例的方法可以利用OpenGL，为了便于理解，下面结合图6再次说明。图6是本申请实施例的一种矢量图形的处理方法的示意性流程图。图6可以看作是图1的一个具体示例，具体而言是利用OpenGL实现图1所示方法的一个示例。

601、系统初始化。

在该步骤，初始化主要完成了OpenGL上下文初始化，例如设置画布宽高，变量初始化和状态初始化等。

602、SVG文件解析。

该步骤主要完成读入SVG流，递归解析SVG文件标签(元素)，设置渲染引擎状态参数等。步骤602可以看作是步骤101和102的一个示例。

603、三角形剖分。

该步骤包括，对SVG文件进行三角形剖分，得到三角形顶点，并根据所述三角形顶点设置顶点着色器输入变量。

在一些实现方式中，步骤603还可以包括纹理绘制，即根据图像元素设置纹理参数，例如设置片段着色器输入变量。

604、使用OpenGL ES渲染到画布。

步骤604的执行可以参照上述步骤104中的相关描述。

605、结束。

可选地，可以通过销毁变量和指针等方式执行步骤605。

上文结合附图对本申请实施例的矢量图形的处理方法的过程进行了介绍，下面结合附图对本申请实施例的矢量图形的处理装置进行介绍。应理解，下文中介绍的矢量图形的处理装置能够执行本申请实施例的矢量图形的处理方法的各个过程，下面在介绍矢量图形的处理装置时适当省略重复的描述。

图7是本申请实施例的矢量图形的处理装置的示意图。如图7所示，处理装置2000包括获取单元2001和处理单元2002。

处理装置2000可以用于执行本申请实施例的上述方法中执行的步骤。例如，获取单元2001可以用于执行图1所示处理方法中的步骤101，处理单元2002可以用于执行图1所示处理方法中的步骤102至步骤104。又例如，获取单元2001可以用于执行图2所示方法中的步骤201，处理单元2002可以用于执行图2所示方法中的步骤202、步骤203。再例如，获取单元2001可以用于执行图3所示方法中的步骤302中读入SVG流的部分，处理单元2002可以用于执行图3所示方法中的步骤301、步骤303和步骤304以及步骤302中的文件解析部分。再例如，获取单元2001可以用于执行图6所示方法中的步骤602中读入SVG流的部分，处理单元2002可以用于执行图6所示方法中的步骤601、603-605以及步骤602中的文件解析部分。此外，处理单元2002还可以用于执行图5所示方法中的各个步骤。

图7所示的装置2000中的获取单元2001可以是实时获取SVG文件的单元，例如可以通过获取单元2001实时获取用户的SVG文件(例如输入SVG文件)。此外，获取单元2001还可以相当于图8所示的装置3000中的通信接口，通过该通信接口可以获得SVG文件，或者，获取单元2001也可以相当于图8所示的装置3000中的处理器，此时可以通过处理器从存储器中获取SVG文件，或者通过通信接口从外部获取SVG文件。通过该通信接口3003还可以获得来自于终端设备或者网络中的SVG文件。

图7所示的处理装置2000中的获取单元2001可以相当于图8或图9所示的计算机设备3000中的通信接口，处理单元2002可以相当于图8或图9所示的装置5000中处理器。

上述矢量图形的处理装置中的各个模块可全部或部分通过软件、硬件及其组合来实现。上述各模块可以硬件形式内嵌于或独立于计算机设备中的处理器中，也可以以软件形式存储于计算机设备中的存储器中，以便于处理器调用执行以上各个模块对应的操作。

需要说明的是，本申请实施例的矢量图形的处理方法可以应用在终端设备、网络设备等可以进行矢量图形渲染的计算机设备上。下面分别对两种设备的可能应用进行示例性介绍。

在一个实施例中，提供了一种计算机设备，该计算机设备可以是服务器，其内部结构图可以如图8所示。该计算机设备包括处理器、存储器、输入/输出接口(Input/Output，简称I/O)和通信接口。其中，处理器、存储器和输入/输出接口通过系统总线连接，通信接口通过输入/输出接口连接到系统总线。其中，该计算机设备的处理器用于提供计算和控制能力。该计算机设备的存储器包括非易失性存储介质和内存储器。该非易失性存储介质存储有操作系统、计算机程序和数据库。该内存储器为非易失性存储介质中的操作系统和计算机程序的运行提供环境。该计算机设备的数据库用于存储SVG文件、矢量图形处理过程中的中间结果、处理结果等数据。该计算机设备的输入/输出接口用于处理器与外部设备之间交换信息。该计算机设备的通信接口用于与外部的终端通过网络连接通信。该计算机程序被处理器执行时以实现上文所述任意一种实现方式的矢量图形的处理方法。

在另一个实施例中，提供了一种计算机设备，该计算机设备可以是终端设备，其内部结构图可以如图9所示。该计算机设备包括处理器、存储器、输入/输出接口、通信接口、显示单元和输入装置。其中，处理器、存储器和输入/输出接口通过系统总线连接，通信接口、显示单元和输入装置通过输入/输出接口连接到系统总线。其中，该计算机设备的处理器用于提供计算和控制能力。该计算机设备的存储器包括非易失性存储介质、内存储器。该非易失性存储介质存储有操作系统和计算机程序。该内存储器为非易失性存储介质中的操作系统和计算机程序的运行提供环境。该计算机设备的输入/输出接口用于处理器与外部设备之间交换信息。该计算机设备的通信接口用于与外部的终端进行有线或无线方式的通信，无线方式可通过WIFI、移动蜂窝网络、NFC(近场通信)或其他技术实现。该计算机程序被处理器执行时以实现上文所述任意一种实现方式的矢量图形的处理方法。该计算机设备的显示单元用于形成视觉可见的画面，可以是显示屏、投影装置或虚拟现实成像装置。显示屏可以是液晶显示屏或者电子墨水显示屏，该计算机设备的输入装置可以是显示屏上覆盖的触摸层，也可以是计算机设备外壳上设置的按键、轨迹球或触控板，还可以是外接的键盘、触控板或鼠标等。

本领域技术人员可以理解，图8和图9中示出的结构，仅仅是与本申请方案相关的部分结构的框图，并不构成对本申请方案所应用于其上的计算机设备的限定，具体的计算机设备可以包括比图中所示更多或更少的部件，或者组合某些部件，或者具有不同的部件布置。

本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的计算机程序可存储于非易失性计算机可读取存储介质中，该计算机程序在执行时，可包括如上述各方法的实施例的流程。其中，本申请所提供的各实施例中所使用的对存储器、存储、数据库或其它介质的任何引用，均可包括非易失性和易失性存储器中的至少一种。非易失性存储器可包括只读存储器(Read-OnlyMemory，ROM)、磁带、软盘、闪存或光存储器等。易失性存储器可包括随机存取存储器(Random Access Memory，RAM)或外部高速缓冲存储器。作为说明而非局限，RAM可以是多种形式，比如静态随机存取存储器(Static Random Access Memory，SRAM)或动态随机存取存储器(Dynamic Random Access Memory，DRAM)等。

以上实施例的各技术特征可以进行任意的组合，为使描述简洁，未对上述实施例中的各个技术特征所有可能的组合都进行描述，然而，只要这些技术特征的组合不存在矛盾，都应当认为是本说明书记载的范围。

以上所述实施例仅表达了本申请的几种实施方式，其描述较为具体和详细，但并不能因此而理解为对发明专利范围的限制。应当指出的是，对于本领域的普通技术人员来说，在不脱离本申请构思的前提下，还可以做出若干变形和改进，这些都属于本申请的保护范围。因此，本申请专利的保护范围应以所附权利要求为准。

Claims (10)

1.一种矢量图形的处理方法，其特征在于，包括：

获取可缩放的矢量图形SVG文件；

对所述SVG文件进行解析，根据解析结果设置第一渲染参数；

对所述SVG文件解析出的图元进行三角形剖分，得到第二渲染参数；

根据所述第一渲染参数和所述第二渲染参数，将所述SVG文件渲染到画布上。

2.根据权利要求1所述的方法，其特征在于，所述将所述SVG文件渲染到画布上，包括：

选择第一渲染方式进行渲染或者选择第二渲染方式进行渲染；所述第一渲染方式为利用图形处理器GPU根据所述第一渲染参数和所述第二渲染参数直接进行渲染；所述第二渲染方式包括：利用通用中央处理器CPU得到所述SVG文件的纹理图像的第三渲染参数，以及利用所述GPU根据所述第三渲染参数进行渲染。

3.根据权利要求2所述的方法，其特征在于，所述选择第一渲染方式进行渲染或者选择第二渲染方式进行渲染，包括：

根据所述GPU和/或所述CPU的负载状态，选择所述第一渲染方式或者选择所述第二渲染方式。

4.根据权利要求1所述的方法，其特征在于，所述对所述SVG文件进行解析，根据解析结果设置第一渲染参数，包括：

载入所述SVG文件，解析所述SVG文件的SVG元素，得到所述SVG元素的类型；

根据所述类型，设置所述第一渲染参数。

5.根据权利要求4所述的方法，其特征在于，所述SVG元素的类型包括文本、路径或图像至少一种；所述根据所述类型，设置所述第一渲染参数，包括：

当所述类型为文本时，将文本转化为路径，再根据路径的解析参数设置所述第一渲染参数；或者

当所述类型为路径时，根据路径的解析参数设置所述第一渲染参数；或者

当所述类型为图像时，根据图像设置所述第一渲染参数。

6.根据权利要求1至5中任一项所述的方法，其特征在于，所述第一渲染参数包括渲染引擎状态参数和图像纹理参数。

7.根据权利要求1至5中任一项所述的方法，其特征在于，所述第二渲染参数包括顶点着色器输入变量和片段着色器输入变量。

8.一种图像处理装置，其特征在于，包括：

获取单元，用于获取可缩放的矢量图形SVG文件；

处理单元，用于对所述SVG文件进行解析，根据解析结果设置第一渲染参数；

所述处理单元还用于，对所述SVG文件解析出的图元进行三角形剖分，得到第二渲染参数；

所述处理单元还用于，根据所述第一渲染参数和所述第二渲染参数，将所述SVG文件渲染到画布上。

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

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

Images