CN107221016B - SVG格式的Path图形的处理方法及其装置 - Google Patents

Abstract

本申请公开一种SVG格式的Path图形的处理方法及其装置，其中该方法包括：获取SVG格式的Path字符串，根据所述Path字符串中的移动指令将所述Path字符串分割为一个或多个Path数组；将所述Path数组解析为对应的指令集合，所述指令集合中的每个指令包括：指令类型信息和第一坐标信息；将指令类型为绘制曲线的指令对应的曲线分割为一个或多个线段，计算每一线段对应的坐标信息，并将该线段对应的坐标信息存储为与该指令的第一坐标信息对应的第二坐标信息；根据所述指令集合中的指令所对应的第一坐标信息或第二坐标信息绘制Path图形。通过本申请，能够检测鼠标点击操作并能够计算Path图形的外接矩形范围。

Description

SVG格式的Path图形的处理方法及其装置

技术领域

本申请涉及计算机技术领域，尤其涉及一种在Canvas里实现SVG格式的Path图形的处理方法及其装置。

背景技术

路径(Path)字符串是在可缩放矢量图形(Scalable Vector Graphics，简称SVG)中常用的一个非常方便而且强大的用来描述任意图形的字符串格式。Path字符串中包含了很多的具体绘制图形的过程指令，只需要设定少量的点，就可以创建平滑流畅的线条(比如曲线)。虽然使用polyline元素也能实现类似的效果，但是必须设置大量的点(点越密集，越接近连续，看起来越平滑流畅)，并且这种做法不能够放大(放大后，点的离散更明显)。

Canvas是Html 5规范中的画布元素，Canvas本身只具有非常底层的绘图命令，比如Lineto(画线)、arc(画圆)等，其并没有提供像SVG那样的原生Path对象支持。现有技术中，如需要检测任意的鼠标操作是否点击了Path图形的区域，可以通过Canvas API或者像素检测的方法实现。但是，上述方案都存在若干缺陷：

(1)Canvas的isPointInPath()是一个非常重要的函数，其作用是判断某一点是否是在某个路径内，其语法结构为：Context.isPointInPath(x,y)；其中，x和y表示一个点的坐标。但是，isPointInPath只对当前路径有效，即受限于只支持检测Canvas中最后的Path状态；并且完全依赖Canvas的上下文环境(context)，无法脱离canvas.context环境使用；

(2)像素检测方法需要独立开设一个Canvas专门用来做像素检测，造成内存的浪费。

此外，上述的Canvas API或者像素检测的方法都无法检测出Path图形的外接矩形范围。

发明内容

本申请的主要目的在于提供一种SVG格式的Path图形的处理方法及其装置，以克服现有技术中的上述问题。

根据本申请实施例还提供了一种SVG格式的Path图形的处理方法，其包括：获取SVG格式的Path字符串，根据所述Path字符串中的移动指令将所述Path字符串分割为一个或多个Path数组；将所述Path数组解析为对应的指令集合，所述指令集合中的每个指令包括：指令类型信息和第一坐标信息；将指令类型为绘制曲线的指令对应的曲线分割为一个或多个线段，计算每一线段对应的坐标信息，并将该线段对应的坐标信息存储为与该指令的第一坐标信息对应的第二坐标信息；根据所述指令集合中的指令所对应的第一坐标信息或第二坐标信息绘制Path图形。

其中，所述指令类型为绘制曲线指令包括：绘制三次方程式贝塞尔曲线指令、绘制二次方程式贝塞尔曲线指令、绘制椭圆圆弧指令。

其中，将指令类型为绘制曲线指令对应的曲线分割为一个或多个线段，计算每一线段对应的坐标信息，包括：对于绘制三次方程式贝塞尔曲线指令或绘制二次方程式贝塞尔曲线指令，计算该指令对应的曲线上的每个点的坐标信息，按照预定像素间隔获取该曲线上的点作为分割点将曲线分割为一个或多个线段，并获取分割点的坐标信息作为该指令的第二坐标信息。

其中，将指令类型为绘制曲线指令对应的曲线分割为一个或多个线段，计算每一线段对应的坐标信息，包括：对于绘制椭圆圆弧指令，计算该指令对应的椭圆圆弧上的每个点的坐标信息，按照预定像素间隔获取该曲线上的点，如果所获取的点的数量小于椭圆圆弧的弧度数值，则根据所获取的点作为分割点将曲线分割为一个或多个线段，否则根据椭圆圆弧的弧度数值将曲线平均分割为一个或多个线段，并获取分割点的坐标信息作为该指令的第二坐标信息。

