CN104572967A - 一种在页面绘制图形的方法和装置 - Google Patents

Abstract

本发明公开了一种在页面绘制图形的方法和装置。所述方法包括：跟踪用户在页面的绘图区域中绘制图形的操作，生成用于描述所绘制的图形的图形文件；将生成的图形文件插入所述页面对应的页面资源文件中；加载插入所述图形文件的页面资源文件，生成在所述绘图区域展示所绘制的图形的页面。与背景技术相比，本发明实施例所提供的在页面绘制图形的方案中，描述图形的图形文件与描述绘图区域的内容是互相独立的，当图形发生变化时，可以单独对图形文件进行处理，无需重新修改整个绘图区域的文件，从而可以加快图形修改的速度，节约对终端资源的占用。

Description

一种在页面绘制图形的方法和装置

技术领域

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

背景技术

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

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

发明内容

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

所述浏览器或所述页面应用加载插入所述图形文件的页面资源文件，重新生成所述页面，其中，当加载到所述绘图区域时，所述浏览器或所述页面应用调用用于加载所述图形的图形插件，由所述图形插件解析所述图形文件并在所述绘图区域加载所述图形。

可选地，所述页面为实现对交易对象的交易过程的交易网页，所述交易页面的绘图区域为以图表形式展示所述交易对象的历史交易数据的页面区域。

根据本发明的另一个方面，提供了一种在页面绘制图形的装置，包括：

操作跟踪模块，用于跟踪用户在页面的绘图区域中绘制图形的操作；

图形文件生成模块，用于生成用于描述所绘制的图形的图形文件；

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

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

可选地，所述操作跟踪模块，具体用于跟踪用户操控的鼠标指针或用户在终端的触摸屏幕上的触摸点在所述页面的绘图区域中绘制图形的运动轨迹。

可选地，所述装置还包括：

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

可选地，所述选择信息接收模块包括：

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

悬浮窗生成子模块，用于在所述图形绘制接口相关联的位置生成展示多种绘图功能的接口的悬浮窗；

选择信息接收子模块，用于接收针对所述悬浮窗中展示的所述绘图功能的接口的选择信息。

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

所述图形文件生成模块包括：

图形选择确定子模块，用于由所选择的绘图功能的接口确定选择绘制的某种形状的图形；

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

图形文件组织子模块，用于按照预设格式将计算的图形属性组织为描述所述图形的图形文件。

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

所述图形属性计算子模块包括：

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

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

可选地，所述图形文件组织子模块，具体用于将计算的图形属性组织为可扩展标记语言文本格式的图形文件。

可选地，所述图形文件插入模块包括：

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

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

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

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

可选地，所述文件加载模块，具体用于所述浏览器或所述页面应用加载插入所述图形文件的页面资源文件，重新生成所述页面，其中，当加载到所述绘图区域时，所述浏览器或所述页面应用调用用于加载所述图形的图形插件，由所述图形插件解析所述图形文件并在所述绘图区域加载所述图形。

可选地，所述页面为实现对交易对象的交易过程的交易网页，所述交易页面的绘图区域为以图表形式展示所述交易对象的历史交易数据的页面区域。

依据本发明实施例，通过跟踪用户在页面的绘图区域中绘制图形的操作，生成独立于绘图区域的单独用于描述所绘制的图形的图形文件，进一步将生成的图形文件插入所述页面对应的页面资源文件中，并加载插入所述图形文件的页面资源文件，生成在所述绘图区域展示所绘制的图形的页面。与背景技术相比，本发明实施例所提供的在页面绘制图形的方案中，描述图形的图形文件与描述绘图区域的内容是互相独立的，当图形发生变化时，可以单独对图形文件进行处理，无需重新修改整个绘图区域的文件，从而可以加快图形修改的速度，节约对终端资源的占用。

并且，背景技术绘制的位图以像素点为单位进行记载，因此对应记载的文件都很大，占用较多的终端资源，而本发明实施例所绘制的图形为可伸缩矢量图形，采用图形的几何属性就可以描述图形，从而可以减少对终端资源的占用。另一方面，背景技术绘制的位图放大到超出原有大小时，各个像素点之间出现空缺和模糊锯齿等现象，而本发明实施例绘制的可伸缩矢量图形可以支持任意缩放图像显示，而不会破坏图像的清晰度和细节。

