[发明专利]SVG格式的Path图形的处理方法及其装置

说明书

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

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

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