其中，所述根据所述指令集合中的指令所对应的第一坐标信息或第二坐标信息绘制Path图形，包括：遍历所述指令集合，如果所述指令集合中的指令存在对应的第二坐标信息则获取该第二坐标信息，否则获取该指令对应的第一坐标信息；在Canvas中根据获取的第一坐标信息和第二坐标信息连接绘制为Path图形。

其中，所述方法还包括：根据所述指令集合中的指令所对应的第一坐标信息或第二坐标信息计算所绘制的Path图形的外接矩形范围。

其中，所述方法还包括：接收到点击操作，判断所述点击操作对应的坐标信息是否在所述Path图形之上，若是则判定该点击操作点中Path图形区域；否则继续判断所述Path图形是否有颜色填充，如果有则根据所述Path图形进行非零环绕算法判断该点击操作是否点中path图形区域。

根据本申请实施例还提供了一种SVG格式的Path图形的处理装置，其包括：获取模块，用于获取SVG格式的Path字符串；拆分模块，用于根据所述Path字符串中的移动指令将所述Path字符串分割为一个或多个Path数组；解析模块，用于将所述Path数组解析为对应的指令集合，所述指令集合中的每个指令包括：指令类型信息和第一坐标信息；分割模块，用于将指令类型为绘制曲线指令对应的曲线分割为一个或多个线段，计算每一线段对应的坐标信息，并将该线段对应的坐标信息存储为与该指令的第一坐标信息对应的第二坐标信息；检测图形绘制模块，用于根据所述指令集合中的指令所对应的第一坐标信息或第二坐标信息绘制Path图形。

其中，所述指令类型为绘制曲线指令包括：绘制三次方程式贝塞尔曲线指令、绘制二次方程式贝塞尔曲线指令、绘制椭圆圆弧指令。

其中，所述分割模块包括：第一分割模块，用于对于绘制三次方程式贝塞尔曲线指令或绘制二次方程式贝塞尔曲线指令，计算该指令对应的曲线上的每个点的坐标信息，按照预定像素间隔获取该曲线上的点作为分割点将曲线分割为一个或多个线段，并获取分割点的坐标信息作为该指令的第二坐标信息。

其中，所述分割模块包括：第二分割模块，用于对于绘制椭圆圆弧指令，计算该指令对应的椭圆圆弧上的每个点的坐标信息，按照预定像素间隔获取该曲线上的点，如果所获取的点的数量小于椭圆圆弧的弧度数值，则根据所获取的点将曲线分割为一个或多个线段，否则根据椭圆圆弧的弧度数值将曲线平均分割为一个或多个线段，并获取分割点的坐标信息作为该指令的第二坐标信息。

其中，所述检测图形绘制模块，还用于遍历所述指令集合，如果所述指令集合中的指令存在对应的第二坐标信息则获取该第二坐标信息，否则获取该指令对应的第一坐标信息；在Canvas中根据获取的第一坐标信息和第二坐标信息连接绘制为Path图形。

其中，所述装置还包括：外接矩形计算模块，用于根据所述指令集合中的指令所对应的第一坐标信息或第二坐标信息计算所绘制的Path图形的外接矩形范围。

其中，所述装置还包括：点击操作检测模块，用于接收到点击操作，判断所述点击操作对应的坐标信息是否在所述Path图形之上，若是则判定该点击操作点中Path图形区域；否则继续判断所述Path图形是否有颜色填充，如果有则根据所述Path图形进行非零环绕算法判断该点击操作是否点中Path图形区域。

根据本申请实施例还提供了一种终端设备，其包括：存储器，其配置为存储程序；处理器，其与所述存储器相耦接，配置为处理所述存储器存储的程序；其中，所述处理器进一步包括：获取模块，用于获取SVG格式的Path字符串；拆分模块，用于根据所述Path字符串中的移动指令将所述Path字符串分割为一个或多个Path数组；解析模块，用于将所述Path数组解析为对应的指令集合，所述指令集合中的每个指令包括：指令类型信息和第一坐标信息；分割模块，用于将指令类型为绘制曲线指令对应的曲线分割为一个或多个线段，计算每一线段对应的坐标信息，并将该线段对应的坐标信息存储为与该指令的第一坐标信息对应的第二坐标信息；检测图形绘制模块，用于根据所述指令集合中的指令所对应的第一坐标信息或第二坐标信息绘制Path图形。

根据上述实施例，通过将Path图形中的曲线分割为折线并在Canvas中重新绘制Path图形，能够在不依赖任何上下文环境的情况下检测鼠标点击操作是否点中该Path图形区域；并且能够方便地计算出Path图形的外接矩形范围。

附图说明

