CN108038890A - 矢量图演示方法、装置、设备及计算机存储介质 - Google Patents

Abstract

本发明提供一种矢量图演示方法、装置、设备及计算机存储介质，所述方法包括：获取矢量图的文件信息，所述矢量图至少包括一个图形元素，所述文件信息中包括所述图形元素的绘制信息；根据所述绘制信息演示所述图形元素的绘制过程。本发明实施例通过获取矢量图的文件信息，由于矢量图至少包括一个图形元素，而文件信息中包括图形元素的绘制信息，因此可以根据绘制信息演示图形元素的绘制过程，实现对矢量图的绘制过程进行演示，扩展展示方式，提高演示效果。

Description

矢量图演示方法、装置、设备及计算机存储介质

技术领域

本发明涉及计算机技术领域，尤其涉及矢量图演示方法、装置、设备及计算机存储介质。

背景技术

矢量图是计算机图形学中用点、直线或者多边形等基于数学方程的几何图元表示图像。矢量图与使用像素表示图像的位图不同。以SVG格式的矢量图为例，SVG(ScalableVector Graphics，可缩放矢量图形)是由万维网联盟(World Wide Web Consortium，W3C)制定的矢量图形规范。按照W3C的标准，SVG是采用可扩展标记语言(Extensible MarkupLanguage，XML)编写的。可见，矢量图与分辨率无关，具有占用空间小、缩放不失真等优点，应用前景广泛。但目前在获得矢量图后，往往以矢量图的最终形态展示在屏幕上，展示方式单一。

发明内容

本发明提供了矢量图演示方法、装置、设备及计算机存储介质，以解决现有技术中展示方式单一的缺陷。

根据本发明实施例的第一方面，提供一种矢量图演示方法，所述方法包括：

获取矢量图的文件信息，所述矢量图至少包括一个图形元素，所述文件信息中包括所述图形元素的绘制信息；

根据所述绘制信息演示所述图形元素的绘制过程。

在一个可选的实现方式中，所述绘制信息包括轮廓线的绘制信息，所述根据所述绘制信息演示所述图形元素的绘制过程，包括：

根据所述绘制信息确定所述图形元素的轮廓采样点；

基于预设动画速率以及轮廓采样点，演示所述图形元素的轮廓线的绘制过程。

在一个可选的实现方式中，所述根据所述绘制信息确定所述图形元素的轮廓采样点，包括：

根据所述绘制信息确定所述图形元素对应的函数；

对所述函数进行赋值，获得所述图形元素的轮廓采样点。

在一个可选的实现方式中，所述基于预设动画速率以及轮廓采样点，演示所述图形元素的轮廓线的绘制过程，包括：

根据所述绘制信息确定所述图形元素的轮廓线的属性信息，所述属性信息包括轮廓线的粗细值、颜色值中的一种或多种；

基于所述属性信息，按预设动画速率动态绘制由轮廓采样点确定的轮廓线。

在一个可选的实现方式中，所述绘制信息中包括填充信息，所述方法还包括：

在填充条件满足时，基于所述填充信息对轮廓线所包含区域进行填充；

所述填充条件包括以下一种条件：

所述图形元素的轮廓线绘制完成；

所述矢量图中所有图形元素的轮廓线绘制完成。

在一个可选的实现方式中，所述基于所述填充信息对轮廓线所包含区域进行填充，包括：

在轮廓线所包含区域内动态绘制指定图元；

基于所绘制的指定图元确定演示填充过程完成时，清除所绘制的指定图元，并将轮廓线所包含区域填充为所述填充信息对应的填充样式和/或颜色。

在一个可选的实现方式中，所述指定图元为线条，所述在轮廓线所包含区域内动态绘制指定图元，包括：

获得所述图形元素的轮廓采样点集合，所述轮廓采样点集合中轮廓采样点基于轮廓采样点在轮廓线上的顺序进行排列；

将第i个轮廓采样点与第(N-i+1)个轮廓采样点分别作为线条的起点和终点，动态绘制所述线条；N为轮廓采样点集合中轮廓采样点个数，

所述基于所绘制的指定图元确定演示填充过程完成，包括：

在所有由第i个轮廓采样点和第(N-i+1)个轮廓采样点构成的线条绘制完成后，确定演示填充过程完成。

在一个可选的实现方式中，所述指定图元为线条，所述在轮廓线所包含区域内动态绘制指定图元，包括：

根据所述轮廓采样点集合中的轮廓采样点，确定待绘制线条的函数；

对所确定的函数进行赋值，获得所述待绘制线条的填充采样点；

基于所述填充采样点动态绘制所述待绘制线条；

所述基于所绘制的指定图元确定演示填充过程完成，包括：

为每个填充采样点配置虚拟图形，所述填充采样点在所述虚拟图形内，所述虚拟图形的大小大于待绘制线条的粗细值；

确定在虚拟图形内的轮廓采样点的个数，并将所确定个数与轮廓采样点的总个数进行比较；

根据比较结果确定演示填充过程完成。

在一个可选的实现方式中，所述方法还包括：

演示所述图形元素的轮廓线的绘制过程时，显示用于标识绘制工具的图标，所述图标跟随绘制轨迹的移动而移动。

在一个可选的实现方式中，若所述矢量图至少包括两个图形元素，图形元素的演示顺序基于文件信息中图形元素的绘制信息的顺序确定。

根据本发明实施例的第二方面，提供一种矢量图演示装置，所述装置包括：

信息获取模块，用于获取矢量图的文件信息，所述矢量图至少包括一个图形元素，所述文件信息中包括所述图形元素的绘制信息；

过程演示模块，用于根据所述绘制信息演示所述图形元素的绘制过程。

