CN110473273A - 矢量图形的绘制方法、装置、存储介质及终端 - Google Patents

Abstract

本申请实施例公开了一种矢量图形的绘制方法、装置、存储介质及终端，属于计算机技术领域。采用分层的方式绘制矢量图形，在多个图层中的任意一个图层发生更新时，只需要对发生更新的图层进行重绘制，相对于现有的位图所有的图案都位于同一图层上，本申请实施例不需要对所有的图层进行重绘制，减少了重绘制的数据量，相应的降低了重绘制的时间。

Description

矢量图形的绘制方法、装置、存储介质及终端

技术领域

本申请涉及计算机技术领域，尤其涉及一种矢量图形的绘制方法、装置、存储介质及终端。

背景技术

随着时代的变迁以及当代绘画技术的不断发展，绘画呈现丰富多彩的局面，不再依赖线条或者几何图形单一展示，而是更注重色彩的搭配和运用，随着计算机技术的发展，计算机绘图越来越受到社会的青睐。

在现有技术中，市面绘图产品对图像的绘制方法，通常是对位图进行填充，位图也称为点阵图，由大量的像素点组成，位图可以表现出丰富的色彩变化并产生逼真的效果，位图需要记录每个像素的色彩信息，因此位图占用的存储空间比较大，在对位图进行绘制的过程中运算量比较大，这样绘制的时间相应增加。

发明内容

本申请实施例提供了一种矢量图形的绘制方法、装置、存储介质及终端，可以解决现有的绘制方法运算量大的问题。所述技术方案如下：

第一方面，本申请实施例提供了一种矢量图形的绘制方法，所述方法包括：

解析矢量图形文件，根据矢量图形文件确定多个图层的位置，根据从下到上的顺序对多个图层进行绘制，绘制完成后得到矢量图形。矢量图形文件可以存储在终端本地，也可以存在服务器上，本申请实施例不作限制。矢量图形文件是使用文本形式描述图层的位置以及各个图层上的图案的形状和位置，图层为承载一个或多个图案的容器。

在一种可能的设计中，根据从下到上的顺序对多个图层进行绘制，绘制完成后得到矢量图形之后，还包括：

接收针对矢量图形的填充操作；根据填充操作的位置确定矢量图形中的目标图案，将目标图案所在图层以上的图层进行合并得到第一图层，以及将目标图案所在的图层以下的所有图层进行合并得到第二图层，对目标图案进行填充，以及根据从下到上的顺序分别绘制所述第二图层、所述目标图案所在的图层和所述第一图层。

在一种可能的设计中，对目标图案进行填充，包括：基于蒙版裁剪的方式对所述目标图案进行填充。

在一种可能的设计中，根据填充操作的位置确定矢量图形中的目标图案，包括：获取填充操作的屏幕坐标，确定矢量图形中所有包括屏幕坐标的图案，将所有包括屏幕坐标的图案中图层最高的图案作为目标图案。

在一种可能的设计中，矢量图形文件包括文件头部、图层元数据区和图层数据区，图层头部包括图层数、作者和创建日期中的一种或多种，图层元数据区包括图层标识、图层填充状态指示位和图层位置信息中的一种或多种，图层数据区包括图案描述信息。

在一种可能的设计中，所述对目标图案进行颜色之前，还包括：接收颜色选择指令，以及根据颜色选择指令选择目标颜色，目标颜色用于对目标图案进行颜色填充。

在一种可能的设计中，接收颜色选择指令，以及根据颜色选择指令选择目标颜色包括：

显示颜色托盘，颜色托盘包括多个颜色，接收针对颜色托盘的颜色选择指令，将选择选择指令在多个颜色中选择的颜色作为目标颜色。

在一种可能的设计中，颜色托盘包括颜色候选区、选中颜色区和最近使用颜色区，颜色后选区包括终端设备支持的所有颜色，选择颜色区表示用户在颜色后选区中选中的颜色，最近使用颜色区表示最近使用的预设数量的颜色，预设数量可以根据需要来进行设置。

在一种可能的设计中，对目标图案进行填充包括：确定所述目标图案的最小外接矩形，计算所述最小外接矩形的中心点，以所述终端点为起始点通过均速扩散的方式对目标图案进行颜色填充。

第二方面，本申请实施例提供了一种矢量图形的绘制装置，所述装置包括：

解析模块，用于解析矢量图形文件；

位置确定模块，用于根据所述矢量图形文件确定多个图层的位置；其中，所述图层为承载一个或多个图案的容器；

绘制模块，用于根据从下到上的顺序对所述多个图层进行绘制，绘制完成后得到矢量图形。

第三方面，本申请实施例提供一种计算机存储介质，所述计算机存储介质存储有多条指令，所述指令适于由处理器加载并执行上述的方法步骤。

第四方面，本申请实施例提供一种终端，可包括：处理器和存储器；其中，所述存储器存储有计算机程序，所述计算机程序适于由所述处理器加载并执行上述的方法步骤。

本申请一些实施例提供的技术方案带来的有益效果至少包括：

本申请实施例的方案在执行时，终端对对矢量图形文件进行解析，确定多个图层的位置以及各个图层包括的图案的位置和形状，根据从下到上的顺序对多个图层进行绘制，绘制完成后显示矢量图形，采用分层的方式绘制矢量图形，在多个图层中的任意一个图层发生更新时，只需要对发生更新的图层进行重绘制，相对于现有的位图所有的图案都位于同一图层上，本申请实施例不需要对所有的图层进行重绘制，减少了重绘制的数据量，相应的降低了重绘制的时间。

附图说明

为了更清楚地说明本申请实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1是本申请实施例提供的一种系统架构的结构示意图；

图2A是本申请实施例提供的一种矢量图形的绘制方法的流程示意图；

图2B～图2F是本申请实施例提供的矢量图形的绘制原理示意图；

图3A是本申请实施例提供的一种矢量图形的绘制方法的另一流程示意图；

图3B是本申请实施例提供的一种用户界面的示意图；