此处所说明的附图用来提供对本申请的进一步理解，构成本申请的一部分，本申请的示意性实施例及其说明用于解释本申请，并不构成对本申请的不当限定。在附图中：

图1是根据本申请一个实施例的SVG格式的Path图形的处理方法的流程图；

图2是根据本申请另一实施例的SVG格式的Path图形的处理方法的流程图；

图3A至3C是根据本申请实施例的Path图形的示意图；

图4是根据本申请一个实施例的SVG格式的Path图形的处理装置的结构框图；

图5是根据本申请另一实施例的SVG格式的Path图形的处理装置的结构框图；

图6是根据本申请一个实施例的终端设备的结构框图；

图7是根据本申请一个实施例的处理器的结构框图。

具体实施方式

为使本申请的目的、技术方案和优点更加清楚，下面将结合本申请具体实施例及相应的附图对本申请技术方案进行清楚、完整地描述。显然，所描述的实施例仅是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。

图1是根据本申请一个实施例的SVG格式的Path图形的处理方法的流程图，如图1所示，所述方法至少包括以下步骤：

步骤S102，获取SVG格式的Path字符串，根据所述Path字符串中的移动指令将所述Path字符串分割为一个或多个Path数组；

在本申请实施例中，Path字符串中包含了很多的具体绘制图形的过程指令，根据Path字符串中的移动指令(M)将该Path字符串分割为一个或多个Path数组，其中每个Path数组对应为一个独立的Path图形，该独立的Path图形可以是直线、曲线、规则的或不规则的闭合图形，本申请对此不进行限制。

步骤S104，将所述Path数组解析为对应的指令集合，所述指令集合中的每个指令包括：指令类型信息和第一坐标信息。

步骤S106，将指令类型为绘制曲线的指令对应的曲线分割为一个或多个线段，计算每一线段对应的坐标信息，并将该线段对应的坐标信息存储为与该指令的第一坐标信息对应的第二坐标信息。

在本申请实施例中，所述绘制曲线指令至少包括绘制以下曲线的指令：三次方程式贝塞尔曲线(C)、二次方程式贝塞尔曲线(Q)、椭圆圆弧(A)等。

步骤S108，根据所述指令集合中的指令所对应的第一坐标信息或第二坐标信息绘制Path图形。

具体地，遍历所述指令集合，如果所述指令集合中的指令存在对应的第二坐标信息则获取该第二坐标信息，否则获取该指令对应的第一坐标信息；然后根据获取的指令所对应的第一坐标信息或第二坐标信息绘制Path图形。

根据上述实施例，通过将Path图形中的曲线分割为线段并在Canvas中重新绘制Path图形，能够在不依赖上下文环境的情况下检测任意的鼠标点击操作是否点中该Path图形的区域；并且能够方便地计算出Path图形的外接矩形范围。

下面结合图2详细描述上述各处理的细节。图2是根据本申请另一实施例的SVG格式的Path图形的处理方法的流程图，如图2所示，所述方法至少包括以下步骤：

步骤S202，获取SVG格式的Path字符串。例如，Path字符串为：

var path＝“M10 10 H 100 H 150 M10 315 L 110 215 A 30 50 0 0 1 162.55162.45 L 172.55 152.45 A 30 50-45 0 1 215.1 109.9 L 315 10 v 60 Q 350 100 350130 C 350 230 450 130 450 230 z”。

在上述的Path字符串中包括多种Path指令，其中：M表示移动指令、L表示直线绘制指令、H表示水平直线绘制指令、V表示垂直直线绘制指令、C表示三次方程式贝塞尔曲线绘制指令、Q表示二次方程式贝塞尔曲线绘制指令、A表示椭圆圆弧绘制指令、Z表示关闭指令。上述的Path指令仅为举例说明，并不限制本申请的保护范围。

参考图3A，是上述Path字符串在Canvas中的绘制效果的示意图。如图3A所示，上述的Path字符串所绘制的图形中包括2个独立的Path图形，即子路径301和子路径302，其中子路径301表示的图形为一直线，子路径302表示的图形为一不规则的闭合图形。

步骤S204，分析Path字符串，通过正则表达式将Path字符串分割为一个或多个Path数组。

具体地，根据所述Path字符串中的移动指令(M指令)将Path字符串分割为一个或多个Path数组，其中每个Path数组对应一个独立的Path图形。如果Path字符串表示一个独立的Path图形，则将该字符串分割为一个字符串数组；如果Path字符串表示多个独立的Path图形，则将该字符串分割为多个字符串数组。

承上述例子，通过正则表达式将Path字符串分割为Path数组的集合：