根据本发明实施例的第三方面，提供一种电子设备，包括：

处理器；

用于存储处理器可执行指令的存储器；

其中，所述处理器被配置为：

获取矢量图的文件信息，所述矢量图至少包括一个图形元素，所述文件信息中包括所述图形元素的绘制信息；

根据所述绘制信息演示所述图形元素的绘制过程。

根据本发明实施例的第四方面，提供一种计算机存储介质，所述存储介质中存储有程序指令，所述程序指令包括：

获取矢量图的文件信息，所述矢量图至少包括一个图形元素，所述文件信息中包括所述图形元素的绘制信息；

根据所述绘制信息演示所述图形元素的绘制过程。

本发明的实施例提供的技术方案可以包括以下有益效果：

本发明实施例通过获取矢量图的文件信息，由于矢量图至少包括一个图形元素，而文件信息中包括图形元素的绘制信息，因此可以根据绘制信息演示图形元素的绘制过程，实现对矢量图的绘制过程进行演示，扩展展示方式，进而提高演示效果。

应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本发明。

附图说明

此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本发明的实施例，并与说明书一起用于解释本发明的原理。

图1A是本发明根据一示例性实施例示出的一种矢量图演示方法的流程图。

图1B是本发明根据一示例性实施例示出的一种矢量图示意图。

图1C是本发明根据一示例性实施例示出的一种矢量图轮廓线动态绘制过程示意图。

图1D是本发明根据一示例性实施例示出的一种演示矢量图的填充过程的示意图。

图1E是本发明根据一示例性实施例示出的另一种演示矢量图的填充过程的示意图。

图1F是本发明根据一示例性实施例示出的另一种演示矢量图的填充过程的示意图。

图1G是本发明根据一示例性实施例示出的另一种演示矢量图的填充过程的示意图。

图2A是本发明根据一示例性实施例示出的另一种矢量图演示方法的流程图。

图2B是本发明根据一示例性实施例示出的一种矢量图演示过程示意图。

图3是本发明根据一示例性实施例示出的一种矢量图演示装置的框图。

图4是本发明根据一示例性实施例示出的一种矢量图演示装置所在电子设备的一种硬件结构图。

具体实施方式

这里将详细地对示例性实施例进行说明，其示例表示在附图中。下面的描述涉及附图时，除非另有表示，不同附图中的相同数字表示相同或相似的要素。以下示例性实施例中所描述的实施方式并不代表与本发明相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本发明的一些方面相一致的装置和方法的例子。

在本发明使用的术语是仅仅出于描述特定实施例的目的，而非旨在限制本发明。在本发明和所附权利要求书中所使用的单数形式的“一种”、“所述”和“该”也旨在包括多数形式，除非上下文清楚地表示其他含义。还应当理解，本文中使用的术语“和/或”是指并包含一个或多个相关联的列出项目的任何或所有可能组合。

应当理解，尽管在本发明可能采用术语第一、第二、第三等来描述各种信息，但这些信息不应限于这些术语。这些术语仅用来将同一类型的信息彼此区分开。例如，在不脱离本发明范围的情况下，第一信息也可以被称为第二信息，类似地，第二信息也可以被称为第一信息。取决于语境，如在此所使用的词语“如果”可以被解释成为“在……时”或“当……时”或“响应于确定”。

在实际应用中，往往存在展示矢量图的需求。例如，在教学、会议等场景中，用户可以通过展示矢量图以达到相应的目的。为了避免展示的单一性，可以采用类似于MicrosoftPowerPoint的演示文稿演示方式对矢量图进行展示。例如通过增加浮入、飞入、弹跳、淡出等效果展示矢量图。虽然这种展示方式增加了矢量图进入和退出的动态效果，然而，这种展示方式都以矢量图为成型的图形进行展示，展示方式单一。

鉴于此，本发明提供一种矢量图演示方法，通过获取矢量图的文件信息，由于矢量图至少包括一个图形元素，而文件信息中包括图形元素的绘制信息，因此可以根据绘制信息演示图形元素的绘制过程，实现对矢量图的绘制过程进行演示，增加展示的多样性，进而提高演示效果。

接下来结合附图对本发明方案进行示例说明。

如图1A所示，图1A是本发明根据一示例性实施例示出的一种矢量图演示方法的流程图，该方法可以包括以下步骤：

在步骤101中，获取矢量图的文件信息，所述矢量图至少包括一个图形元素，所述文件信息中包括所述图形元素的绘制信息。

在步骤102中，根据所述绘制信息演示所述图形元素的绘制过程。

本发明实施例可以应用于各种电子设备中，例如，可以是交互智能平板、数位板等智能书写设备，也可以是具备绘图功能的智能手机、智能学习机、平板电脑、PDA(PersonalDigital Assistant，个人数字助理)等电子设备，当然，本发明实施例也不排除在PC(Personal Computer，个人计算机)上的应用。

关于矢量图，矢量图可以是预先存储的矢量图，通过接收用户插入指令或选择指令等，获得待演示的矢量图。矢量图也可以是基于用户绘制指令绘制获得的矢量图等。

在实际应用中，可以使用文件信息描述矢量化的图形，使得矢量图的文件信息具有可读性。文件信息中通常包括用于描述点、线、简单图形、路径等基本图形元素的绘制信息。绘制信息用于描述如何绘制图形元素。以圆形为例，绘制信息可以包括圆心坐标、半径、填充颜色、线条粗细、线条颜色等信息；以路径为例，绘制信息可以包括起点、终点、控制点等信息。