图3C是本申请实施例提供的一种用户界面的示意图；

图3D是本申请实施例提供的一种用户界面的示意图；

图3E是本申请提供的一种图层的分布示意图；

图3F是本申请提供的一种颜色填充的示意图；

图4是本申请实施例提供的一种矢量图形的填充装置的结构示意图；

图5是本申请实施例提供的一种终端设备的结构示意图。

具体实施方式

为使本申请的目的、技术方案和优点更加清楚，下面将结合附图对本申请实施例方式作进一步地详细描述。

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

在本申请的描述中，需要理解的是，术语“第一”、“第二”等仅用于描述目的，而不能理解为指示或暗示相对重要性。对于本领域的普通技术人员而言，可以具体情况理解上述术语在本申请中的具体含义。此外，在本申请的描述中，除非另有说明，“多个”是指两个或两个以上。“和/或”，描述关联对象的关联关系，表示可以存在三种关系，例如，A和/或B，可以表示：单独存在A，同时存在A和B，单独存在B这三种情况。字符“/”一般表示前后关联对象是一种“或”的关系。

首先，对本申请实施例涉及到的一些名词进行解释：

用户界面(User Interface，UI)：又称为图形用户界面，是用户和终端之间进行交互的接口，终端的用户界面上显示窗口、图标或按钮等控件，用户点击控件后终端执行相应的操作(操作可以是鼠标、键盘、触摸屏等输入设备触发的)，以及将响应后的结果显示在用户界面上。

矢量图形：是一种面向对象的图像，矢量图形中的图形元素称为对象，每个对象都是一个独立的实体，具有颜色、形状、轮廓、大小和屏幕位置等属性。矢量图形是根据集合特性来绘制的，矢量可以是一个点或一条线，矢量图形只能依靠软件生成，矢量图形的描述文件占用的空间较小，具有放大后图形不失真的效果，和分辨率无关。矢量图形中包括多个图案，一个图层可以包括一个或多个图案，图层的数量可以是两个或两个以上。

图层：图层是承载一个或多个图案的容器，多个图层按顺序叠放在一起，组合起来形成图形的最终效果。

本申请实施例中的终端包括但不限于：其中，本申请实施例的终端设备包括但不限于移动终端、车载终端、智能穿戴设备、平板电脑、个人电脑等具有触摸功能的终端设备。

图1示出了可以应用于本申请的矢量图形的绘制方法或矢量图形的绘制装置的示例性系统架构100。

如图1所示，系统架构100可以包括终端设备101、终端设备102、终端设备103、网络104和服务器105。网络104用于在终端设备101～103之间提供通信链路的介质。网络104可以包括各种类型的有线通信链路或无线通信链路，例如：有线通信链路包括光纤、双绞线或同轴电缆的，无线通信链路包括蓝牙通信链路、无线保真(WIreless-FIdelity，Wi-Fi)通信链路或微波通信链路等。

用户可以使用终端101～103通过网络104与服务器105交互，以接收来自服务器105的消息或向服务器105发送消息。终端设备101～103上可以安装有各种通信客户端应用，例如：视频录制应用、视频播放应用、语音交互应用、搜索类应用、及时通信工具、邮箱客户端、社交平台软件等。

终端设备101～103可以是硬件，也可以是软件。当终端设备101～103为硬件时，可以是具有显示屏的各种电子设备，包括但不限于智能手机、平板电脑、膝上型便携式计算机和台式计算机等等。当终端设备101～103为软件时，可以是安装上上述所列举的电子设备中。其可以实现呈多个软件或软件模块(例如：用来提供分布式服务)，也可以实现成单个软件或软件模块，在此不作具体限定。

当终端设备101～103为硬件时，其上还可以安装有显示设备，显示可以是各种能实现显示功能的设备，例如：阴极射线管显示器(Cathode raytubedisplay，简称CR)、发光二极管显示器(Light-emitting diode display，简称LED)、电子墨水屏、液晶显示屏(Liquid crystal display，简称LCD)、等离子显示面板(Plasma displaypanel，简称PDP)等。用户可以利用终端设备101～103上的显示设备，来查看显示的文字、图片、视频等信息。

需要说明的是，本申请实施例提供的矢量图形的绘制方法一般由终端设备执行，相应的，矢量图形的填充装置一般设置于终端设备中。

服务器105可以是提供各种服务的服务器。例如：服务器105用于存储多个矢量图形，在接收到终端设备101～103发送的图片选择指令后，将选择的矢量图形发送给终端设备101～103上，在终端设备101～103完成矢量图形的填充操作后，接收来自终端设备101～103的填充后的矢量图形，将填充后的矢量图形进行存储。

需要说明的是，服务器105可以是硬件，也可以是软件。当服务器105为硬件时，可以实现成多个服务器组成的分布式服务器集群，也可以实现成单个服务器。当服务器105为软件时，可以实现成多个软件或软件模块(例如用来提供分布式服务)，也可以实现成单个软件或软件模块，在此不做具体限定。

应理解，图1中的终端设备、网络和服务器的数目仅是示意性的。根据实现需要，可以是任意数量的终端设备、网络和服务器。

下面将结合附图2A-附图3F，对本申请实施例提供的矢量图形的绘制方法进行详细介绍。其中，本申请实施例中的矢量图形的填充装置可以是图3B-3D所示的终端设备。

请参见图2A，为本申请实施例提供了一种矢量图形的绘制方法的流程示意图。如图2A所示，本申请实施例的所述方法可以包括以下步骤：

S201、解析矢量图形文件。

具体的，矢量图形文件用于描述矢量图形中包括的一个或多个图案的颜色、形状、轮廓、大小和屏幕位置等配置信息的文件，矢量图形文件的格式包括但不限于SWF(Shockwave Format，波形格式)、SVG(Scalable Vector Graphics，可扩展矢量图形)、WMF(Windows Meta file，视窗元文件)、EMF(Enhanced MetaFile，增强元文件)。其中，矢量图形文件可以通过一段代码来表示，不需要存储像素点的相关信息，具有存储空间小的特点。