步骤S206，分别将每个Path数组解析为对应的指令集合，指令集合中的每个指令包括：指令类型信息和第一坐标信息，存储指令对应的第一坐标信息(points)。

承上述例子，将步骤S204中分割得到的每个Path数组解析成对应的指令集合：

通过上述实施例，将复杂的Path字符串解析为Canvas能够识别的底层Path指令集合，通过指定Path对象可以在Canvas上绘制任意的多边形。

步骤S208，遍历所有的指令，将A(椭圆圆弧)、C(三次贝塞尔曲线)、Q(二次贝塞尔曲线)等绘制曲线指令对应的曲线分割为一个或多个线段，即将绘制曲线指令对应的曲线分割为折线。

具体地，对于绘制三次方程式贝塞尔曲线指令或绘制二次方程式贝塞尔曲线指令，按照贝塞尔曲线的数学公式计算该指令对应的曲线上的每个像素点的坐标信息，按照预定像素间隔(例如5个像素)获取该曲线上的像素点作为分割点将曲线分割为一个或多个线段，并获取分割点的坐标信息作为该指令的第二坐标信息(_points)。

对于绘制椭圆圆弧指令，按照椭圆圆弧的数学公式计算该指令对应的椭圆圆弧上的每个点的坐标信息，按照预定像素间隔(例如5个像素)获取该曲线上的像素点，如果所获取的像素点的数量小于椭圆圆弧的弧度数值，则根据所获取的像素点作为分割点将曲线分割为一个或多个线段，获取分割点的坐标信息作为该指令的第二坐标信息(_points)；如果所获取的像素点的数量大于或等于椭圆圆弧的弧度数值，则根据椭圆圆弧的弧度数值将曲线平均分割为一个或多个线段，同样获取分割点的坐标信息作为该指令的第二坐标信息(_points)。

如图3B所示，303所示的点为绘制椭圆圆弧指令的分割点，304所示的点为绘制二次方程式贝塞尔曲线指令的分割点，305所示的点为绘制三次方程式贝塞尔曲线指令的分割点。

步骤S210，遍历所有的指令，根据所有指令对象对应的第一坐标信息或第二坐标信息连接绘制为一不规则多边形(Path图形)。也就是说，若指令存在对应的第二坐标信息则取第二坐标，否则取第一坐标。具体地，对于绘制三次方程式贝塞尔曲线指令、绘制二次方程式贝塞尔曲线指令或绘制椭圆圆弧指令，上述绘制曲线指令存在对应的第二坐标则获取第二坐标；而对于其他的绘制直线的指令只存在对应的第一坐标则获取第一坐标。依序获取绘制曲线指令的第二坐标信息以及绘制直线指令的第一坐标信息进行连接，在Canvas中绘制Path图形。

通过上述实施例得到的Path图形，在不依赖上下文环境的情况下能够检测任意的鼠标点击操作是否点中该Path图形的区域；并且通过Path图形能够方便地计算出Path图形的外接矩形范围。

步骤S212，根据Path图形上的每个点的坐标数据，可以快速地计算出该图形的外接矩形范围(rectRange)。

具体地，参考图3C，根据Path图形上每个点的坐标数据确定Path图形的上、下、左、右等各边界点的坐标信息，然后将各边界点连接起来就得到Path图形的外接矩形范围。

步骤S214，根据Path图形进行点击操作检测，具体地包括以下两部分：

(1)接收到点击操作后，首先判断点击操作对应的坐标信息是否在Path图形之上，若是则判定该点击操作点中所述Path图形区域。

(2)如果点击操作不在Path图形上，则继续判断图形是否有FillStyle(颜色)填充，如果有填充，根据Path图形进行非零环绕算法计算点击操作是否在Path图形的面积内，若是则判定该点击操作点中所述Path图形区域。

在本申请的实施例中，指令对应的第一坐标信息为points，指令对应的第二坐标信息为_points，将points和_points存储为Path图形的pointList(坐标数据表)属性。当绘制图形时采用points，点击检测时用_points(如果有_points则取_points，否则取points)，在兼顾图形绘制和点击检测的情况下有效实现了图形绘制与点击检测的分离。

图4是根据本申请一个实施例的SVG格式的Path图形的处理装置的结构框图，如图4所示，所述处理装置包括：

获取模块41，用于获取SVG格式的Path字符串；

拆分模块42，用于根据所述Path字符串中的移动指令将所述Path字符串分割为一个或多个Path数组；

解析模块43，用于将所述Path数组解析为对应的指令集合，所述指令集合中的每个指令包括：指令类型信息和第一坐标信息。

分割模块44，用于将指令类型为绘制曲线指令对应的曲线分割为一个或多个线段，计算每一线段对应的坐标信息，并将该线段对应的坐标信息存储为与该指令的第一坐标信息对应的第二坐标信息。