上述说明仅是本发明技术方案的概述，为了能够更清楚了解本发明的技术手段，而可依照说明书的内容予以实施，并且为了让本发明的上述和其它目的、特征和优点能够更明显易懂，以下特举本发明的具体实施方式。

附图说明

通过阅读下文优选实施方式的详细描述，各种其他的优点和益处对于本领域普通技术人员将变得清楚明了。附图仅用于示出优选实施方式的目的，而并不认为是对本发明的限制。而且在整个附图中，用相同的参考符号表示相同的部件。在附图中：

图1示出了根据本发明实施例1的一种在页面绘制图形的方法实施例的流程图；

图2示出了根据本发明实施例2的一种在页面绘制图形的方法实施例的流程图；

图3示出了本发明实施例的一个示例中绘制图形之前的页面示意图；

图4示出了本发明实施例的一个示例中绘制图形时调用图形绘制接口的示意图；

图5示出了本发明实施例的一个示例中绘制图形之后的页面示意图；

图6示出了根据本发明实施例1的一种在页面绘制图形的装置实施例的结构框图；

图7示出了根据本发明实施例2的一种在页面绘制图形的装置实施例的结构框图。

具体实施方式

下面将参照附图更详细地描述本公开的示例性实施例。虽然附图中显示了本公开的示例性实施例，然而应当理解，可以以各种形式实现本公开而不应被这里阐述的实施例所限制。相反，提供这些实施例是为了能够更透彻地理解本公开，并且能够将本公开的范围完整的传达给本领域的技术人员。

参照图1，其示出了根据本发明实施例1的一种在页面绘制图形的方法实施例的流程图，所述方法具体可以包括：

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

用户在页面绘制图形，跟踪用户的绘制操作，可以获得用户绘制的图形，生成描述图形的图形文件。具体的实现中，用户绘制图形的操作可以为在页面绘图区域中画出运动轨迹，相应的，根据绘制图形的操作确定所绘制的图形时，可以跟踪用户绘制操作的运动轨迹，将运动轨迹作为所绘制的图形，或是将用户绘制操作的运动轨迹与预设形状的图形结合确定最终绘制的图形；用户绘制图形的操作也可以是在页面中选择预置图形并将预置图形插入或拖动到绘图区域，相应的，根据绘制图形的操作确定的所绘制的图形，也可以是将用户选择的预置图形插入或拖动到绘图区域后确定的图形时；还可以是其它任意可实现的绘制图形的操作，或是其它任意可实现的确定所绘制的图形的方式。

确定所绘制的图形后，进一步生成图形文件来描述所绘制的图形，根据图形文件确定所绘制的图形的具体展示效果，进而可以生成所绘制的图形。

步骤102、将生成的图形文件插入所述页面对应的页面资源文件中。

页面资源文件记录了页面中的各个元素，根据页面资源文件可以加载生成所记录的页面。本发明实施例中，在页面绘图区域中绘制图形后，该页面增加了所绘制图形，因此，可以将生成的图形文件插入该页面对应的页面资源文件中，生成记录增加图形后的页面的页面资源文件。

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

依据本发明实施例，通过跟踪用户在页面的绘图区域中绘制图形的操作，生成独立于绘图区域的单独用于描述所绘制的图形的图形文件，进一步将生成的图形文件插入所述页面对应的页面资源文件中，并加载插入所述图形文件的页面资源文件，生成在所述绘图区域展示所绘制的图形的页面。与背景技术相比，本发明实施例所提供的在页面绘制图形的方案中，描述图形的图形文件与描述绘图区域的内容是互相独立的，当图形发生变化时，可以单独对图形文件进行处理，无需重新修改整个绘图区域的文件，从而可以加快图形修改的速度，节约对终端资源的占用。

本发明实施例中，优选地，所述跟踪用户在页面的绘图区域中绘制图形的操作包括：

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

用户可以通过在固定终端(例如PC)通过操控鼠标在所述页面的绘图区域中绘制图形，也可以在移动终端通过在终端的触摸屏幕上通过触摸在所述页面的绘图区域中绘制图形，相应的，跟踪用户操控的鼠标指针或触摸点运动轨迹来获得绘制的图形。