其中，终端设备在接收到用户对矢量图形文件的打开操作，终端设备解析矢量图形文件，获得矢量图形文件中的至少一个图案(路径)的配置信息，图案是由一段或多段线条围起来的封闭区域，该线条可以是直线也可以是曲线，终端设备根据配置信息在用户界面上进行绘制得到矢量图形。其中，终端设备可以在本地获取矢量图形文件，例如：终端设备在本地的指定路径中获取矢量图形文件；矢量图形文件也可以是存储在远程的服务器上，终端设备也可以在服务器上获取矢量图形文件。

其中，对矢量图形文件的打开操作可以是用户通过鼠标、键盘或触摸面板等输入设备触发的，例如：终端设备上显示矢量图形文件的图标，用户移动鼠标光标移动到该图标上，然后双击该图标后，终端设备在图形对应的指定路径中获取矢量图形文件，解析矢量图形文件中的配置信息，根据配置信息在用户界面上渲染矢量图形。又例如：用户通过控制键盘的方向键来选择图标，被选中的图标以高亮的方式进行显示，用户点击回车键后，终端设备在选中的图标对应的指定路径中获取矢量图形文件，解析矢量图形文件中的配置信息，终端设备根据配置信息在用户界面上渲染出矢量图形。又例如：终端设备在触摸屏上检测到图标上的单击触摸操作时，终端设备在该图标对应的指定路径中获取矢量图形文件，解析矢量图形文件中的配置信息，终端设备根据配置信息在显示屏上渲染出矢量图形，其中，对矢量图形的打开操作不限于单击触摸操作，也可以是其他任意类型的触摸操作，本申请实施例不作限制。

在一种可能的实现方式中，矢量图形文件包括文件头部、图形元数据区和图层数据区，文件头部包括图层数、作者和创建日期中的一种或多种，图层元数据区包括图层标识、图层填充状态指示位和图层位置信息中的一种或多种，图层数据区包括图案描述信息。图层数表示矢量图形包含的图层的数量，图层标识标识图层的身份标识，不同的图层具有不同的图层标识，图层填充状态指示位表示该图层是否可填充；图层位置信息表示图层的位置，例如：图层位置信息使用数字来表示；图案描述信息用于描述图层中的图案的形状和位置。

例如：参见图2B，为本申请实施例提供的一种矢量图形文件的结构示意图，矢量图形文件包括文件头部、图形元数据区和图层数据区，文件头部包括图层数、作者和创建日期，图层数为3层，作者为小明，创建日为4月15号。图形元数据区包括图层标识、图层填充状态指示位和图层位置信息，图层标识分别为：图层0、图层1和图层2；图层0的图层填充状态指示位为“是”，表示图层0可填色；图层1的图层填充状态指示位为“否”，表示图层1不可填色，图层2的图层填充状态指示位为“否”，表示图层2不可填色。图层数据区包括图层标识和图案描述信息，例如：图层0包括的图案是在图层的右上角绘制一个圆。

S202、根据矢量图形文件确定多个图层的位置。

具体的，矢量图形文件中包括表示图层位置的信息，终端根据矢量图形文件确定多个图层的位置，以及确定各个图层中包括的图案的形状和位置。

参见图2C所示，矢量图形文件中表示具有4个图层，从左到右分别为图层1、图层2、图层3和图层4，图层1中包括的图案为三角形，图层2中包括的图案为圆形，图层3中包括的图案为正方形，图层4中包括的图案为长方形，4个图层之间的位置关系为，图层4为最底层，图层3叠放在图层4的上方，图层2叠放在图层3的上方，图层1叠放在图层2的上方。

S303、根据从下到上的顺序对多个图层进行绘制，绘制完成后得到矢量图形。

具体的，终端设备根据从下到上的顺序依次对多个图层进行绘制，绘制完成后显示矢量图形。

例如：参见图2C所示，根据4个图层的位置关系将4个图层进行叠放后的矢量图形如下排的右边的图形。

可选的，本申请实施例除上述的S201～S203之外，所述矢量图形的绘制方法还可以包括：

接收针对矢量图形的填充操作，根据填充操作的位置确定目标图案，将目标图案所在的图层以上的所有图层进行合并得到第一图层，以及将目标图案所在图层以下的所有图层进行合并得到第二图层，对目标图案进行填充。

具体的，填充操作用于对矢量图形中的目标图案进行填充，用户可以通过鼠标、键盘或触摸面板等输入装置触发填充操作。例如：用户将鼠标光标移动到用户界面的矢量图形上，然后在矢量图形上进行双击后触发填充操作，表示对矢量图形进行颜色填充。又例如：用户控制键盘的方向键移动鼠标光标的位置，将鼠标光标移动到用户界面的矢量图形上，然后点击键盘上的回车键触发填充操作，表示对矢量图形进行颜色填充。又例如：终端设备为触摸屏设备，用户通过手指单击用户界面上显示的矢量图形，终端设备检测到矢量图形上发生的单击触摸操作，触发对矢量图形的填充操作。

其中，触摸操作的类型并不限于单击触摸操作，也可以是双击触摸操作、具有压力感应的重压触摸操作等，触摸操作可以包括触摸点的数量、触摸点的压力值、触摸点的接触面积中的一种或多种。

其中，填充操作的位置表示填充操作在屏幕上发生的位置，该位置可以使用屏幕坐标来表示，位置可以是鼠标光标的位置或触摸事件发生的位置。终端设备预存储或预配置为矢量图形中至少一个图案的屏幕坐标范围，终端设备检测到填充操作的屏幕坐标，确定填充操作落在至少一个图案的哪个图案(即目标图案)。

其中，矢量图形具有一个图层，即所有的图案均位于同一个图层中，那么在矢量图形中包括多个图案的情况下，多个图案之间没有相互重叠，避免填充位置的位置对应多个图案的问题。