为了方便理解，本发明实施例还提供一种矢量图进行示例说明。如图1B所示，图1B是本发明根据一示例性实施例示出的一种矢量图示意图。在该示意图中，示出了一张矢量图，该矢量图包括屋顶、屋身和屋门三个图形元素，每个图形元素都包括轮廓线。在文件信息中包括屋顶的绘制信息、屋身的绘制信息和屋门的绘制信息。

在需要启动绘制演示功能时，可以获取矢量图的文件信息。在一个例子中，启动绘制演示功能的方式有很多种，例如，接收到启动绘制演示功能的指令；又如，在接收到插入矢量图指令等。通过设置启动条件，可以在启动条件满足时，启动绘制演示功能。

由于绘制信息用于描述如何绘制图形元素，因此获得图形元素的绘制方法，进而根据绘制信息演示图形元素的绘制过程，而矢量图由图形元素构成，因此，实现演示矢量图的绘制过程。

接下来，对如何演示图形元素的绘制过程进行介绍。

在实际应用中，任何一个图形元素，可以认定至少包括轮廓线。如果轮廓线可见，表示轮廓线的粗细值为非0；如果轮廓线不可见，表示轮廓线的粗细值为0。在图形元素为填充图形元素时，可能会出现轮廓线的粗细值为0的情况。在该种情况下，可以以指定粗细值作为轮廓线的粗细值，例如，以1像素的粗细值作为轮廓线的粗细值。以填充信息中的颜色值作为轮廓线的颜色值。由于不是所有图形元素都会进行填充，例如，独立的一条线条、折线、曲线等图形元素不存在填充，因此，本发明实施例先介绍如何演示轮廓线的绘制过程。

由于绘制信息用于描述如何绘制图形元素，可以获得路径的起始点以及后续绘制方法，因此，可以根据绘制信息确定图形元素的轮廓采样点，基于预设动画速率以及轮廓采样点，演示所述图形元素的轮廓线的绘制过程。轮廓采样点可以是图形元素的轮廓线上的采样点。

在一个可选的实现方式中，由于绘制信息用于描述如何绘制图形元素，因此，可以根据所述绘制信息确定所述图形元素对应的函数，对所述函数进行赋值，获得所述图形元素的轮廓采样点。

可见，通过确定函数并赋值的方式，可以快速获得轮廓采样点。

进一步的，可以基于采样间隔对所述函数进行赋值，获得所述图形元素的轮廓采样点。其中，采样间隔可以是相邻轮廓采样点间的间隔。在一个例子中，采样间隔可以是预先设定的间隔值，例如，可以以1像素为采样间隔。在另一个例子中，为了确保采样精度，采样间隔可以基于轮廓线的粗细值确定。例如，采样间隔可以与轮廓线的粗细值存在正相关关系，轮廓线的粗细值越大，采样间隔越大，轮廓线的粗细值越小，采样间隔越小，从而保证采样精度。

关于轮廓采样点的计算以及轮廓线的绘制，在一个例子中，可以先计算部分轮廓采样点，并利用计算获得的轮廓采样点进行绘制，再计算下一部分轮廓采样点，并利用计算获得的轮廓采样点进行绘制，直至所有轮廓采样点绘制完成。在另一个例子中，可以根据绘制信息确定图形元素的轮廓采样点的集合，简称轮廓采样点集合；在获得轮廓采样点集合后，再基于轮廓采样点集合演示图形元素的轮廓线的绘制过程。

可见，在获得轮廓采样点集合后，基于轮廓采样点集合演示图形元素的轮廓线的绘制过程，可以使绘制过程更顺畅。

关于预设动画速率，可以是绘制轮廓线的速率。例如，预设动画速率可以是一次动画间隔内连接轮廓采样点的个数。

在一个例子中，预设动画速率可以预先设定，例如，预先指定一个固定的动画速率；又如，根据用户指令确定预设动画速率。可见，通过用户指令确定预设动画速率可以实现动画速率的可控性。

在另一个例子中，预设动画速率可以基于轮廓采样点集中轮廓采样点个数确定。例如，轮廓采样点个数较大时，预设动画速率较大，轮廓采样点个数较小时，预设动画速率较小，从而保证动画绘制的流畅性。

由于轮廓采样点可以确定轮廓线的轨迹，预设动画速率可以确定绘制的速度，因此，可以基于预设动画速率以及轮廓采样点，演示图形元素的轮廓线的绘制过程，从而实现演示矢量图的绘制过程。

实际应用中，绘制信息中往往记录有轮廓线的属性信息。属性信息可以包括轮廓线的粗细值、颜色值等信息。鉴于此，根据所述绘制信息确定所述图形元素的轮廓线的属性信息，所述属性信息包括轮廓线的粗细值、颜色值中的一种或多种；基于所述属性信息，按预设动画速率动态绘制由轮廓采样点确定的轮廓线。

在该实施例中，可以根据属性信息确定绘制线的属性，并按预设动画速率动态绘制由轮廓采样点确定的轮廓线，从而模拟出轮廓线的绘制过程，进而更加形象的展示矢量图。

如图1C所示，图1C是本发明根据一示例性实施例示出的一种矢量图轮廓线动态绘制过程示意图。可以理解的是，在该示意图中，仅截取动态绘制过程中其中几帧图像进行示意说明。可见，通过展示矢量图轮廓线的动态绘制过程，可以增强展示的趣味性，扩展矢量图的展示方式。

接下来介绍绘制信息中包括填充信息的情况。

填充信息是轮廓线所包含区域的属性信息。填充信息可以包括填充样式、颜色等信息。填充样式可以包括纯色填充、线性渐变、径向渐变、环形渐变、图案填充、杂色填充等样式。

在一个可选的实现方式中，还可以设置填充条件，在填充条件满足时，基于所述填充信息对轮廓线所包含区域进行填充。可见，通过填充条件限定填充时机。