本发明实施例中，优选地，所述将生成的图形文件插入所述页面对应的页面资源文件中包括：

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

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

记录页面的页面资源文件由元素(element)组成，组成html文件的元素有许多种，用于组织文件的内容和指导文件的输出格式。

记录页面的页面资源文件由多个页面元素构成，其中包括绘图区域对应的页面元素，图形文件展示在页面的绘图区域，因此，可以将图形文件对应插入到绘图区域对应的页面元素中，绝大多数元素是“容器”，采用超文本标记语言标签的形式编写，即它有起始标记和结尾标记，元素的起始标记叫做起始链接签(start tag)，元素结束标记叫做结尾链接签(end tag)，图形文件插入时以超文本标记语言标签的形式进行插入。

以图形文件为SVG(Scalable Vector Graphics)可伸缩矢量图形为例，SVG文件可通过以下标签嵌入HTML文档：<embed>、<object>或者<iframe>。

本发明实施例中，优选地，所述页面采用浏览器进行展示，所述浏览器上安装有用于加载所述图形的图形插件；

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

将图形文件放入页面对应的页面资源文件中，通过用于加载图形文件的插件，可以在页面中看到图形。以图形文件为SVG可伸缩矢量图形为例，对应的插件为SVGVIEW，SVGVIEW负责在加载页面时解析并加载图形。

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

子步骤S31、所述浏览器或所述页面应用加载插入所述图形文件的页面资源文件，重新生成所述页面，其中，当加载到所述绘图区域时，所述浏览器或所述页面应用调用用于加载所述图形的图形插件，由所述图形插件解析所述图形文件并在所述绘图区域加载所述图形。

本发明实施例中，所述页面为实现对交易对象的交易过程的交易网页，所述交易页面的绘图区域为以图表形式展示所述交易对象的历史交易数据的页面区域。

参照图2，其示出了根据本发明实施例2的一种在页面绘制图形的方法实施例的流程图，所述方法具体可以包括：

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

与上个实施例不同的是，本实施例中，可以在页面上预置绘图功能对应的接口，通过访问接口可以触发执行相应的绘图功能。

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

步骤203、将生成的图形文件插入所述页面对应的页面资源文件中。

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

在具体的实现中，绘图功能的接口可以直接预置在页面中，也可以展示在页面上的悬浮窗中。本实施例中，优选地，所述接收所述用户针对所述页面上展示的绘图功能的接口的选择信息包括：

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

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

在页面上可以预置图形绘制接口，通过点击图形绘制接口展示多种绘图功能分别对应的接口，通过访问其中一种绘图功能接口可以触发执行相应的绘图功能。

本发明实施例中，优选地，所绘制的图形为可伸缩矢量图形。

背景技术中采用位图存储图形，也被称为光栅图，即是以自然的光学的眼光将图片看成在平面上密集排布的点的集合。而本发明实施例所采用的可缩放矢量图形是用于描述二维矢量图形的一种图形格式，从抽象的视角看待图形，记录其中展示的模式而不是各个点的原始数据，将图片看成各个“对象”的组合，用曲线记录对象的轮廓，用某种颜色的模式描述对象内部的图案(如用梯度描述渐变色)。比如一张留影，被看成各个人物和背景中各种景物的组合。

可缩放矢量图形中简单的几何图形，只需要几个图形的几何属性，就可以确定。比如三角形，只需要确定三个顶点的坐标。圆只需要确定圆心的坐标和半径。描述函数已知的曲线也只需要几个参数就能够确定，如正弦曲线、各种螺线等等。如果用位图记录这些几何图案，则需要包含组成线条的各个像素的数据，因此，矢量图文件小很多可以大大节省空间。其次，矢量图还具有完美的伸缩性，因为记录的是图形的特征，图形的尺寸任意变化时，都只是做着相似变换，不会出现模糊和失真。相反位图的图片放大到超出原有大小时，各个像素点之间出现空缺，即使用某种算法填充，也会出现模糊锯齿等现象，不如矢量图精确。因而矢量图很适合用于记录诸如符号、图标等简单的图形。

本发明实施例中，在Webkit内核的浏览器加载的页面中绘制图形时，可以采用可扩展标记语言文本(XML)格式的SVG(SVG，Scalable VectorGraphics)文件记录图形，在IE内核的浏览器加载的页面中绘制图形时，可以采用XML格式的VML(The Vector Markup Language，矢量可标记语言)文件记录图形。

