CN104598103A - 一种页面中处理图形的方法和装置 - 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、在所述绘图区域对应页面元素中查找预设的超文本标记语言标签，并从查找的超文本标记语言标签中提取用于描述所述图形的图形文件。

记录页面的页面资源文件由多个页面元素构成，其中包括页面的绘图区域对应的页面元素，图形文件展示在页面的绘图区域，因此，可以从绘图区域对应的页面元素中查找对应的图形文件，绝大多数元素是“容器”，采用超文本标记语言标签的形式编写，即它有起始标记和结尾标记，元素的起始标记叫做起始链接签(start tag)，元素结束标记叫做结尾链接签(end tag)，因此，进一步查找存放图形文件的预设的超文本标记语言标签，并从查找的超文本标记语言标签中提取用于描述所述图形的图形文件。

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

本发明实施例中，优选地，在所述根据对所述图形进行修改的操作对所述图形文件进行更新之前，所述方法还包括：

子步骤S31、根据用户对所述图形进行修改的操作的运动轨迹确定所述图形中待修改的目标图形。

在本发明的一种优选实施例中，可以将运动轨迹与图形重合的部分图形或部分图形所在的子图形作为待修改的目标图形，进一步优选地，所述子步骤S31包括：

子步骤S31-1、将所述图形与所述运动轨迹重合的部分图形作为待修改的目标图形。

在本发明的另一种优选实施例中，所述图形由先后绘制的多个子图形组成，各个子图形可以是不同的形状，可以有重叠交错的部分。所述根据用户对所述图形进行修改的操作的运动轨迹确定所述图形中待修改的目标图形包括：

子步骤S31-2、根据所述运动轨迹以及与所述运动轨迹绑定的预设图形确定所述运动轨迹覆盖的选择区域；

子步骤S31-3、查找所述图形中位于所述选择区域内的部分图形，将所查找的部分图形所属的至少一个子图形作为待修改的目标图形。

用户修改图形的运动轨迹也可以预设图形绑定，从而以绑定的预设图形确定该运动轨迹所覆盖的选择区域，例如预设图形为圆形，实际的运动轨迹为一条直线，则该运动轨迹所覆盖的选择区域为该圆形在这条直线上运动时覆盖的所有区域。进一步，若选择区域覆盖有部分图形，则将覆盖的部分图形所属的至少一个子图形作为待修改的目标图形。

本发明实施例中，优选地，所述对页面中展示的图形进行修改的操作为对所述图形或所述图形中部分图形进行删除的操作。

具体的，所述图形文件记录表征所述页面中展示的图形的展示效果的图形属性，所述根据对所述图形进行修改的操作对所述图形文件进行更新包括：

子步骤S41、根据对所述待修改的目标图形进行删除的操作，删除所述图形文件中表征所述目标图形的展示效果的图形属性。

针对确定的目标图形，在页面上删除该目标图形，则相应的在记录图形的图形文件中删除表征目标图形的展示效果的图形属性。

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

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

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

本发明实施例中，图形文件为可扩展标记语言文本(Extensible MarkupLanguage，XML)格式的图形文件，若页面为Webkit内核的浏览器加载的页面，则可以采用可扩展标记语言文本(XML)格式的SVG(SVG，ScalableVector Graphics)文件记录图形，若页面为IE内核的浏览器加载的页面，则可以采用XML格式的VML(The Vector Markup Language，矢量可标记语言)文件记录图形。

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

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

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

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

相应的，所述加载插入已更新的图形文件的所述页面资源文件，生成展示修改后的图形的页面包括：

子步骤S51、所述浏览器或所述页面应用加载插入已更新的图形文件的页面资源文件，重新生成所述页面，其中，当加载到所述图形文件时，所述浏览器或所述页面应用调用用于加载所述可伸缩矢量图形的图形插件，由所述图形插件解析所述已更新的图形文件并加载修改后的图形。

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

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

步骤201、接收针对页面上展示的图形修改接口的选择信息。

与上个实施例不同的是，本实施例中，可以在页面上预置图形修改接口，通过访问图形修改接口可以触发修改图形的操作。

步骤202、接收用户对所述页面中展示的图形进行修改的操作。

步骤203、从所述页面对应的页面资源文件中提取用于描述所述图形的图形文件，并根据对所述图形进行修改的操作对所述图形文件进行更新。

步骤204、加载插入已更新的图形文件的所述页面资源文件，生成展示修改后的图形的页面。

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

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

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

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