其中，所述指令类型为绘制曲线的指令包括：绘制三次方程式贝塞尔曲线指令、绘制二次方程式贝塞尔曲线指令、绘制椭圆圆弧指令。

进一步，所述分割模块44包括：

第一分割模块(未示出)，用于对于绘制三次方程式贝塞尔曲线指令或绘制二次方程式贝塞尔曲线指令，计算该指令对应的曲线上的每个点的坐标信息，按照预定像素间隔获取该曲线上的点作为分割点将曲线分割为一个或多个线段，并获取分割点的坐标信息作为该指令的第二坐标信息。

第二分割模块(未示出)，用于对于绘制椭圆圆弧指令，计算该指令对应的椭圆圆弧上的每个点的坐标信息，按照预定像素间隔获取该曲线上的点，如果所获取的点的数量小于椭圆圆弧的弧度数值，则根据所获取的点将曲线分割为一个或多个线段，否则根据椭圆圆弧的弧度数值将曲线平均分割为一个或多个线段，并获取分割点的坐标信息作为该指令的第二坐标信息。

检测图形绘制模块45，用于根据所述指令集合中的指令所对应的第一坐标信息或第二坐标信息绘制Path图形。

进一步地，所述检测图形绘制模块45，还用于遍历所述指令集合，如果所述指令集合中的指令存在对应的第二坐标信息则获取该第二坐标信息，否则获取该指令对应的第一坐标信息；在Canvas中根据获取的第一坐标信息和第二坐标信息连接绘制为Path图形。

图5是根据本申请另一实施例的SVG格式的Path图形的处理装置的结构框图。在图4的基础上，所述SVG格式的Path图形的处理装置还包括有：

外接矩形计算模块51，用于根据所述指令集合中的指令所对应的第一坐标信息或第二坐标信息计算所绘制的Path图形的外接矩形范围。

点击操作检测模块52，用于接收到点击操作，判断所述点击操作对应的坐标信息是否在所述Path图形之上，若是则判定该点击操作点中Path图形区域；否则继续判断所述Path图形是否有颜色填充，如果有则根据所述Path图形进行非零环绕算法判断该点击操作是否点中Path图形区域。

以上描述了SVG格式的Path图形的处理装置的内部功能和结构。实际中，该处理装置可实现为终端设备，如图6所示，该终端设备60包括：存储器61以及处理器62。

存储器61配置为存储程序。

另外，存储器61，还可被配置为存储其它各种数据以支持在终端设备上的操作。这些数据的示例包括用于在终端设备上操作的任何应用程序或方法的指令、联系人数据、电话簿数据、消息、图片、音视频等。

在实际应用中，存储器61可以由任何类型的易失性或非易失性存储设备或者它们的组合实现，例如：静态随机存取存储器(SRAM)、电可擦除可编程只读存储器(EEPROM)、可擦除可编程只读存储器(EPROM)、可编程只读存储器(PROM)、只读存储器(ROM)、磁存储器、快闪存储器、磁盘或光盘等。

处理器62与所述存储器61相耦接，配置为处理所述存储器存储的程序。参考图7，所述处理器62进一步包括：

获取模块71，用于获取SVG格式的Path字符串；

拆分模块72，用于根据所述Path字符串中的移动指令将所述Path字符串分割为一个或多个Path数组；

解析模块73，用于将所述Path数组解析为对应的指令集合，所述指令集合中的每个指令包括：指令类型信息和第一坐标信息；

分割模块74，用于将指令类型为绘制曲线指令对应的曲线分割为一个或多个线段，计算每一线段对应的坐标信息，并将该线段对应的坐标信息存储为与该指令的第一坐标信息对应的第二坐标信息；

检测图形绘制模块75，用于根据所述指令集合中的指令所对应的第一坐标信息或第二坐标信息绘制Path图形。

所述指令类型为绘制曲线指令包括：绘制三次方程式贝塞尔曲线指令、绘制二次方程式贝塞尔曲线指令、绘制椭圆圆弧指令。

进一步地，所述分割模块74包括：

第一分割模块(未示出)，用于对于绘制三次方程式贝塞尔曲线指令或绘制二次方程式贝塞尔曲线指令，计算该指令对应的曲线上的每个点的坐标信息，按照预定像素间隔获取该曲线上的点作为分割点将曲线分割为一个或多个线段，并获取分割点的坐标信息作为该指令的第二坐标信息；及