不仅使SVG文件/VML文件可以像HTML网页一样有着很好的可读性，当用户用图像工具输出SVG文件/VML文件后，可以用任何文字处理工具打开图形，并可看到用来描述图像的文本代码，并且，可以通过一致的接口规范与外界的程序打交道，SVG文件/VML文件的物件元素完全可以通过脚本语言接受外部事件的驱动，例如鼠标动作，实现自身或对其他物件、图像的控制等。

进一步，上述不同的绘图功能可以对应绘制不同形状的可伸缩矢量图形，所述生成用于描述所绘制的图形的图形文件包括：

子步骤S51、由所选择的绘图功能的接口确定选择绘制的某种形状的图形；

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

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

通过选择不同绘图功能对应的接口可以触发绘制不同形状的可伸缩矢量图形，绘制的可伸缩矢量图形的具体形状和位置等具体的展示效果需要根据用户在绘图区域绘制图形的操作确定，因此，结合选择绘制的可伸缩矢量图形以及用户绘制图形的操作来计算可伸缩矢量图形的展示效果，并采用图形属性来描述该可伸缩矢量图形的展示效果，进一步将图形属性封装为可扩展标记语言文本(XML)格式的图形文件。

更进一步具体的，所述图形属性可以具体包括所绘制的可伸缩矢量图形的尺寸和所绘制的可伸缩矢量图形在所述绘图区域所处的位置，由于图形形状已经确定，因此，图形的尺寸和位置决定了该图形实际的展示效果。具体可以通过如下步骤计算可伸缩矢量图形的尺寸和所处位置：

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

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

根据绘制操作的起点和终点可以确定绘制图形在绘图区域中所处位置以及绘图图形的尺寸，例如，选择的可伸缩矢量图形为长方形，绘图操作的起点为长方形的一个顶点，绘图操作的终点为长方形与上个顶点之间连线为对角线的另一个顶点，两个顶点决定了长方形所处的位置，两个顶点之间的距离为长方形的对角线可以确定长方形的尺寸。

下面的例子是一个简单的SVG文件的例子，使用.svg后缀来保存：

<？xml version＝"1.0"standalone＝"no"？>

<！DOCTYPE svg PUBLIC"-//W3C//DTD SVG 1.1//EN""http://www点w3点org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width＝"100％"height＝"100％"version＝"1.1"xmlns＝"网址">

<circle cx＝"100"cy＝"50"r＝"40"stroke＝"black"stroke-width＝"2"fill＝"red"/>

</svg>

其中，第一行包含了XML声明。请注意standalone属性，该属性规定此SVG文件是否是“独立的”，或含有对外部文件的引用。

standalone＝"no"意味着SVG文档会引用一个外部文件-在这里，是DTD文件。

第二和第三行引用了这个外部的SVG DTD。该DTD位于“http://www点w3点org/Graphics/SVG/1.1/DTD/svg11.dtd”。该DTD位于W3C，含有所有允许的SVG元素。

SVG代码以<svg>元素开始，包括开启标签<svg>和关闭标签</svg>。这是根元素。width和height属性可设置此SVG文档的宽度和高度。version属性可定义所使用的SVG版本，xmlns属性可定义SVG命名空间。

SVG的<circle>用来创建一个圆。cx和cy属性定义圆中心的x和y坐标。如果忽略这两个属性，那么圆点会被设置为(0,0)。r属性定义圆的半径。

stroke和stroke-width属性控制如何显示形状的轮廓。我们把圆的轮廓设置为2px宽，黑边框。

fill属性设置形状内的颜色。我们把填充颜色设置为红色。

关闭标签的作用是关闭SVG元素和文档本身。

综上所述，依据本发明实施例，通过跟踪用户在页面的绘图区域中绘制图形的操作，生成独立于绘图区域的单独用于描述所绘制的图形的图形文件，进一步将生成的图形文件插入所述页面对应的页面资源文件中，并加载插入所述图形文件的页面资源文件，生成在所述绘图区域展示所绘制的图形的页面。与背景技术相比，本发明实施例所提供的在页面绘制图形的方案中，描述图形的图形文件与描述绘图区域的内容是互相独立的，当图形发生变化时，可以单独对图形文件进行处理，无需重新修改整个绘图区域的文件，从而可以加快图形修改的速度，节约对终端资源的占用。