依据本发明实施例，页面中展示的图形在页面资源文件中保存有对应描述所述图形的图形文件，当接收到对图形进行修改的操作时，从页面资源文件中提取该图形文件并根据对图形的修改操作对图形文件进行更新，进一步根据更新后的页面资源文件加载得到展示修改后的图形的页面。与背景技术相比，本发明实施例所提供的在页面绘制图形的方案中，描述图形的图形文件与描述绘图区域的内容是互相独立的，当需要对图形进行修改时，可以单独对图形文件进行处理，无需重新修改整个绘图区域中每个像素点的属性，从而可以加快图形更新的速度，节约对终端资源的占用。

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

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

如图3所示为本发明实施例的一个示例中修改图形之前的页面示意图。该页面中展示了历史多期双色球彩票的号码分布图，整个号码分布图为图形的绘图区域。如图3所示，在页面绘图区域绘制了两个图形，包括左侧的椭圆和右侧的长方形，椭圆和长方形有部分交集。

号码分布图的右上角有“绘图工具”的接口即图形绘制接口，由于该示例中绘制图形的接口与修改图形的接口均通过图形绘制接口调用，因此，页面中已经展示了图形绘制接口对应的悬浮窗。悬浮窗中展示了多种绘图功能，从左边开始第6个图标对应擦除部分图形的橡皮擦的功能，调用该接口，可以相应删除已绘制的部分图形，左边开始第5个图标对应清除所有图形的功能，左边开始第1-4个图标分别对应绘制长方形、椭圆、直线、曲线等不同形状图形的绘图功能。

如图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、如A1所述的方法，其中，所述图形展示在所述页面的绘图区域中，所述从所述页面对应的页面资源文件中提取用于描述所述图形的图形文件包括：

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

在所述绘图区域对应页面元素中查找预设的超文本标记语言标签，并从查找的超文本标记语言标签中提取用于描述所述图形的图形文件。

A6、如A2所述的方法，其中，在所述根据对所述图形进行修改的操作对所述图形文件进行更新之前，所述方法还包括：

根据用户对所述图形进行修改的操作的运动轨迹确定所述图形中待修改的目标图形。

A7、如A6所述的方法，其中，所述根据用户对所述图形进行修改的操作的运动轨迹确定所述图形中待修改的目标图形包括：

将所述图形与所述运动轨迹重合的部分图形作为待修改的目标图形。

A8、如A6所述的方法，其中，所述图形由先后绘制的多个子图形组成，所述根据用户对所述图形进行修改的操作的运动轨迹确定所述图形中待修改的目标图形包括：

根据所述运动轨迹以及与所述运动轨迹绑定的预设图形确定所述运动轨迹覆盖的选择区域；

查找所述图形中位于所述选择区域内的部分图形，将所查找的部分图形所属的至少一个子图形作为待修改的目标图形。

A9、如A6所述的方法，其中，所述对页面中展示的图形进行修改的操作为对所述图形或所述图形中部分图形进行删除的操作；

所述图形文件记录表征所述页面中展示的图形的展示效果的图形属性；

所述根据对所述图形进行修改的操作对所述图形文件进行更新包括：

根据对所述待修改的目标图形进行删除的操作，删除所述图形文件中表征所述目标图形的展示效果的图形属性。

A10、如A1所述的方法，其中，所展示的图形为可伸缩矢量图形；

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

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

A11、如A10所述的方法，其中，所述加载插入已更新的图形文件的所述页面资源文件，生成展示修改后的图形的页面包括：

所述浏览器或所述页面应用加载插入已更新的图形文件的页面资源文件，重新生成所述页面，其中，当加载到所述图形文件时，所述浏览器或所述页面应用调用用于加载所述可伸缩矢量图形的图形插件，由所述图形插件解析所述已更新的图形文件并加载修改后的图形。

A12、如A5所述的方法，其中，所述图形文件为可扩展标记语言文本格式的图形文件；

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

本发明还公开了B13、一种页面中处理图形的装置，包括：

操作接收模块，用于接收用户对页面中展示的图形进行修改的操作；

图形文件提取模块，用于从所述页面对应的页面资源文件中提取用于描述所述图形的图形文件；

图形文件更新模块，用于根据对所述图形进行修改的操作对所述图形文件进行更新；

文件加载模块，用于加载插入已更新的图形文件的所述页面资源文件，生成展示修改后的图形的页面。

B14、如B13所述的装置，其中，所述操作接收模块，具体用于跟踪用户对所述图形进行修改的操作在所述页面的运动轨迹。

B15、如B13所述的装置，其中，所述装置还包括：

信息接收模块，用于接收针对所述页面上展示的图形修改接口的选择信息。

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

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

悬浮窗生成子模块，用于在所述图形绘制接口相关联的位置生成展示图形修改接口的悬浮窗，并接收针对所述悬浮窗中展示的所述图形修改接口的选择信息。

B17、如B13所述的装置，其中，所述图形展示在所述页面的绘图区域中，所述图形文件提取模块包括：

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