其中，矢量图形具有多个图层，矢量图形中包括的至少一个图案可能分别位于不同的图层，在进行填充操作时，图层高的图案的优先级高于图层低的图案的优先级。如果填充操作对应多个图案的情况下，只会填充图层位置最高的图案。

其中，目标图案可以为一个封闭的区域，终端设备可以根据预配置的颜色或当前选择的颜色对目标图案进行填充，目标图案中填充的颜色可以用是纯色、混合色、渐变色或具有纹理的颜色，本申请不作限制。

举例来说，参见图2D所示，为本申请实施例提供的一种确定目标图案的方法，矢量图形为图2C中的矢量图形，矢量图形包括4个图层，图层的位置分布和图案分布参见图2C所示。终端矢量图形上检测到填充操作，填充操作的类型为点击操作，终端获取点击操作的屏幕坐标，发现正方形和长方形都包括点击操作的屏幕操作，终端根据预先配置的图案和图层的映射关系，确定正方形位于图层3，长方形位于图层4，因此正方形所在的图层高于长方形所在的图层，终端将正方形作为待填充的目标图案。

又举例来说，参见图2E所示，为本申请实施例提供的一种矢量图形的绘制方法，根据图2D的描述，正方形为目标图案，需要对正方形进行填充，正方形位于图层3，图层3以上的的图层有图层1和图层2，图层1包括三角形，图层2包括圆形，将图层1和图层2进行合并得到的图层为第一图层，参见图2E的第一行，第一图层包括三角形和圆形。图层3以下的图层为图层4，图层4中包括长方形，由于图层3以下的图层的数量只有1个，将图层4单独作为一个图层。对图层3中的目标图案正方形进行填充，由于正方形上方覆盖有圆形，终端根据圆形对正方形进行蒙版裁剪，对裁剪后的图形进行填充。

又举例来说，参见图2F所示，为本申请实施例提供的一种填充方法的原理示意图，在绘制的过程中，由于圆形覆盖在矩形的上方，待填充的图形为圆形，根据圆形对矩形中待填充的区域进行裁剪，然后以中心扩散的方式对裁剪后的区域进行颜色填充。

本申请实施例的方案在执行时，终端对对矢量图形文件进行解析，确定多个图层的位置以及各个图层包括的图案的位置和形状，根据从下到上的顺序对多个图层进行绘制，绘制完成后显示矢量图形，采用分层的方式绘制矢量图形，在多个图层中的任意一个图层发生更新时，只需要对发生更新的图层进行重绘制，相对于现有的位图所有的图案都位于同一图层上，本申请实施例不需要对所有的图层进行重绘制，减少了重绘制的数据量，相应的降低了重绘制的时间。

请参见图3A，为本申请实施例提供了一种矢量图形的绘制方法的流程示意图。本实施例以矢量图形的绘制方法应用于终端设备中来举例说明。该矢量图形的绘制方法可以包括以下步骤：

S301、获取矢量图形文件。

具体的，矢量图形文件用于描述矢量图形中包括的一个或多个图案的颜色、形状、轮廓、大小和屏幕位置等配置信息的文件，矢量图形文件的格式包括但不限于矢量图形文件的格式包括但不限于：SWF(Shockwave Format，波形格式)、SVG(Scalable VectorGraphics，可扩展矢量图形)、WMF(Windows Meta file，视窗元文件)、EMF(Enhanced MetaFile，增强元文件)。其中，矢量图形文件可以通过一段代码来表示，不需要存储像素点的相关信息，具有存储空间小的特点。

例如：如图2B所示，矢量图形文件包括文件头部、图形元数据区和图层数据区，文件头部包括图层数、作者和创建日期，图层元数据区用于存放各个图层的填色状态标志位和叠放层次，填色状态标志位可以使用0和1来表示不同的填色状态，例如：标志位为0表示图层不可填色，标志位为1时表示图层可以填色。图层数据区用于存放各个图层的形状信息，例如：图层0的图案描述信息表示图层0中的图案为一个圆。

其中，矢量图形文件可以是存储在终端设备本地的路径中，也可以存储在远程的服务器中，终端设备在接收到用户触发的打开操作后，获取矢量图形文件，打开操作可以是用户通过鼠标、键盘或触摸面板等输入设备触发的。

举例来说，服务器中存储有多个矢量图形文件，终端设备向服务器发送下载某个矢量图形文件的HTTP(HyperText Transfer Protocol，超文本传输协议)请求，服务器响应该HTTP请求向终端设备发送携带矢量图形文件的HTTP响应，终端设备接收该矢量图形文件。

又举例来说，终端设备本地存储有多个矢量图形文件，多个矢量图形文件分别设置有一个快捷方式，快捷方式可以使用矢量图形文件的图标(缩略图)来表示，终端设备检测到图标上的打开操作时，获取图标指示的路径中获取矢量图形文件。

例如：参见图3B所示，终端设备为触摸屏设备，终端设备的用户界面上并排显示有3个图标，图标为矢量图形文件的快捷方式，终端设备检测到用户界面中第2个图标31上发生的单击触摸事件30，终端设备在指定路径中获取图标31对应的矢量图形文件。

S302、解析矢量图形文件。

具体的，终端解析矢量图形文件得到矢量图形的图层位置、图层中各个图案的形状、颜色和位置等配置信息。

S303、根据矢量图形文件确定多个图层的位置。

S304、根据从下到上的顺序对多个图层进行绘制，绘制完成后得到矢量图形。

具体的，终端设备解析矢量图形文件得到图案的配置信息，配置信息表示图案的形状、颜色、位置、大小和屏幕坐标等属性，终端设备根据配置信息进行渲染处理在用户界面上显示矢量图形。

参见图3B和图3C所示，终端设备检测到图标31上发生的单击触摸事件30后，获取图标31对应的矢量图形文件，解析矢量图形文件中各个图案的形状、颜色、位置大小和屏幕坐标等属性，然后进行渲染处理在显示屏上显示矢量图形32，可以看出，矢量图形32包括多个图层，每个图层上包括一个或多个图案，各个图案中未进行颜色填充。