其中，填充条件是预先设定的触发条件。填充条件可以固定为某触发条件，也可以根据用户设置指令确定为某触发条件。填充条件可以从不同维度进行限定。

在一个例子中，填充条件可以是接收到填充指令，即在接收到填充指令时，基于所述填充信息对轮廓线所包含区域进行填充。例如，用户可以通过点击鼠标的方式触发进行填充操作，实现填充时机的可控性。

在另一个例子中，填充条件可以是图形元素的轮廓线绘制完成，即，在图形元素的轮廓线绘制完成时，基于所述填充信息对轮廓线所包含区域进行填充。

其中，所述图形元素是当前正在进行演示的图形元素。

可见，在绘制完成当前图形元素的轮廓线时，对该图形元素进行填充操作，实现绘制完成一个图形元素后，再绘制另一个图形元素。

在另一个例子中，填充条件可以是所述矢量图中所有图形元素的轮廓线绘制完成，即，在矢量图中所有图形元素的轮廓线绘制完成时，基于所述填充信息对轮廓线所包含区域进行填充。

可见，该实施例按分类进行展示，先展示矢量图中所有图形元素的轮廓线绘制过程，再展示矢量图中所有图形元素的填充过程，从而实现从不同角度展示矢量图，扩展矢量图的展示方式。

在一个例子中，填充条件还可以基于用户需求进行选择。以填充条件包括图形元素的轮廓线绘制完成和所述矢量图中所有图形元素的轮廓线绘制完成为例，基于不同的填充条件实现按不同演示方式对绘制信息进行分类演示。一种是按元素演示绘制过程：基于文件信息中图形元素的绘制信息的顺序，演示完当前图形元素的轮廓线绘制过程和填充过程后，再演示下一个图形元素的轮廓线绘制过程和填充过程。另一种是按类型演示绘制过程：基于文件信息中图形元素的绘制信息的顺序，先演示矢量图中图形元素的轮廓线绘制过程，在所有图形元素的轮廓线绘制过程演示完成后，再演示矢量图中图形元素的填充过程，实现先演示所有轮廓线绘制过程，再演示填充过程。

可以理解的是，填充条件不限于上述所列举条件，还可以是其他触发条件，在此不一一列举。

关于基于所述填充信息对轮廓线所包含区域进行填充，在一个例子中，可以直接将轮廓线所包含区域填充为所述填充信息对应的填充样式和/或颜色。由于轮廓线已确定，因此，轮廓线所包含区域可以确定，则可以直接将该区域填充为填充信息对应的填充样式和/或颜色，从而实现图形元素的快速填充。

在另一个例子中，为了进一步扩展矢量图的展示方式，增强展示效果，本发明实施例还对填充过程进行演示，以模拟用户填充矢量图的过程。例如，在填充条件满足时，根据填充信息演示对轮廓线所包含区域进行填充的过程，确定演示填充过程完成时，可以判定对轮廓线所包含区域的填充操作完成，也可以清除在轮廓线所包含区域所绘制的信息，并将轮廓线所包含区域填充为所述填充信息对应的填充样式和/或颜色。

如图1D所示，图1D是本发明根据一示例性实施例示出的一种演示矢量图的填充过程的示意图。在该示意图中，仅示意出演示填充过程中的一帧图像。可见，可以实现模拟用户手工填充矢量图形，扩展展示方式，给用户带来较为生动的视觉体验。

作为其中一种实现手段，基于所述填充信息对轮廓线所包含区域进行填充，包括：

在轮廓线所包含区域内动态绘制指定图元；

基于所绘制的指定图元确定演示填充过程完成时，清除所绘制的指定图元，并将轮廓线所包含区域填充为所述填充信息对应的填充样式和/或颜色。

其中，指定图元可以是指定图形，例如，可以是线条、实心圆、实心多边形等图形。若指定图元为封闭图形，指定图形的大小可以为固定大小，也可以基于轮廓采样点个数以及轮廓线的粗细值确定。若指定图元为线条，线条的粗细可以为固定大小，也可以基于轮廓采样点个数以及轮廓线的粗细值确定。

本实施例中，在轮廓线所包含区域内动态绘制指定图元，目的是为了演示轮廓线所包含区域内的填充过程。随着所绘制的指定图元增多，可以判断演示填充过程是否完成，若完成，则可以清除所绘制的指定图元，并将轮廓线所包含区域填充为所述填充信息对应的填充样式和/或颜色，从而使用户更加形象的感受到动态填充过程，增强展示效果。

关于如何确定演示填充过程是否完成，可以理解的是，演示填充过程是为了示意对该轮廓线所包含区域有填充操作，因此，可以在填充完轮廓线所包含区域中的小部分区域时，判定达到演示效果，则确定演示填充过程完成；也可以在填充完轮廓线所包含区域中的大部分区域时，确定演示填充过程完成。

鉴于此，在一个例子中，可以在动态绘制指定图元的绘制时间达到指定时间时，确定演示填充过程完成。

可见，该实施例通过在指定时间内动态绘制指定图元的方式，示意对该轮廓线所包含区域有填充操作，达到示意目的，容易实现。

为了达到示意目的，还可以采用其他方式判断演示填充过程是否完成。以下结合绘制指定图元进行示例说明。

在一个可选的实现方式中，指定图元可以为线条，所述在轮廓线所包含区域内动态绘制指定图元，可以包括：

获得所述图形元素的轮廓采样点集合，所述轮廓采样点集合中轮廓采样点基于轮廓采样点在轮廓线上的顺序进行排列；

将第i个轮廓采样点与第(N-i+1)个轮廓采样点分别作为线条的起点和终点，动态绘制所述线条；N为轮廓采样点集合中轮廓采样点个数，