并且，背景技术绘制的位图以像素点为单位进行记载，因此对应记载的文件都很大，占用较多的终端资源，而本发明实施例所绘制的图形为可伸缩矢量图形，采用图形的几何属性就可以描述图形，从而可以减少对终端资源的占用。另一方面，背景技术绘制的位图放大到超出原有大小时，各个像素点之间出现空缺和模糊锯齿等现象，而本发明实施例绘制的可伸缩矢量图形可以支持任意缩放图像显示，而不会破坏图像的清晰度和细节。

需要说明的是，对于前述的方法实施例，为了简单描述，故将其都表述为一系列的动作组合，但是本领域技术人员应该知悉，本发明并不受所描述的动作顺序的限制，因为依据本发明，某些步骤可以采用其他顺序或者同时进行。其次，本领域技术人员也应该知悉，说明书中所描述的实施例均属于优选实施例，所涉及的动作并不一定是本发明所必需的。

为使本领域技术人员更好地理解本发明实施例，以下通过一个具体的示例对本发明实施例所述的在页面绘制图形的操作流程进行说明。

如图3所示为本发明实施例的一个示例中绘制图形之前的页面示意图。该页面中展示了历史多期双色球彩票的号码分布图，整个号码分布图为图形的绘图区域，号码分布图的右上角有“绘图工具”的接口，即图形绘制接口。

如图4所示为本发明实施例的一个示例中绘制图形时调用图形功能的接口的示意图。

调用“绘图工具”生成展示多种绘图功能的悬浮窗，悬浮窗中展示了多种绘图功能，包括绘制长方形、椭圆、直线、曲线等，还包括清除所有图形和擦除部分图形的橡皮擦的功能。

如图5所示为本发明实施例的一个示例中绘制图形之后的页面示意图。

在绘图区域可以绘制一个图形或是连续绘制多个相同图形，还可以继续选择其他形状的图形继续绘制，得到多个不同形状的图形，在后绘制的图形可以与在先绘制的图形有交集。如图5所示，选择绘制椭圆的功能，绘制后的页面中根据用户的鼠标移动轨迹绘制了椭圆，进一步选择绘制长方形的功能，在包括椭圆的页面中绘制了长方形。

基于上述方法实施例的说明，本发明还提供了相应的在页面绘制图形的装置实施例，来实现上述方法实施例所述的内容。

参照图6，其示出了根据本发明实施例1的一种在页面绘制图形的装置实施例的结构框图，包括：

操作跟踪模块301，用于跟踪用户在页面的绘图区域中绘制图形的操作。

图形文件生成模块302，用于生成用于描述所绘制的图形的图形文件。

图形文件插入模块303，用于将生成的图形文件插入所述页面对应的页面资源文件中。

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

本发明实施例中，优选地，所述操作跟踪模块，具体用于跟踪用户操控的鼠标指针或用户在终端的触摸屏幕上的触摸点在所述页面的绘图区域中绘制图形的运动轨迹。

本发明实施例中，优选地，所述图形文件插入模块包括：

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

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

本发明实施例中，优选地，所述页面采用浏览器进行展示，所述浏览器上安装有用于加载所述图形的图形插件；

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

本发明实施例中，优选地，所述文件加载模块，具体用于所述浏览器或所述页面应用加载插入所述图形文件的页面资源文件，重新生成所述页面，其中，当加载到所述绘图区域时，所述浏览器或所述页面应用调用用于加载所述图形的图形插件，由所述图形插件解析所述图形文件并在所述绘图区域加载所述图形。

本发明实施例中，优选地，所述页面为实现对交易对象的交易过程的交易网页，所述交易页面的绘图区域为以图表形式展示所述交易对象的历史交易数据的页面区域。

依据本发明实施例，通过跟踪用户在页面的绘图区域中绘制图形的操作，生成独立于绘图区域的单独用于描述所绘制的图形的图形文件，进一步将生成的图形文件插入所述页面对应的页面资源文件中，并加载插入所述图形文件的页面资源文件，生成在所述绘图区域展示所绘制的图形的页面。与背景技术相比，本发明实施例所提供的在页面绘制图形的方案中，描述图形的图形文件与描述绘图区域的内容是互相独立的，当图形发生变化时，可以单独对图形文件进行处理，无需重新修改整个绘图区域的文件，从而可以加快图形修改的速度，节约对终端资源的占用。