S305、显示颜色托盘。

具体的，颜色托盘为用户界面上的一个区域，颜色托盘可以设置为可移动的，用户通过拖动颜色托盘将颜色托盘放置用户界面上指定的位置上。颜色托盘中包括多个候选的颜色，候选的颜色可以是纯色、渐变色或带纹理的颜色。

在一种可能的实施方式中，颜色托盘包括颜色候选区、选中颜色区和最近使用颜色区，颜色候选区包含所有的颜色，选中颜色区表示当前选中的颜色，最近使用颜色区表示最近使用的预设数量的颜色。

其中，终端设备可以在显示矢量图形的的同时，显示颜色托盘，也可以是终端设备接收到用户触发的填充指示指令后，显示颜色托盘。例如：显示矢量图形的用户界面上设置一个填充按钮，用户点击该填充按钮触发生成填充指示指令，终端设备检测到填充指示指令后在用户界面上显示颜色托盘。

S306、接收针对颜色托盘的颜色选择指令。

具体的，终端设备接收针对颜色托盘的颜色选择指令，颜色选择指令可以是用户通过鼠标、键盘或触摸面板等输入设备触发的。

例如：终端设备显示颜色托盘，用户移动鼠标光标在颜色托盘上，然后双击该颜色托盘中的颜色，终端设备在颜色托盘上检测到鼠标双击事件，获取鼠标双击事件的位置，确定该位置对应的颜色，将该颜色作为目标颜色。

又例如：终端设备显示颜色托盘，用户的手指移动在颜色托盘上，然后单击颜色托盘中的颜色，终端设备在颜色托盘上检测到单击触摸事件，终端设备获取单击触摸事件的位置，确定该位置对应的颜色，将该颜色作为目标颜色。

又例如：终端设备在矢量图形的下方显示颜色托盘，用户通过控制键盘的方向键来选择颜色托盘中的颜色，然后点击回车键选择所需的颜色，将选择的颜色作为目标颜色。

参见图3C所示，矢量图形32的下方显示有颜色托盘33，颜色托盘33包括候选颜色区332、选中颜色区331和最近使用颜色区330。候选颜色区332中包括终端设备支持的所有的颜色，颜色包括但不限于纯色、渐变色或带纹理的颜色，选中颜色区331中包含当前选中的颜色，最近使用颜色区330中包含最近使用的4种颜色。终端设备在候选颜色区332上检测到单击触摸事件34，终端设备获取单击触摸事件34的位置，确定单击触摸事件34的位置对应候选颜色区332中的第2排的第2个颜色，终端设备在选择颜色区331中显示该选中的颜色，如果最近使用颜色区330中没有该选中的颜色，在最近使用颜色区中显示该选中的颜色。如果用户对当前选择的选择的颜色不满意，可以重复执行S304的步骤，直到选择所需的颜色。

S307、将颜色选择指令在多个颜色中选择的颜色作为目标颜色。

具体的，终端设备将根据鼠标事件、触摸事件或键盘事件生成的颜色选择指令在多个颜色中选择的颜色作为目标颜色，目标颜色用于对矢量图形中的图案进行填充。

S308、接收针对矢量图形的填充操作。

具体的，填充操作用于对矢量图形中的图案进行颜色填充，填充操作可以是用户通过鼠标、键盘或触摸面板等输入设备触发的。例如：终端设备在用户界面上显示矢量图形，用户移动鼠标光标到矢量图形上，然后执行双击动作，终端设备在矢量图形上检测到双击鼠标操作，确定该双击鼠标操作为对矢量图形进行填充的填充操作。

又例如：终端设备在用户界面上显示矢量图形，用户移动手指到矢量图形上，然后执行单击动作，终端设备在矢量图形上检测到单击触摸操作，确定该单击触摸操作为对矢量图形进行填充的填充操作。

参见图3D所示，终端设备的用户界面上显示有矢量图形，终端设备在矢量图形上检测到单击触摸事件39，单击触摸事件39的位置在虚线框的位置，终端设备确定该单击触摸事件为对矢量图形进行填充的填充操作。

其中，图3D所示的用户界面上还显示有更多选项控件35、清除控件36、上一步操作控件37和下一步操作控件38，更多选项控件35用户触发显示多个其他功能控件，例如：分享控件、渲染效果控件、缩放控件等，分享控件用于将填充后的矢量图形分享到指定的社交软件或社交社区中，渲染效果控件用于变更对目标图案进行颜色填充时的渲染效果，缩放控件用于放大或缩小当前的矢量图形，清除控件36用于取消当前的操作，上一步操作控件37用于恢复上一步操作，下一步操作控件38用于恢复下一步操作。

S309、获取填充操作的屏幕坐标。

具体的，终端设备获取填充操作的屏幕坐标，终端设备已知矢量图形的显示位置，因此终端设备可以根据填充操作的屏幕坐标确定填充操作在矢量图形中的位置。

例如：填充操作为鼠标事件，在Windows视窗操作系统中，终端设备可以使用使用监听鼠标事件，以及获取鼠标事件的屏幕坐标。

又例如：在Android系统中，终端设备可以使用监听触摸事件，以及实时监测触摸事件的屏幕坐标。

S310、根据屏幕坐标确定填充操作在矢量图形中对应的一个或多个图案。

具体的，终端设备预先根据矢量图形文件中的配置信息得到矢量图形中一个或多个图案的屏幕坐标范围，然后终端设备根据填充操作的屏幕坐标，以遍历的方式对一个或多个图案的屏幕坐标范围进行查询，判断填充操作落入到哪个图案中。在矢量图形存在多个图层的情况下，填充操作落入的图案的数量可能不止一个，那么需要进一步的获取各个图案的图层位置。

S311、获取一个或多个图案的图层位置。

具体的，在填充操作对应多个图案的情况下，终端设备根据矢量图形文件中的配置信息确定各个图案的图层位置。

