[发明专利]一种在页面绘制图形的方法和装置

说明书

技术领域

本发明涉及页面处理领域，具体涉及一种在页面绘制图形的方法，以及和一种在页面绘制图形的装置。

背景技术

目前，在页面中多采用canvas元素绘制图形，canvas元素是HTML5的一部分(HyperText Mark-up Language，超文本标记语言)。采用canvas元素在网页上绘制图像时，向HTML5页面添加canvas元素，canvas元素本身没有绘图能力，所有的绘制工作在脚本语言JavaScript内部完成，通过JavaScript控制其每一像素的展示效果，具体而言，JavaScript根据图形的属性，修改图形所覆盖的区域内各个像素点的属性来达到在页面上生成图形的目的。

如上方案绘制的图形，存储单位是图形覆盖的页面区域上每一点的像素值，存储结果是以png或jpg格式保存的位图。一旦图形被绘制完成，在页面资源文件中，图形与所覆盖的页面就是一体的，无法对其进行单独处理，如果图形的位置或形状等发生变化，那么图形所覆盖的整个场景也需要重新编写，包括页面中任何已被该图形覆盖的页面区域，对其中每个元素的像素值进行修改，使得对图形的更新非常的麻烦。

发明内容

鉴于上述问题，提出了本发明以便提供一种克服上述问题或者至少部分地解决上述问题的在页面绘制图形的方法和相应的在页面绘制图形的装置。

依据本发明的一个方面，提供了一种在页面绘制图形的方法，包括：

跟踪用户在页面的绘图区域中绘制图形的操作，生成用于描述所绘制的图形的图形文件；

将生成的图形文件插入所述页面对应的页面资源文件中；

加载插入所述图形文件的页面资源文件，生成在所述绘图区域展示所绘制的图形的页面。

可选地，所述跟踪用户在页面的绘图区域中绘制图形的操作包括：

跟踪用户操控的鼠标指针或用户在终端的触摸屏幕上的触摸点在所述页面的绘图区域中绘制图形的运动轨迹。

可选地，在所述跟踪用户在页面的绘图区域中绘制图形的操作之前，所述方法还包括：

接收所述用户针对所述页面上展示的绘图功能的接口的选择信息。

可选地，所述接收所述用户针对所述页面上展示的绘图功能的接口的选择信息包括：

接收所述用户对所述页面上预置的图形绘制接口的访问操作；

在所述图形绘制接口相关联的位置生成展示多种绘图功能的接口的悬浮窗，并接收针对所述悬浮窗中展示的所述绘图功能的接口的选择信息。

可选地，所绘制的图形为可伸缩矢量图形，不同的绘图功能对应绘制不同形状的可伸缩矢量图形；

所述生成用于描述所绘制的图形的图形文件包括：

由所选择的绘图功能的接口确定选择绘制的某种形状的图形；

根据所述用户在页面的绘图区域中绘制图形的操作，计算表征所绘制的可伸缩矢量图形的展示效果的图形属性；

按照预设格式将计算的图形属性组织为描述所述图形的图形文件。

可选地，所述图形属性包括所绘制的可伸缩矢量图形的尺寸和所绘制的可伸缩矢量图形在所述绘图区域所处的位置；

所述根据所述用户在页面的绘图区域中绘制图形的操作，计算所绘制的可伸缩矢量的图形属性包括：

获取所述用户在所述绘图区域中绘制图形的操作的起点和终点，确定所绘制的可伸缩矢量图形在所述绘图区域所处的位置；

根据绘制图形的操作的起点与终点之间的距离，计算所绘制的可伸缩矢量图形的尺寸。

可选地，所述按照预设格式将计算的图形属性组织为描述所述图形的图形文件包括：

将计算的图形属性组织为可扩展标记语言文本格式的图形文件。

可选地，所述将生成的图形文件插入所述页面对应的页面资源文件中包括：

在所述页面资源文件包括的多个页面元素中查找所述绘图区域对应页面元素；

将所述图形文件以预设的超文本标记语言标签的形式插入到所述绘图区域对应页面元素中。

可选地，所述页面采用浏览器进行展示，所述浏览器上安装有用于加载所述图形的图形插件；

或，所述页面采用非浏览器的其它页面应用进行展示，所述页面应用上安装有用于加载所述图形的图形插件。

可选地，所述加载插入所述图形文件的页面资源文件，生成在所述绘图区域展示所绘制的图形的页面包括：