所述基于所绘制的指定图元确定演示填充过程完成，包括：

在所有由第i个轮廓采样点和第(N-i+1)个轮廓采样点构成的线条绘制完成后，确定演示填充过程完成。

其中，由于具有填充效果的图形元素，轮廓线往往是封闭的，以便能根据轮廓线确定填充区域。因此，轮廓线的起点与轮廓线最后的终点连接。

鉴于此，可以将轮廓采样点集合中轮廓采样点按照轮廓采样点在轮廓线上的顺序进行排列，并从排列后的轮廓采样点集合中，从前半部分轮廓采样点中抽取第i个轮廓采样点，从后半部分轮廓采样点中抽取第(N-i+1)个轮廓采样点，将第i个轮廓采样点与第(N-i+1)个轮廓采样点分别作为线条的起点和终点，动态绘制所述线条。在所有由第i个轮廓采样点和第(N-i+1)个轮廓采样点构成的线条绘制完成后，确定演示填充过程完成。

其中，关于i的取值方式，在一个例子中，可以从中连续取整数值，通过不断的取值，可以获得不同的起点和终点，从而实现将第一个轮廓采样点与最后一个轮廓采样点连接，将第二个轮廓采样点与倒数第二个轮廓采样点连接，以此类推。当N为基数时，中间数既不作为起点，也不作为终点。可见，可以将大部分轮廓采样点都作为线条的起点或终点，实现通过填充线条的方式填充轮廓线所包含区域。

在另一个例子中，可以从中按指定间隔取整数值。其中，指定间隔可以基于线条的粗细值以及轮廓采样点的间隔值确定，以实现相邻线条间的间隔为零，或间隔为指定像素。可见，通过按指定间隔取i值，可以缩短绘制线条的时间。

如图1E所示，图1E是本发明根据一示例性实施例示出的另一种演示矢量图的填充过程的示意图。在该示意图中，仅示意出演示填充过程中的一帧图像。可见，可以通过动态绘制多条线段实现演示填充过程。

由上述实施例可见，将第i个轮廓采样点与第(N-i+1)个轮廓采样点分别作为线条的起点和终点，动态绘制线条，可以实现在轮廓线所包含区域内动态绘制指定线条，容易实现。

进一步的，为了体现线条的连贯性，可以将第1个轮廓采样点作为第一线段的起点，将第N个轮廓采样点作为第一线段的终点，绘制第一线段；再以第一线段的终点为第二线段的起点，将第N-1个轮廓采样点作为第二线段的终点，绘制第二线段；再以第二线段的终点为第三线段的起点，将第2个轮廓采样点作为第三线段的终点，绘制第三线段，依次类推，实现在轮廓线所包含区域内动态绘制线条。如图1F所示，图1F是本发明根据一示例性实施例示出的另一种演示矢量图的填充过程的示意图。在该示意图中，仅示意出动态绘制指定图元过程中的一帧图像，可见，可以通过连续绘制一条线段实现演示填充过程。

在另一个可选的实现方式中，指定图元可以为线条，所述在轮廓线所包含区域内动态绘制指定图元，包括：

根据所述轮廓采样点集合中的轮廓采样点，确定待绘制线条的函数；

对所确定的函数进行赋值，获得所述待绘制线条的填充采样点；

基于所述填充采样点动态绘制所述待绘制线条；

所述基于所绘制的指定图元确定演示填充过程完成，包括：

为每个填充采样点配置虚拟图形，所述填充采样点在所述虚拟图形内，所述虚拟图形的大小大于待绘制线条的粗细值；

确定在虚拟图形内的轮廓采样点的个数，并将所确定个数与轮廓采样点的总个数进行比较；

根据比较结果确定演示填充过程完成。

其中，根据所述轮廓采样点集合中的轮廓采样点，确定待绘制线条的函数，目的是为了避免待绘制线条超出轮廓线所包含区域。例如，假设待绘制线条由多条线段拼接组成，可以将轮廓采样点集合中两点轮廓采样点分别作为第一线段的起点和终点，从而获得第一线段对应的第一函数；再将第一线段的终点作为第二线段的起点，将轮廓采样点集合中另一轮廓采样点作为第二线段的终点，获得第二线段对应的第二函数，以此类推，可以获得多个函数。在获得函数后，可以对所确定的函数进行赋值，获得所述待绘制线条的填充采样点，并基于所述填充采样点、按指定动画速率动态绘制所述待绘制线条。

为了确保所绘制的线条占据大部分轮廓线所包含区域，达到演示填充绘制过程的目的，可以为每个填充采样点配置虚拟图形。虚拟图形可以是虚拟矩阵、虚拟圆形等图形，设置虚拟图形的目的是为了确定待绘制线条已覆盖的轮廓采样点个数。因此，所述填充采样点在所述虚拟图形内，所述虚拟图形所占据区域大小大于待绘制线条的粗细值。例如，虚拟图形的大小区域为粗细值的1.2倍。虚拟图形可以为可见，也可以为不可见。填充过程中会产生多个虚拟图形，通过统计在虚拟图形内的轮廓采样点的个数，并将所确定个数与轮廓采样点的总个数进行比较，可以判断填充的完成状态。例如，每个虚拟图形覆盖轮廓采样点时，将该轮廓采样点去除，当剩下的轮廓采样点个数与轮廓采样点的总个数的比值小于指定阈值时，可以判定演示填充过程完成。