举例来说，参见图3E所示，填充操作对应的图案为图案40和图案41，终端设备根据矢量图形文件中的配置信息确定图案40位于图案41之上。例如：矢量图形文件中表示图层位置的字段为layer，不同的图层使用比特位来表示，比特位的位数和图层的总数量有关，假设矢量图形的图层的总数量为4层，层1对应的比特位为00，层2对应的比特位为01、层3对应的比特位为10，层4对应的比特位为11，层1位于层2的上方，层2位于层3的上方，层3位于层4的上方。终端设备确定填充操作对应的图案40位于图层2，图案41位于图层3，显然图案40位于图案41的上方。

S312、将一个或多个图案中图层位置最高的图案作为目标图案。

具体的，图层位置最高的图案表示位于最上面的图层对应的图案，例如，参见图3E所示，填充操作在矢量图形中对应图案40和图案41，终端设备查询到图案40位于图层1，图案41位于图层2，图层1位于图层2的上方，因此终端设备将填充其余40作为待填充的目标图案，该图标图案在图3D中对应320。

S313、将目标图案所在的图层以上的所有图层进行合并得到第一图层，以及将目标图案所在图层以下的所有图层进行合并得到第二图层。

具体的，矢量图形具有多个图层，将目标图案所在图层的以上所有图层进行合并，以及将目标图案所在图层的以下所有图层进行合并，避免分别对每个图层进行绘制，能减少图形绘制的运算量。

S314、确定目标图案的最小外接矩形。

具体的，目标图案为一个封闭的区域，目标图案的形状为规则图形，也可以是不规则图形。最小外接矩形是指以二维坐标表示的若干二维形状(例如点、直线、多边形)的最大范围，即以给定的二维形状各顶点中的最大横坐标、最小横坐标、最大纵坐标、最小纵坐标定下边界的矩形。这样的一个矩形包含给定的二维形状，且边与坐标轴平行。最小外接矩形是最小外接框(minimum bounding box)的二维形式。

S315、计算最小外接矩形的中心点。

具体的，最小外接矩形的中心点为最小外接矩形的两个对角线相交后的交点。终端设备根据最小外接矩形的四个顶点的坐标确定两个对角线的位置，然后根据两个对角线相交点确定中心点。

S316、对目标图案进行蒙版裁剪，并按顺序与所述第一图层和所述第二图层进行合并绘制。

具体的，终端确定目标图案上覆盖的图案，以该覆盖的图案为蒙版对目标图案进行裁剪，然后按照第二图层、目标图层所在的图层和第一图层的顺序分别进行绘制，由于第一图层和第二图层为合并图层，在绘制过程中有效的降低了绘制的时间。

其中，终端设备将最小外接矩形的中心点作为对目标图案填充操作的起始点，然后以起始点开始进行填充操作，终端设备在进行填充操作时只填充目标图案中的位置，并不会填充除目标区域之外的区域。终端设备从中心点开始以均速的方式对目标图案进行颜色填充。例如：以中心点开始均速为200像素/秒的速度进行填充，在不超出目标图案的内接圆的情况下，最外层的轮廓为一个圆形。

参见图3F所示，终端设备确定的目标图案50，终端设备确定目标图案50的最小外接矩形51，然后确定最小外接矩形51的中心点，将最小外接矩形51的中心点作为填充操作的初始点，从初始点开始以预设的速度均速开始颜色填充，例如：在t1时刻，填充的轮廓为一个圆形52，在t1时刻之后的t2时刻，填充的轮廓为圆形53。

本申请实施例的方案在执行时，终端对对矢量图形文件进行解析，确定多个图层的位置以及各个图层包括的图案的位置和形状，根据从下到上的顺序对多个图层进行绘制，绘制完成后显示矢量图形，采用分层的方式绘制矢量图形，在多个图层中的任意一个图层发生更新时，只需要对发生更新的图层进行重绘制，相对于现有的位图所有的图案都位于同一图层上，本申请实施例不需要对所有的图层进行重绘制，减少了重绘制的数据量，相应的降低了重绘制的时间。

下述为本申请装置实施例，可以用于执行本申请方法实施例。对于本申请装置实施例中未披露的细节，请参照本申请方法实施例。

请参见图4，其示出了本申请一个示例性实施例提供的矢量图形的填充装置的结构示意图。该装置可以通过软件、硬件或者两者的结合实现成为终端的全部或一部分。该装置4包括：解析模块40、位置确定模块41和绘制模块42。

解析模块40，用于解析矢量图形文件。

位置确定模块41，与解析模块40相连，用于根据所述矢量图形文件确定多个图层的位置；其中，所述图层为承载一个或多个图案的容器。

绘制模块42，用于根据从下到上的顺序对所述多个图层进行绘制，绘制完成后得到矢量图形。

可选的，装置4还包括：

接收模块，用于接收针对矢量图形的填充操作；

图案确定模块，用于根据填充操作的位置确定矢量图形中的目标图案；

合并模块，用于对目标图形所在的图层以上的所有图层进行合并得到第一图层，以及将所述目标图案所在的图层以下的所有图层进行合并得到第二图层；

填充模块，用于对目标图案进行填充，以及根据从下到上的顺序分别绘制所述第二图层、所述目标图案所在的图层和所述第一图层。

可选的，所述填充模块具体用于：基于蒙版裁剪的方式对所述目标图案进行填充。

可选的，图案确定模块具体用于：获取所述填充操作的屏幕坐标；

确定所述矢量图形中所有包括所述屏幕坐标的图案；

将所述所有包括所述屏幕坐标的图案中图层最高图案，作为目标图案。

可选的，所述矢量图形文件包括：所述矢量图形文件包括：文件头部、图层元数据区和图层数据区，所述图层头部包括图层数、作者和创建日期中的一种或多种，图层元数据区包括图层标识、图层填充状态指示位和图层位置信息中的一种或多种，图层数据区包括图案描述信息。