第二分割模块(未示出)，用于对于绘制椭圆圆弧指令，计算该指令对应的椭圆圆弧上的每个点的坐标信息，按照预定像素间隔获取该曲线上的点，如果所获取的点的数量小于椭圆圆弧的弧度数值，则根据所获取的点将曲线分割为一个或多个线段，否则根据椭圆圆弧的弧度数值将曲线平均分割为一个或多个线段，并获取分割点的坐标信息作为该指令的第二坐标信息。

更进一步，所述检测图形绘制模块75还用于遍历所述指令集合，如果所述指令集合中的指令存在对应的第二坐标信息则获取该第二坐标信息，否则获取该指令对应的第一坐标信息；在Canvas中根据获取的第一坐标信息和第二坐标信息连接绘制为Path图形。

继续参考图7，所述处理器62还包括有：

外接矩形计算模块76，用于根据所述指令集合中的指令所对应的第一坐标信息或第二坐标信息计算所绘制的Path图形的外接矩形范围。

点击操作检测模块77，用于接收到点击操作，判断所述点击操作对应的坐标信息是否在所述Path图形之上，若是则判定该点击操作点中Path图形区域；否则继续判断所述Path图形是否有颜色填充，如果有则根据所述Path图形进行非零环绕算法判断该点击操作是否点中Path图形区域。

继续参考图6，所述终端设备60还包括：通信组件63、电源组件64、音频组件65、显示器66等其它组件。需要说明，在图6中仅示意性给出部分组件，并不意味着服务端设备仅包括图中所示组件。

通信组件63被配置为便于终端设备和其他设备之间有线或无线方式的通信。终端设备可以接入基于通信标准的无线网络，如WiFi，2G或3G，或它们的组合。在一个示例性实施例中，通信组件63经由广播信道接收来自外部广播管理系统的广播信号或广播相关信息。在一个示例性实施例中，通信组件63还包括近场通信(NFC)模块，以促进短程通信。例如，在NFC模块可基于射频识别(RFID)技术，红外数据协会(IrDA)技术，超宽带(UWB)技术，蓝牙(BT)技术和其他技术来实现。

电源组件64，为服务端设备的各种组件提供电力。电源组件64可以包括电源管理系统，一个或多个电源，及其他与为服务端设备生成、管理和分配电力相关联的组件。

音频组件65被配置为输出和/或输入音频信号。例如，音频组件65包括一个麦克风(MIC)，当服务端设备处于操作模式，如呼叫模式、记录模式和语音识别模式时，麦克风被配置为接收外部音频信号。所接收的音频信号可以被进一步存储在存储器61或经由通信组件63发送。在一些实施例中，音频组件65还包括一个扬声器，用于输出音频信号。

显示器2006包括屏幕，其屏幕可以包括液晶显示器(LCD)和触摸面板(TP)。如果屏幕包括触摸面板，屏幕可以被实现为触摸屏，以接收来自用户的输入信号。触摸面板包括一个或多个触摸传感器以感测触摸、滑动和触摸面板上的手势。触摸传感器可以不仅感测触摸或滑动动作的边界，而且还检测与触摸或滑动操作相关的持续时间和压力。

本申请的方法的操作步骤与装置的结构特征对应，可以相互参照，不再一一赘述。

综上所述，根据本申请的上述技术方案，通过将Path图形中的曲线分割为折线并在Canvas中重新绘制Path图形，能够在不依赖任何上下文环境的情况下检测鼠标点击操作是否点中该Path图形的区域；并且能够方便地计算出Path图形的外接矩形范围。

本领域技术人员应明白，本申请的实施例可提供为方法、系统或计算机程序产品。因此，本申请可采用完全硬件实施例、完全软件实施例或结合软件和硬件方面的实施例的形式。而且，本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。

在一个典型的配置中，计算设备包括一个或多个处理器(CPU)、输入/输出接口、网络接口和内存。

内存可能包括计算机可读介质中的非永久性存储器，随机存取存储器(RAM)和/或非易失性内存等形式，如只读存储器(ROM)或闪存(flash RAM)。内存是计算机可读介质的示例。