如图1G所示，图1G是本发明根据一示例性实施例示出的另一种演示矢量图的填充过程的示意图。在该示意图中，仅示意出演示填充过程中的一帧图像，可见，可以通过虚拟图形内的轮廓采样点个数，实现演示填充过程是否完成的判断。在绘制待绘制线条时，可以任意选择一个角度作为绘制角度，本实施例中，选择了45°。按照一定间距排列直线(间距可以不做限定，此处为了效果，可以取待绘制线条粗细值的10％作为间距，实际间距可以取任意值)。让直线贯穿填充区域，一条直线从一个方向动画出现，相邻直线从另一个方向动画出现，直至覆盖整个区域。直线的粗细值也可以与间距相等，以实现覆盖全部填充区域。

在一个可选的实现方式中，演示所述图形元素的轮廓线的绘制过程时，显示用于标识绘制工具的图标，所述图标跟随绘制轨迹的移动而移动。同理，演示图形元素的填充过程时，也可以显示用于标识绘制工具的图标。图标可以是画笔图标、箭头图标等用于表示绘图工具的图标。如图1F所示，在绘制待绘制线条时，跟随绘制轨迹展示有画笔图标，用于示意正在填充绘制，从而增强绘制效果。

在一个可选的实现方式中，若所述矢量图至少包括两个图形元素，图形元素的演示顺序基于文件信息中图形元素的绘制信息的顺序确定。例如，图形元素的演示顺序可以包括图形元素的轮廓线绘制演示顺序以及填充绘制演示顺序。假设文件信息中按顺序包括第一图形元素的绘制信息、第二图形元素的绘制信息、第三图形元素的绘制信息，则，针对按类型演示绘制过程的演示方式，可以先演示第一图形元素的轮廓线的绘制过程，再演示第二图形元素的轮廓线的绘制过程，再演示第三图形元素的轮廓线的绘制过程，接着，演示第一图形元素的填充过程，再演示第二图形元素的填充过程，最后演示第三图形元素的填充过程。针对按元素演示绘制过程的演示方式，可以先演示第一图形元素的轮廓线绘制过程和填充过程，然后演示第二图形元素的轮廓线绘制过程和填充过程，最后演示第三图形元素的轮廓线绘制过程和填充过程。

可见，通过文件信息中图形元素的绘制信息的顺序确定图形元素的演示顺序，可以使演示获得的矢量图与实际要展示的矢量图相同，且不必考虑图层间的关系，容易实现。

以上实施方式中的各种技术特征可以任意进行组合，只要特征之间的组合不存在冲突或矛盾，但是限于篇幅，未进行一一描述，因此上述实施方式中的各种技术特征的任意进行组合也属于本说明书公开的范围。

以下列举其中一种组合进行示例说明。

如图2A所示，图2A是本发明根据一示例性实施例示出的另一种矢量图演示方法的流程图，该方法可以包括以下步骤：

在步骤201中，获取矢量图的文件信息，所述矢量图至少包括一个图形元素，所述文件信息中包括所述图形元素的绘制信息。

其中，在获得矢量图的文件信息后，可以对文件信息进行解析，以图形元素为单元，获得每个图形元素的绘制信息。对每个图形元素的绘制信息进行拆解，获得绘制轮廓线的绘制信息和进行填充的绘制信息(又称为填充信息)。

在一个例子中，可以按演示方式对绘制信息进行分类存储，一种是：按文件信息中图形元素的绘制信息的顺序，将图形元素的绘制信息进行排列并存储；另一种是：按文件信息中图形元素的绘制信息的顺序，先将绘制每个图形元素的轮廓线的绘制信息进行排列并存储，再将填充每个图形元素的绘制信息进行排列并存储。

在步骤202中，确定演示方式，所述演示方式包括按类型演示绘制过程和按元素演示绘制过程。

在步骤203中，若按类型演示绘制过程，则基于文件信息中图形元素的绘制信息的顺序，先演示矢量图中图形元素的轮廓线绘制过程，在所有图形元素的轮廓线绘制过程演示完成后，再演示矢量图中图形元素的填充过程。

其中，针对演示轮廓线绘制过程，可以根据所述绘制信息确定所述图形元素的轮廓采样点，基于预设动画速率以及轮廓采样点，演示所述图形元素的轮廓线的绘制过程。针对演示填充过程，可以在轮廓线所包含区域内动态绘制指定图元，基于所绘制的指定图元确定演示填充过程完成时，清除所绘制的指定图元，并将轮廓线所包含区域填充为所述填充信息对应的填充样式和/或颜色。

在步骤204中，若按元素演示绘制过程，则基于文件信息中图形元素的绘制信息的顺序，演示完当前图形元素的轮廓线绘制过程和填充过程后，再演示下一个图形元素的轮廓线绘制过程和填充过程。

其中，图2A与图1A所示实施例中相关技术相似，在此不一一赘述。

由上述实施例可见，可以按类型演示绘制过程，实现先演示轮廓线绘制过程，再演示填充过程；又可以按元素演示绘制过程，实现先演示完一个图形元素的绘制过程，再演示下一个图形元素的绘制过程，从而扩展矢量图的演示方式，增强互动性。

为了方便理解，本发明实施例还提供一种矢量图演示过程进行示例说明。如图2B所示，图2B是本发明根据一示例性实施例示出的一种矢量图演示过程示意图。在该示意图中，仅截取矢量图演示过程中其中几帧图像进行示意说明。本实施例按类型演示绘制过程，实现先演示轮廓线绘制过程，再演示填充过程。可见，可以增强演示效果，提高用户体验。

与前述矢量图演示方法的实施例相对应，本发明还提供了矢量图演示装置及其所应用的电子设备、以及计算机存储介质的实施例。

如图3所示，图3是本发明根据一示例性实施例示出的一种矢量图演示装置的框图，所述装置包括：

信息获取模块310，用于获取矢量图的文件信息，所述矢量图至少包括一个图形元素，所述文件信息中包括所述图形元素的绘制信息。