参照图7，其示出了根据本发明实施例2的一种在页面绘制图形的装置实施例的结构框图，包括：

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

操作跟踪模块402，用于跟踪用户在页面的绘图区域中绘制图形的操作。

图形文件生成模块403，用于生成用于描述所绘制的图形的图形文件。

图形文件插入模块404，用于将生成的图形文件插入所述页面对应的页面资源文件中。

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

本发明实施例中，优选地，所述选择信息接收模块包括：

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

悬浮窗生成子模块，用于在所述图形绘制接口相关联的位置生成展示多种绘图功能的接口的悬浮窗；

选择信息接收子模块，用于接收针对所述悬浮窗中展示的所述绘图功能的接口的选择信息。

本发明实施例中，优选地，所绘制的图形为可伸缩矢量图形，不同的绘图功能对应绘制不同形状的可伸缩矢量图形；

所述图形文件生成模块包括：

图形选择确定子模块，用于由所选择的绘图功能的接口确定选择绘制的某种形状的图形；

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

图形文件组织子模块，用于按照预设格式将计算的图形属性组织为描述所述图形的图形文件。

本发明实施例中，优选地，所述图形属性包括所绘制的可伸缩矢量图形的尺寸和所绘制的可伸缩矢量图形在所述绘图区域所处的位置；

所述图形属性计算子模块包括：

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

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

本发明实施例中，优选地，所述图形文件组织子模块，具体用于将计算的图形属性组织为可扩展标记语言文本格式的图形文件。

依据本发明实施例，通过跟踪用户在页面的绘图区域中绘制图形的操作，生成独立于绘图区域的单独用于描述所绘制的图形的图形文件，进一步将生成的图形文件插入所述页面对应的页面资源文件中，并加载插入所述图形文件的页面资源文件，生成在所述绘图区域展示所绘制的图形的页面。与背景技术相比，本发明实施例所提供的在页面绘制图形的方案中，描述图形的图形文件与描述绘图区域的内容是互相独立的，当图形发生变化时，可以单独对图形文件进行处理，无需重新修改整个绘图区域的文件，从而可以加快图形修改的速度，节约对终端资源的占用。

并且，背景技术绘制的位图以像素点为单位进行记载，因此对应记载的文件都很大，占用较多的终端资源，而本发明实施例所绘制的图形为可伸缩矢量图形，采用图形的几何属性就可以描述图形，从而可以减少对终端资源的占用。另一方面，背景技术绘制的位图放大到超出原有大小时，各个像素点之间出现空缺和模糊锯齿等现象，而本发明实施例绘制的可伸缩矢量图形可以支持任意缩放图像显示，而不会破坏图像的清晰度和细节。

对于上述在在页面绘制图形的装置实施例而言，由于其与方法实施例基本相似，所以描述的比较简单，相关之处参见图1和图2所示方法实施例的部分说明即可。

本说明书中的各个实施例均采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似的部分互相参见即可。

本领域技术人员易于想到的是：上述各个实施例的任意组合应用都是可行的，故上述各个实施例之间的任意组合都是本发明的实施方案，但是由于篇幅限制，本说明书在此就不一一详述了。

在此提供的算法和显示不与任何特定计算机、虚拟系统或者其它设备固有相关。各种通用系统也可以与基于在此的示教一起使用。根据上面的描述，构造这类系统所要求的结构是显而易见的。此外，本发明也不针对任何特定编程语言。应当明白，可以利用各种编程语言实现在此描述的本发明的内容，并且上面对特定语言所做的描述是为了披露本发明的最佳实施方式。

在此处所提供的说明书中，说明了大量具体细节。然而，能够理解，本发明的实施例可以在没有这些具体细节的情况下实践。在一些实例中，并未详细示出公知的方法、结构和技术，以便不模糊对本说明书的理解。