计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括，但不限于相变内存(PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、快闪记忆体或其他内存技术、只读光盘只读存储器(CD-ROM)、数字多功能光盘(DVD)或其他光学存储、磁盒式磁带，磁带磁磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。按照本文中的界定，计算机可读介质不包括暂存电脑可读媒体(transitory media)，如调制的数据信号和载波。

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

以上所述仅为本申请的实施例而已，并不用于限制本申请。对于本领域技术人员来说，本申请可以有各种更改和变化。凡在本申请的精神和原理之内所作的任何修改、等同替换、改进等，均应包含在本申请的权利要求范围之内。

Claims (18)

1.一种SVG格式的Path图形的处理方法，其特征在于，包括：

获取SVG格式的Path字符串，根据所述Path字符串中的移动指令将所述Path字符串分割为一个或多个Path数组；

将所述Path数组解析为对应的Canvas能够识别的指令集合，所述指令集合中的每个指令包括：指令类型信息和第一坐标信息；

将指令类型为绘制曲线指令对应的曲线分割为一个或多个线段，计算每一线段对应的坐标信息，并将该线段对应的坐标信息存储为与该指令的第一坐标信息对应的第二坐标信息；

根据所述指令集合中的指令所对应的第一坐标信息或第二坐标信息在Canvas中绘制Path图形，所述Path图形基于所述指令集合中的绘制直线指令的第一坐标信息和绘制曲线指令的第二坐标信息依序连接得到；

接收到点击操作，判断所述点击操作对应的坐标信息是否在所述Path图形之上，若是则判定该点击操作点中Path图形区域；

否则继续判断所述Path图形是否有颜色填充，如果有则根据所述Path图形进行非零环绕算法判断该点击操作是否点中Path图形区域。

2.根据权利要求1所述的方法，其特征在于，所述指令类型为绘制曲线指令包括：绘制三次方程式贝塞尔曲线指令、绘制二次方程式贝塞尔曲线指令、或者绘制椭圆圆弧指令。

3.根据权利要求2所述的方法，其特征在于，将指令类型为绘制曲线指令对应的曲线分割为一个或多个线段，计算每一线段对应的坐标信息，包括：

对于绘制三次方程式贝塞尔曲线指令或绘制二次方程式贝塞尔曲线指令，计算该指令对应的曲线上的每个点的坐标信息，按照预定像素间隔获取该曲线上的点作为分割点将曲线分割为一个或多个线段，并获取分割点的坐标信息作为该指令的第二坐标信息。

4.根据权利要求2所述的方法，其特征在于，将指令类型为绘制曲线指令对应的曲线分割为一个或多个线段，计算每一线段对应的坐标信息，包括：

对于绘制椭圆圆弧指令，计算该指令对应的椭圆圆弧上的每个点的坐标信息，按照预定像素间隔获取该曲线上的点，如果所获取的点的数量小于椭圆圆弧的弧度数值，则根据所获取的点作为分割点将曲线分割为一个或多个线段，否则根据椭圆圆弧的弧度数值将曲线平均分割为一个或多个线段，并获取分割点的坐标信息作为该指令的第二坐标信息。

5.根据权利要求1、3或4所述的方法，其特征在于，所述根据所述指令集合中的指令所对应的第一坐标信息或第二坐标信息绘制Path图形，包括：

遍历所述指令集合，如果所述指令集合中的指令存在对应的第二坐标信息则获取该第二坐标信息，否则获取该指令对应的第一坐标信息；

在Canvas中根据获取的第一坐标信息和第二坐标信息连接绘制为Path图形。

6.根据权利要求5所述的方法，其特征在于，还包括：

根据所述指令集合中的指令所对应的第一坐标信息或第二坐标信息计算所绘制的Path图形的外接矩形范围。

7.一种SVG格式的Path图形的处理装置，其特征在于，包括：

获取模块，用于获取SVG格式的Path字符串；

拆分模块，用于根据所述Path字符串中的移动指令将所述Path字符串分割为一个或多个Path数组；

解析模块，用于将所述Path数组解析为对应的Canvas能够识别的指令集合，所述指令集合中的每个指令包括：指令类型信息和第一坐标信息；

分割模块，用于将指令类型为绘制曲线指令对应的曲线分割为一个或多个线段，计算每一线段对应的坐标信息，并将该线段对应的坐标信息存储为与该指令的第一坐标信息对应的第二坐标信息；

检测图形绘制模块，用于根据所述指令集合中的指令所对应的第一坐标信息或第二坐标信息在Canvas中绘制Path图形，所述Path图形基于所述指令集合中的绘制直线指令的第一坐标信息和绘制曲线指令的第二坐标信息依序连接得到；

点击操作检测模块，用于接收到点击操作，判断所述点击操作对应的坐标信息是否在所述Path图形之上，若是则判定该点击操作点中Path图形区域；否则继续判断所述Path图形是否有颜色填充，如果有则根据所述Path图形进行非零环绕算法判断该点击操作是否点中Path图形区域。

8.根据权利要求7所述的装置，其特征在于，所述指令类型为绘制曲线指令包括：绘制三次方程式贝塞尔曲线指令、绘制二次方程式贝塞尔曲线指令、或者绘制椭圆圆弧指令。

9.根据权利要求8所述的装置，其特征在于，所述分割模块包括：

第一分割模块，用于对于绘制三次方程式贝塞尔曲线指令或绘制二次方程式贝塞尔曲线指令，计算该指令对应的曲线上的每个点的坐标信息，按照预定像素间隔获取该曲线上的点作为分割点将曲线分割为一个或多个线段，并获取分割点的坐标信息作为该指令的第二坐标信息。

10.根据权利要求8所述的装置，其特征在于，所述分割模块包括：

第二分割模块，用于对于绘制椭圆圆弧指令，计算该指令对应的椭圆圆弧上的每个点的坐标信息，按照预定像素间隔获取该曲线上的点，如果所获取的点的数量小于椭圆圆弧的弧度数值，则根据所获取的点将曲线分割为一个或多个线段，否则根据椭圆圆弧的弧度数值将曲线平均分割为一个或多个线段，并获取分割点的坐标信息作为该指令的第二坐标信息。

11.根据权利要求7、9或10所述的装置，其特征在于，所述检测图形绘制模块，还用于遍历所述指令集合，如果所述指令集合中的指令存在对应的第二坐标信息则获取该第二坐标信息，否则获取该指令对应的第一坐标信息；在Canvas中根据获取的第一坐标信息和第二坐标信息连接绘制为Path图形。

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

外接矩形计算模块，用于根据所述指令集合中的指令所对应的第一坐标信息或第二坐标信息计算所绘制的Path图形的外接矩形范围。

13.一种终端设备，其特征在于，包括：

存储器，其配置为存储程序；

处理器，其与所述存储器相耦接，配置为处理所述存储器存储的程序；

其中，所述处理器进一步包括：

获取模块，用于获取SVG格式的Path字符串；

拆分模块，用于根据所述Path字符串中的移动指令将所述Path字符串分割为一个或多个Path数组；

解析模块，用于将所述Path数组解析为对应的Canvas能够识别的指令集合，所述指令集合中的每个指令包括：指令类型信息和第一坐标信息；

分割模块，用于将指令类型为绘制曲线指令对应的曲线分割为一个或多个线段，计算每一线段对应的坐标信息，并将该线段对应的坐标信息存储为与该指令的第一坐标信息对应的第二坐标信息；

检测图形绘制模块，用于根据所述指令集合中的指令所对应的第一坐标信息或第二坐标信息在Canvas中绘制Path图形，所述Path图形基于所述指令集合中的绘制直线指令的第一坐标信息和绘制曲线指令的第二坐标信息依序连接得到；

点击操作检测模块，用于接收到点击操作，判断所述点击操作对应的坐标信息是否在所述Path图形之上，若是则判定该点击操作点中Path图形区域；否则继续判断所述Path图形是否有颜色填充，如果有则根据所述Path图形进行非零环绕算法判断该点击操作是否点中Path图形区域。

14.根据权利要求13所述的终端设备，其特征在于，所述指令类型为绘制曲线指令包括：绘制三次方程式贝塞尔曲线指令、绘制二次方程式贝塞尔曲线指令、或者绘制椭圆圆弧指令。

15.根据权利要求14所述的终端设备，其特征在于，所述分割模块包括：

第一分割模块，用于对于绘制三次方程式贝塞尔曲线指令或绘制二次方程式贝塞尔曲线指令，计算该指令对应的曲线上的每个点的坐标信息，按照预定像素间隔获取该曲线上的点作为分割点将曲线分割为一个或多个线段，并获取分割点的坐标信息作为该指令的第二坐标信息。

16.根据权利要求14所述的终端设备，其特征在于，所述分割模块包括：

第二分割模块，用于对于绘制椭圆圆弧指令，计算该指令对应的椭圆圆弧上的每个点的坐标信息，按照预定像素间隔获取该曲线上的点，如果所获取的点的数量小于椭圆圆弧的弧度数值，则根据所获取的点将曲线分割为一个或多个线段，否则根据椭圆圆弧的弧度数值将曲线平均分割为一个或多个线段，并获取分割点的坐标信息作为该指令的第二坐标信息。

17.根据权利要求13、15或16所述的终端设备，其特征在于，所述检测图形绘制模块，还用于遍历所述指令集合，如果所述指令集合中的指令存在对应的第二坐标信息则获取该第二坐标信息，否则获取该指令对应的第一坐标信息；在Canvas中根据获取的第一坐标信息和第二坐标信息连接绘制为Path图形。

18.根据权利要求17所述的终端设备，其特征在于，所述处理器还包括：

外接矩形计算模块，用于根据所述指令集合中的指令所对应的第一坐标信息或第二坐标信息计算所绘制的Path图形的外接矩形范围。

Images