需要说明的是，上述实施例提供的矢量图形的绘制装置在执行矢量图形的绘制方法时，仅以上述各功能模块的划分进行举例说明，实际应用中，可以根据需要而将上述功能分配由不同的功能模块完成，即将设备的内部结构划分成不同的功能模块，以完成以上描述的全部或者部分功能。另外，上述实施例提供的矢量图形的绘制装置与矢量图形的绘制方法实施例属于同一构思，其体现实现过程详见方法实施例，这里不再赘述。

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

在本申请实施例中，在需要对矢量图形中的目标图案进行填充操作时，将目标图案以上的所有图层进行合并得到第一图层，以及将目标图层以下的所有图层进行合并得到第二图层，在对目标图案填充后，根据从下到上的顺序分别绘制第二图层、目标图案所在的图层和第一图层，本申请实施例对不需进行填充的图层进行合并，在绘制时避免分别对不填充的图层进行绘制，进一步减少了绘制的数据量。

本申请实施例还提供了一种计算机存储介质，所述计算机存储介质可以存储有多条指令，所述指令适于由处理器加载并执行如上述图2A-图3F所示实施例的方法步骤，具体执行过程可以参见图2A-图3F所示实施例的具体说明，在此不进行赘述。

本申请还提供了一种计算机程序产品，该计算机程序产品存储有至少一条指令，所述至少一条指令由所述处理器加载并执行以实现如上各个实施例所述的矢量图形的绘制方法。

请参见图5，为本申请实施例提供了一种终端设备的结构示意图。如图5所示，所述终端设备1000可以包括：至少一个处理器1001，至少一个网络接口1004，用户接口1003，存储器1005，至少一个通信总线1002。

其中，通信总线1002用于实现这些组件之间的连接通信。

其中，用户接口1003可以包括显示屏(Display)、摄像头(Camera)，可选用户接口1003还可以包括标准的有线接口、无线接口。

其中，网络接口1004可选的可以包括标准的有线接口、无线接口(如WI-FI接口)。

其中，处理器1001可以包括一个或者多个处理核心。处理器1001利用各种接口和线路连接整个终端1000内的各个部分，通过运行或执行存储在存储器1005内的指令、程序、代码集或指令集，以及调用存储在存储器1005内的数据，执行终端1000的各种功能和处理数据。可选的，处理器1001可以采用数字信号处理(Digital Signal Processing，DSP)、现场可编程门阵列(Field-Programmable GateArray，FPGA)、可编程逻辑阵列(ProgrammableLogicArray，PLA)中的至少一种硬件形式来实现。处理器1001可集成中央处理器(CentralProcessing Unit，CPU)、图像处理器(Graphics Processing Unit，GPU)和调制解调器等中的一种或几种的组合。其中，CPU主要处理操作系统、用户界面和应用程序等；GPU用于负责显示屏所需要显示的内容的渲染和绘制；调制解调器用于处理无线通信。可以理解的是，上述调制解调器也可以不集成到处理器1001中，单独通过一块芯片进行实现。

其中，存储器1005可以包括随机存储器(RandomAccess Memory，RAM)，也可以包括只读存储器(Read-Only Memory)。可选的，该存储器1005包括非瞬时性计算机可读介质(non-transitory computer-readable storage medium)。存储器1005可用于存储指令、程序、代码、代码集或指令集。存储器1005可包括存储程序区和存储数据区，其中，存储程序区可存储用于实现操作系统的指令、用于至少一个功能的指令(比如触控功能、声音播放功能、图像播放功能等)、用于实现上述各个方法实施例的指令等；存储数据区可存储上面各个方法实施例中涉及到的数据等。存储器1005可选的还可以是至少一个位于远离前述处理器1001的存储装置。如图5所示，作为一种计算机存储介质的存储器1005中可以包括操作系统、网络通信模块、用户接口模块以及矢量图形的绘制应用程序。

在图5所示的终端设备1000中，用户接口1003主要用于为用户提供输入的接口，获取用户输入的数据；而处理器1001可以用于调用存储器1005中存储的矢量图形的绘制应用程序，并具体执行以下操作：

解析矢量图形文件；

根据所述矢量图形文件确定多个图层的位置；其中，所述图层为承载一个或多个图案的容器；

根据从下到上的顺序对所述多个图层进行绘制，绘制完成后得到矢量图形。

在一个实施例中，处理器1001还用于执行：

通过网络接口1004接收针对所述矢量图形的填充操作；

根据填充操作的位置确定所述矢量图形中的目标图案；

将所述目标图案所在的图层以上的所有图层进行合并得到第一图层，以及将所述目标图案所在的图层以下的所有图层进行合并得到第二图层；

对所述目标图案进行填充，以及根据从下到上的顺序分别绘制所述第二图层、所述目标图案所在的图层和所述第一图层。

在一个实施例中，处理器1001对所述目标图案进行填充，包括：

基于蒙版裁剪的方式对所述目标图案进行填充。

在一个实施例中，处理器1001执行所述根据填充操作的位置确定所述矢量图形中的目标图案，包括：

获取所述填充操作的屏幕坐标；

确定所述矢量图形中所有包括所述屏幕坐标的图案；

将所述所有包括所述屏幕坐标的图案中图层最高的图案，作为所述目标图案。

在一个实施例中，处理器1001还用于执行：

指示显示器在用户界面上显示矢量图形；其中，所述矢量图形包括至少一个图案；

通过用户接口1003接收针对所述矢量图形的填充操作；

根据所述填充操作的位置在所述至少一个图案中确定目标图案；

对所述目标图案进行颜色填充。

在一个实施例中，处理器1001指示显示器在用户界面上显示矢量图形，包括：

获取矢量图形文件；其中，所述矢量图形文件包括所述至少一个图案的配置信息；

解析所述矢量图形文件得到矢量图形。

在一个实施例中，处理器1001根据所述填充操作的位置在所述至少一个图案中确定目标图案，包括：

获取所述填充操作的屏幕坐标；