过程演示模块320，用于根据所述绘制信息演示所述图形元素的绘制过程。

在一个可选的实现方式中，所述绘制信息包括轮廓线的绘制信息，所述过程演示模块320包括(图3未示出)：

采样点确定子模块，用于根据所述绘制信息确定所述图形元素的轮廓采样点；

动态绘制子模块，用于基于预设动画速率以及轮廓采样点，演示所述图形元素的轮廓线的绘制过程。

在一个可选的实现方式中，所述采样点确定子模块，具体配置为：

根据所述绘制信息确定所述图形元素对应的函数；

对所述函数进行赋值，获得所述图形元素的轮廓采样点。

在一个可选的实现方式中，所述动态绘制子模块，具体配置为：

根据所述绘制信息确定所述图形元素的轮廓线的属性信息，所述属性信息包括轮廓线的粗细值、颜色值中的一种或多种；

基于所述属性信息，按预设动画速率动态绘制由轮廓采样点确定的轮廓线。

在一个可选的实现方式中，所述绘制信息中包括填充信息，所述装置还包括填充模块(图3未示出)，用于：

在填充条件满足时，基于所述填充信息对轮廓线所包含区域进行填充；

所述填充条件包括以下一种条件：

所述图形元素的轮廓线绘制完成；

所述矢量图中所有图形元素的轮廓线绘制完成。

在一个可选的实现方式中，所述填充模块包括：

动态绘制子模块，用于在轮廓线所包含区域内动态绘制指定图元；

填充子模块，用于基于所绘制的指定图元确定演示填充过程完成时，清除所绘制的指定图元，并将轮廓线所包含区域填充为所述填充信息对应的填充样式和/或颜色。

在一个可选的实现方式中，所述指定图元为线条，所述动态绘制子模块，具体配置为：

获得所述图形元素的轮廓采样点集合，所述轮廓采样点集合中轮廓采样点基于轮廓采样点在轮廓线上的顺序进行排列；

将第i个轮廓采样点与第(N-i+1)个轮廓采样点分别作为线条的起点和终点，动态绘制所述线条；N为轮廓采样点集合中轮廓采样点个数，

所述填充子模块，具体配置为：在所有由第i个轮廓采样点和第(N-i+1)个轮廓采样点构成的线条绘制完成后，确定演示填充过程完成。

在一个可选的实现方式中，所述指定图元为线条，所述动态绘制子模块具体配置为：

根据所述轮廓采样点集合中的轮廓采样点，确定待绘制线条的函数；

对所确定的函数进行赋值，获得所述待绘制线条的填充采样点；

基于所述填充采样点动态绘制所述待绘制线条；

所述填充子模块具体配置为：

为每个填充采样点配置虚拟图形，所述填充采样点在所述虚拟图形内，所述虚拟图形的大小大于待绘制线条的粗细值；

确定在虚拟图形内的轮廓采样点的个数，并将所确定个数与轮廓采样点的总个数进行比较；

根据比较结果确定演示填充过程完成。

在一个可选的实现方式中，所述过程演示模块还用于：

演示所述图形元素的轮廓线的绘制过程时，显示用于标识绘制工具的图标，所述图标跟随绘制轨迹的移动而移动。

在一个可选的实现方式中，若所述矢量图至少包括两个图形元素，图形元素的演示顺序基于文件信息中图形元素的绘制信息的顺序确定。

相应的，本发明还提供一种电子设备，所述设备包括有处理器；用于存储处理器可执行指令的存储器；其中，所述处理器被配置为：

获取矢量图的文件信息，所述矢量图至少包括一个图形元素，所述文件信息中包括所述图形元素的绘制信息；

根据所述绘制信息演示所述图形元素的绘制过程。

相应的，本发明实施例一种计算机存储介质，所述存储介质中存储有程序指令，所述程序指令包括：

获取矢量图的文件信息，所述矢量图至少包括一个图形元素，所述文件信息中包括所述图形元素的绘制信息；

根据所述绘制信息演示所述图形元素的绘制过程。