类似地，应当理解，为了精简本公开并帮助理解各个发明方面中的一个或多个，在上面对本发明的示例性实施例的描述中，本发明的各个特征有时被一起分组到单个实施例、图、或者对其的描述中。然而，并不应将该公开的方法解释成反映如下意图：即所要求保护的本发明要求比在每个权利要求中所明确记载的特征更多的特征。更确切地说，如下面的权利要求书所反映的那样，发明方面在于少于前面公开的单个实施例的所有特征。因此，遵循具体实施方式的权利要求书由此明确地并入该具体实施方式，其中每个权利要求本身都作为本发明的单独实施例。

本领域那些技术人员可以理解，可以对实施例中的设备中的模块进行自适应性地改变并且把它们设置在与该实施例不同的一个或多个设备中。可以把实施例中的模块或单元或组件组合成一个模块或单元或组件，以及此外可以把它们分成多个子模块或子单元或子组件。除了这样的特征和/或过程或者单元中的至少一些是相互排斥之外，可以采用任何组合对本说明书(包括伴随的权利要求、摘要和附图)中公开的所有特征以及如此公开的任何方法或者设备的所有过程或单元进行组合。除非另外明确陈述，本说明书(包括伴随的权利要求、摘要和附图)中公开的每个特征可以由提供相同、等同或相似目的的替代特征来代替。

此外，本领域的技术人员能够理解，尽管在此所述的一些实施例包括其它实施例中所包括的某些特征而不是其它特征，但是不同实施例的特征的组合意味着处于本发明的范围之内并且形成不同的实施例。例如，在下面的权利要求书中，所要求保护的实施例的任意之一都可以以任意的组合方式来使用。

本发明的各个部件实施例可以以硬件实现，或者以在一个或者多个处理器上运行的软件模块实现，或者以它们的组合实现。本领域的技术人员应当理解，可以在实践中使用微处理器或者数字信号处理器(DSP)来实现根据本发明实施例的在页面绘制图形的设备中的一些或者全部部件的一些或者全部功能。本发明还可以实现为用于执行这里所描述的方法的一部分或者全部的设备或者装置程序(例如，计算机程序和计算机程序产品)。这样的实现本发明的程序可以存储在计算机可读介质上，或者可以具有一个或者多个信号的形式。这样的信号可以从因特网网站上下载得到，或者在载体信号上提供，或者以任何其他形式提供。

应该注意的是上述实施例对本发明进行说明而不是对本发明进行限制，并且本领域技术人员在不脱离所附权利要求的范围的情况下可设计出替换实施例。在权利要求中，不应将位于括号之间的任何参考符号构造成对权利要求的限制。单词“包含”不排除存在未列在权利要求中的元件或步骤。位于元件之前的单词“一”或“一个”不排除存在多个这样的元件。本发明可以借助于包括有若干不同元件的硬件以及借助于适当编程的计算机来实现。在列举了若干装置的单元权利要求中，这些装置中的若干个可以是通过同一个硬件项来具体体现。单词第一、第二、以及第三等的使用不表示任何顺序。可将这些单词解释为名称。

本发明公开了A1、一种在页面绘制图形的方法，包括：

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

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

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

A2、如A1所述的方法，其中，所述跟踪用户在页面的绘图区域中绘制图形的操作包括：

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

A3、如A1所述的方法，其中，在所述跟踪用户在页面的绘图区域中绘制图形的操作之前，所述方法还包括：

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

A4、如A3所述的方法，其中，所述接收所述用户针对所述页面上展示的绘图功能的接口的选择信息包括：

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

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

A5、如A3所述的方法，其中，所绘制的图形为可伸缩矢量图形，不同的绘图功能对应绘制不同形状的可伸缩矢量图形；

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

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

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

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

A6、如A5所述的方法，其中，所述图形属性包括所绘制的可伸缩矢量图形的尺寸和所绘制的可伸缩矢量图形在所述绘图区域所处的位置；

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

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

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

A7、如A5所述的方法，其中，所述按照预设格式将计算的图形属性组织为描述所述图形的图形文件包括：

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

A8、如A1所述的方法，其中，所述将生成的图形文件插入所述页面对应的页面资源文件中包括：

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

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

A9、如A1所述的方法，其中：

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

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

A10、如A9所述的方法，其中，所述加载插入所述图形文件的页面资源文件，生成在所述绘图区域展示所绘制的图形的页面包括：