根据所述屏幕坐标确定所述填充操作在所述矢量图形中对应的一个或多个图案；

获取所述一个或多个图案的图层位置；

将所述一个或多个图案中图层最高的图案作为所述目标图案。

在一个实施例中，处理器1001还用于执行：指示用户接口1003接收颜色选择指令，以及根据颜色选择指令选择目标颜色；其中，所述目标颜色用于对所述目标图案进行颜色填充。

在一个实施例中，处理器1001通过用户接口1003接收颜色选择指令，以及根据所述颜色指令选择目标颜色包括：

指示显示器显示颜色托盘；其中，所述颜色托盘中包括多个颜色；

通过用户接口1003接收针对所述颜色托盘的颜色选择指令；

将所述颜色选择指令在所述多个颜色中选择的颜色作为目标颜色。

在一个实施例中，所述颜色托盘包括颜色候选区、选中颜色区和最近使用颜色区。

在一个实施例中，处理器1001对目标图案进行颜色填充包括：

确定所述目标图案的最小外接矩形；

计算所述最小外接矩形的中心点；

以所述中心点为起始点通过匀速扩散的方式对所述目标图案进行颜色填充。

在本申请实施例中，终端设备对矢量图形文件进行解析后在用户界面上显示矢量图形，终端设备接收针对显示屏上显示的矢量图形的填充操作，根据填充操作的位置在至少一个图案中确定目标图案，对目标图案进行颜色填充，矢量图形由一个或多个图案(即路径)组成，通过触摸事件或鼠标事件触发的填充操作，确定填充操作落在矢量图形中的哪一个图案，实现了对矢量图形中任意一个图案的颜色填充，填充后的矢量图形占用的存储空间小，不需要保存目标图案的颜色信息，另外，填充后的矢量图形放大处理不会发生失真的现象。

本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的程序可存储于一计算机可读取存储介质中，该程序在执行时，可包括如上述各方法的实施例的流程。其中，所述的存储介质可为磁碟、光盘、只读存储记忆体或随机存储记忆体等。

以上所揭露的仅为本申请较佳实施例而已，当然不能以此来限定本申请之权利范围，因此依本申请权利要求所作的等同变化，仍属本申请所涵盖的范围。

Claims (12)

1.一种矢量图形的绘制方法，其特征在于，所述方法包括：

解析矢量图形文件；

根据所述矢量图形文件确定多个图层的位置；其中，所述图层为承载一个或多个图案的容器；

根据从下到上的顺序对所述多个图层进行绘制，绘制完成后得到矢量图形。

2.根据权利要求1所述的方法，其特征在于，所述根据从下到上的顺序对所述多个图层进行绘制，绘制完成后得到矢量图形之后，还包括：

接收针对所述矢量图形的填充操作；

根据填充操作的位置确定所述矢量图形中的目标图案；

将所述目标图案所在的图层以上的所有图层进行合并得到第一图层，以及将所述目标图案所在的图层以下的所有图层进行合并得到第二图层；

对所述目标图案进行填充，以及根据从下到上的顺序分别绘制所述第二图层、所述目标图案所在的图层和所述第一图层。

3.根据权利要求2所述的方法，其特征在于，所述对所述目标图案进行填充，包括：

基于蒙版裁剪的方式对所述目标图案进行填充。

4.根据权利要求2所述的方法，其特征在于，所述根据填充操作的位置确定所述矢量图形中的目标图案，包括：

获取所述填充操作的屏幕坐标；

确定所述矢量图形中所有包括所述屏幕坐标的图案；

将所述所有包括所述屏幕坐标的图案中图层最高的图案，作为所述目标图案。

5.根据权利要求1至4任意一项所述的方法，其特征在于，所述矢量图形文件包括：文件头部、图层元数据区和图层数据区，所述图层头部包括图层数、作者和创建日期中的一种或多种，图层元数据区包括图层标识、图层填充状态指示位和图层位置信息中的一种或多种，图层数据区包括图案描述信息。

6.一种矢量图形的绘制装置，其特征在于，包括：

解析模块，用于解析矢量图形文件；

位置确定模块，用于根据所述矢量图形文件确定多个图层的位置；其中，所述图层为承载一个或多个图案的容器；

绘制模块，用于根据从下到上的顺序对所述多个图层进行绘制，绘制完成后得到矢量图形。

7.根据权利要求6所述的装置，其特征在于，还包括：

接收模块，用于接收针对矢量图形的填充操作；

图案确定模块，用于根据填充操作的位置确定矢量图形中的目标图案；

合并模块，用于对目标图形所在的图层以上的所有图层进行合并得到第一图层，以及将所述目标图案所在的图层以下的所有图层进行合并得到第二图层；

填充模块，用于对目标图案进行填充，以及根据从下到上的顺序分别绘制所述第二图层、所述目标图案所在的图层和所述第一图层。

8.根据权利要求7所述的装置，其特征在于，所述绘制模块具体用于：基于蒙版裁剪的方式对所述目标图案进行填充。

9.根据权利要求8所述的装置，其特征在于，所述图案确定模块具体用于：获取所述填充操作的屏幕坐标；

确定所述矢量图形中所有包括所述屏幕坐标的图案；

将所述所有包括所述屏幕坐标的图案中图层最高图案，作为目标图案。

10.根据权利要求6至9任意一项所述的装置，其特征在于，所述矢量图形文件包括：所述矢量图形文件包括：文件头部、图层元数据区和图层数据区，所述图层头部包括图层数、作者和创建日期中的一种或多种，图层元数据区包括图层标识、图层填充状态指示位和图层位置信息中的一种或多种，图层数据区包括图案描述信息。

11.一种计算机存储介质，其特征在于，所述计算机存储介质存储有多条指令，所述指令适于由处理器加载并执行如权利要求1～5任意一项的方法步骤。

12.一种终端，其特征在于，包括：处理器和存储器；其中，所述存储器存储有计算机程序，所述计算机程序适于由所述处理器加载并执行如权利要求1～5任意一项的方法步骤。