本发明可采用在一个或多个其中包含有程序代码的存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。计算机可用存储介质包括永久性和非永久性、可移动和非可移动媒体，可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括但不限于：相变内存(PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、快闪记忆体或其他内存技术、只读光盘只读存储器(CD-ROM)、数字多功能光盘(DVD)或其他光学存储、磁盒式磁带，磁带磁磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。

上述装置中各个模块的功能和作用的实现过程具体详情见上述方法中对应步骤的实现过程，在此不再赘述。

对于装置实施例而言，由于其基本对应于方法实施例，所以相关之处参见方法实施例的部分说明即可。以上所描述的装置实施例仅仅是示意性的，其中所述作为分离部件说明的模块可以是或者也可以不是物理上分开的，作为模块显示的部件可以是或者也可以不是物理模块，即可以位于一个地方，或者也可以分布到多个网络模块上。可以根据实际的需要选择其中的部分或者全部模块来实现本发明方案的目的。本领域普通技术人员在不付出创造性劳动的情况下，即可以理解并实施。

本发明矢量图演示装置的实施例可以应用在电子设备上。装置实施例可以通过软件实现，也可以通过硬件或者软硬件结合的方式实现。以软件实现为例，作为一个逻辑意义上的装置，是通过其所在电子设备的处理器将非易失性存储器中对应的计算机程序指令读取到内存中运行形成的。从硬件层面而言，如图4所示，为本发明矢量图演示装置432所在电子设备的一种硬件结构图，除了图4所示的处理器410、内存430、网络接口420、以及非易失性存储器440之外，实施例中装置432所在的电子设备通常根据该电子设备的实际功能，还可以包括其他硬件，对此不再赘述。

本领域技术人员在考虑说明书及实践这里公开的发明后，将容易想到本发明的其它实施方案。本发明旨在涵盖本发明的任何变型、用途或者适应性变化，这些变型、用途或者适应性变化遵循本发明的一般性原理并包括本发明未公开的本技术领域中的公知常识或惯用技术手段。说明书和实施例仅被视为示例性的，本发明的真正范围和精神由下面的权利要求指出。

应当理解的是，本发明并不局限于上面已经描述并在附图中示出的精确结构，并且可以在不脱离其范围进行各种修改和改变。本发明的范围仅由所附的权利要求来限制。

以上所述仅为本发明的较佳实施例而已，并不用以限制本发明，凡在本发明的精神和原则之内，所做的任何修改、等同替换、改进等，均应包含在本发明保护的范围之内。

Claims (13)

1.一种矢量图演示方法，其特征在于，所述方法包括：

获取矢量图的文件信息，所述矢量图至少包括一个图形元素，所述文件信息中包括所述图形元素的绘制信息；

根据所述绘制信息演示所述图形元素的绘制过程。

2.根据权利要求1所述的方法，其特征在于，所述绘制信息包括轮廓线的绘制信息，所述根据所述绘制信息演示所述图形元素的绘制过程，包括：

根据所述绘制信息确定所述图形元素的轮廓采样点；

基于预设动画速率以及轮廓采样点，演示所述图形元素的轮廓线的绘制过程。

3.根据权利要求2所述的方法，其特征在于，所述根据所述绘制信息确定所述图形元素的轮廓采样点，包括：

根据所述绘制信息确定所述图形元素对应的函数；

对所述函数进行赋值，获得所述图形元素的轮廓采样点。

4.根据权利要求2所述的方法，其特征在于，所述基于预设动画速率以及轮廓采样点，演示所述图形元素的轮廓线的绘制过程，包括：

根据所述绘制信息确定所述图形元素的轮廓线的属性信息，所述属性信息包括轮廓线的粗细值、颜色值中的一种或多种；

基于所述属性信息，按预设动画速率动态绘制由轮廓采样点确定的轮廓线。

5.根据权利要求2至4任一项所述的方法，其特征在于，所述绘制信息中包括填充信息，所述方法还包括：

在填充条件满足时，基于所述填充信息对轮廓线所包含区域进行填充；

所述填充条件包括以下一种条件：

所述图形元素的轮廓线绘制完成；

所述矢量图中所有图形元素的轮廓线绘制完成。

6.根据权利要求5所述的方法，其特征在于，所述基于所述填充信息对轮廓线所包含区域进行填充，包括：

在轮廓线所包含区域内动态绘制指定图元；

基于所绘制的指定图元确定演示填充过程完成时，清除所绘制的指定图元，并将轮廓线所包含区域填充为所述填充信息对应的填充样式和/或颜色。

7.根据权利要求6所述的方法，其特征在于，所述指定图元为线条，所述在轮廓线所包含区域内动态绘制指定图元，包括：

获得所述图形元素的轮廓采样点集合，所述轮廓采样点集合中轮廓采样点基于轮廓采样点在轮廓线上的顺序进行排列；

将第i个轮廓采样点与第(N-i+1)个轮廓采样点分别作为线条的起点和终点，动态绘制所述线条；N为轮廓采样点集合中轮廓采样点个数，

所述基于所绘制的指定图元确定演示填充过程完成，包括：

在所有由第i个轮廓采样点和第(N-i+1)个轮廓采样点构成的线条绘制完成后，确定演示填充过程完成。

8.根据权利要求6所述的方法，其特征在于，所述指定图元为线条，所述在轮廓线所包含区域内动态绘制指定图元，包括：

根据所述轮廓采样点集合中的轮廓采样点，确定待绘制线条的函数；

对所确定的函数进行赋值，获得所述待绘制线条的填充采样点；

基于所述填充采样点动态绘制所述待绘制线条；

所述基于所绘制的指定图元确定演示填充过程完成，包括：

为每个填充采样点配置虚拟图形，所述填充采样点在所述虚拟图形内，所述虚拟图形的大小大于待绘制线条的粗细值；

确定在虚拟图形内的轮廓采样点的个数，并将所确定个数与轮廓采样点的总个数进行比较；

根据比较结果确定演示填充过程完成。

9.根据权利要求1至4任一项所述的方法，其特征在于，所述方法还包括：

演示所述图形元素的轮廓线的绘制过程时，显示用于标识绘制工具的图标，所述图标跟随绘制轨迹的移动而移动。

10.根据权利要求1至4任一项所述的方法，其特征在于，若所述矢量图至少包括两个图形元素，图形元素的演示顺序基于文件信息中图形元素的绘制信息的顺序确定。

11.一种矢量图演示装置，其特征在于，所述装置包括：

信息获取模块，用于获取矢量图的文件信息，所述矢量图至少包括一个图形元素，所述文件信息中包括所述图形元素的绘制信息；

过程演示模块，用于根据所述绘制信息演示所述图形元素的绘制过程。

12.一种电子设备，其特征在于，包括：

处理器；

用于存储处理器可执行指令的存储器；

其中，所述处理器被配置为：

获取矢量图的文件信息，所述矢量图至少包括一个图形元素，所述文件信息中包括所述图形元素的绘制信息；

根据所述绘制信息演示所述图形元素的绘制过程。

13.一种计算机存储介质，其特征在于，所述存储介质中存储有程序指令，所述程序指令包括：

获取矢量图的文件信息，所述矢量图至少包括一个图形元素，所述文件信息中包括所述图形元素的绘制信息；

根据所述绘制信息演示所述图形元素的绘制过程。