所述浏览器或所述页面应用加载插入所述图形文件的页面资源文件，重新生成所述页面，其中，当加载到所述绘图区域时，所述浏览器或所述页面应用调用用于加载所述图形的图形插件，由所述图形插件解析所述图形文件并在所述绘图区域加载所述图形。

A11、如A1所述的方法，其中，所述页面为实现对交易对象的交易过程的交易网页，所述交易页面的绘图区域为以图表形式展示所述交易对象的历史交易数据的页面区域。

本发明还公开了B12、一种在页面绘制图形的装置，包括：

操作跟踪模块，用于跟踪用户在页面的绘图区域中绘制图形的操作；

图形文件生成模块，用于生成用于描述所绘制的图形的图形文件；

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

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

B13、如B12所述的装置，其中，所述操作跟踪模块，具体用于跟踪用户操控的鼠标指针或用户在终端的触摸屏幕上的触摸点在所述页面的绘图区域中绘制图形的运动轨迹。

B14、如B12所述的装置，其中，所述装置还包括：

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

B15、如B14所述的装置，其中，所述选择信息接收模块包括：

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

悬浮窗生成子模块，用于在所述图形绘制接口相关联的位置生成展示多种绘图功能的接口的悬浮窗；

选择信息接收子模块，用于接收针对所述悬浮窗中展示的所述绘图功能的接口的选择信息。

B16、如B14所述的装置，其中，所绘制的图形为可伸缩矢量图形，不同的绘图功能对应绘制不同形状的可伸缩矢量图形；

所述图形文件生成模块包括：

图形选择确定子模块，用于由所选择的绘图功能的接口确定选择绘制的某种形状的图形；

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

图形文件组织子模块，用于按照预设格式将计算的图形属性组织为描述所述图形的图形文件。

B17、如B16所述的装置，其中，所述图形属性包括所绘制的可伸缩矢量图形的尺寸和所绘制的可伸缩矢量图形在所述绘图区域所处的位置；

所述图形属性计算子模块包括：

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

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

B18、如B16所述的装置，其中，所述图形文件组织子模块，具体用于将计算的图形属性组织为可扩展标记语言文本格式的图形文件。

B19、如B12所述的装置，其中，所述图形文件插入模块包括：

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

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

B20、如B12所述的装置，其中：

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

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

B21、如B20所述的装置，其中，所述文件加载模块，具体用于所述浏览器或所述页面应用加载插入所述图形文件的页面资源文件，重新生成所述页面，其中，当加载到所述绘图区域时，所述浏览器或所述页面应用调用用于加载所述图形的图形插件，由所述图形插件解析所述图形文件并在所述绘图区域加载所述图形。

B22、如B12所述的装置，其中，所述页面为实现对交易对象的交易过程的交易网页，所述交易页面的绘图区域为以图表形式展示所述交易对象的历史交易数据的页面区域。

Claims (10)

1.一种在页面绘制图形的方法，包括：

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

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

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

2.如权利要求1所述的方法，其中，所述跟踪用户在页面的绘图区域中绘制图形的操作包括：

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

3.如权利要求1所述的方法，其中，在所述跟踪用户在页面的绘图区域中绘制图形的操作之前，所述方法还包括：

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

4.如权利要求3所述的方法，其中，所述接收所述用户针对所述页面上展示的绘图功能的接口的选择信息包括：

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

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

5.如权利要求3所述的方法，其中，所绘制的图形为可伸缩矢量图形，不同的绘图功能对应绘制不同形状的可伸缩矢量图形；

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

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

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

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

6.如权利要求5所述的方法，其中，所述图形属性包括所绘制的可伸缩矢量图形的尺寸和所绘制的可伸缩矢量图形在所述绘图区域所处的位置；

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

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

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

7.如权利要求5所述的方法，其中，所述按照预设格式将计算的图形属性组织为描述所述图形的图形文件包括：

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

8.如权利要求1所述的方法，其中，所述将生成的图形文件插入所述页面对应的页面资源文件中包括：

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

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

9.如权利要求1所述的方法，其中：

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

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

10.一种在页面绘制图形的装置，包括：

操作跟踪模块，用于跟踪用户在页面的绘图区域中绘制图形的操作；

图形文件生成模块，用于生成用于描述所绘制的图形的图形文件；

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

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