标签查找子模块，用于在所述绘图区域对应页面元素中查找预设的超文本标记语言标签，并从查找的超文本标记语言标签中提取用于描述所述图形的图形文件。

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

图形确定子模块，用于根据用户对所述图形进行修改的操作的运动轨迹确定所述图形中待修改的目标图形。

B19、如B18所述的装置，其中，所述图形确定子模块，具体用于将所述图形与所述运动轨迹重合的部分图形作为待修改的目标图形。

B20、如B18所述的装置，其中，所述图形由先后绘制的多个子图形组成，所述图形确定子模块包括：

区域确定子单元，用于根据所述运动轨迹以及与所述运动轨迹绑定的预设图形确定所述运动轨迹覆盖的选择区域；

图形查找子单元，用于查找所述图形中位于所述选择区域内的部分图形，将所查找的部分图形所属的至少一个子图形作为待修改的目标图形。

B21、如B18所述的装置，其中，所述对页面中展示的图形进行修改的操作为对所述图形或所述图形中部分图形进行删除的操作；

所述图形文件记录表征所述页面中展示的图形的展示效果的图形属性；

所述图形文件更新模块，具体用于根据对所述待修改的目标图形进行删除的操作，删除所述图形文件中表征所述目标图形的展示效果的图形属性。

B22、如B13所述的装置，其中，所展示的图形为可伸缩矢量图形；

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

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

B23、如B22所述的装置，其中，所述文件加载模块，具体用于所述浏览器或所述页面应用加载插入已更新的图形文件的页面资源文件，重新生成所述页面，其中，当加载到所述图形文件时，所述浏览器或所述页面应用调用用于加载所述可伸缩矢量图形的图形插件，由所述图形插件解析所述已更新的图形文件并加载修改后的图形。

B24、如B17所述的装置，其中，所述图形文件为可扩展标记语言文本格式的图形文件；

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

Claims (10)

1.一种页面中处理图形的方法，包括：

接收用户对页面中展示的图形进行修改的操作；

从所述页面对应的页面资源文件中提取用于描述所述图形的图形文件，并根据对所述图形进行修改的操作对所述图形文件进行更新；

加载插入已更新的图形文件的所述页面资源文件，生成展示修改后的图形的页面。

2.如权利要求1所述的方法，其中，所述接收用户对页面中展示的图形进行修改的操作包括：

跟踪用户对所述图形进行修改的操作在所述页面的运动轨迹。

3.如权利要求1所述的方法，其中，在所述接收用户对页面中展示的图形进行修改的操作之前，所述方法还包括：

接收针对所述页面上展示的图形修改接口的选择信息。

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

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

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

5.如权利要求1所述的方法，其中，所述图形展示在所述页面的绘图区域中，所述从所述页面对应的页面资源文件中提取用于描述所述图形的图形文件包括：

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

在所述绘图区域对应页面元素中查找预设的超文本标记语言标签，并从查找的超文本标记语言标签中提取用于描述所述图形的图形文件。

6.如权利要求2所述的方法，其中，在所述根据对所述图形进行修改的操作对所述图形文件进行更新之前，所述方法还包括：

根据用户对所述图形进行修改的操作的运动轨迹确定所述图形中待修改的目标图形。

7.如权利要求6所述的方法，其中，所述根据用户对所述图形进行修改的操作的运动轨迹确定所述图形中待修改的目标图形包括：

将所述图形与所述运动轨迹重合的部分图形作为待修改的目标图形。

8.如权利要求6所述的方法，其中，所述图形由先后绘制的多个子图形组成，所述根据用户对所述图形进行修改的操作的运动轨迹确定所述图形中待修改的目标图形包括：

根据所述运动轨迹以及与所述运动轨迹绑定的预设图形确定所述运动轨迹覆盖的选择区域；

查找所述图形中位于所述选择区域内的部分图形，将所查找的部分图形所属的至少一个子图形作为待修改的目标图形。

9.如权利要求6所述的方法，其中，所述对页面中展示的图形进行修改的操作为对所述图形或所述图形中部分图形进行删除的操作；

所述图形文件记录表征所述页面中展示的图形的展示效果的图形属性；

所述根据对所述图形进行修改的操作对所述图形文件进行更新包括：

根据对所述待修改的目标图形进行删除的操作，删除所述图形文件中表征所述目标图形的展示效果的图形属性。

10.一种页面中处理图形的装置，包括：

操作接收模块，用于接收用户对页面中展示的图形进行修改的操作；

图形文件提取模块，用于从所述页面对应的页面资源文件中提取用于描述所述图形的图形文件；

图形文件更新模块，用于根据对所述图形进行修改的操作对所述图形文件进行更新；

文件加载模块，用于加载插入已更新的图形文件的所述页面资源文件，生成展示修改后的图形的页面。