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

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

【技术实现步骤摘要】
一种在页面绘制图形的方法和装置
本专利技术涉及页面处理领域，具体涉及一种在页面绘制图形的方法，以及和一种在页面绘制图形的装置。
技术介绍
目前，在页面中多采用canvas元素绘制图形，canvas元素是HTML5的一部分(HyperTextMark-upLanguage，超文本标记语言)。采用canvas元素在网页上绘制图像时，向HTML5页面添加canvas元素，canvas元素本身没有绘图能力，所有的绘制工作在脚本语言JavaScript内部完成，通过JavaScript控制其每一像素的展示效果，具体而言，JavaScript根据图形的属性，修改图形所覆盖的区域内各个像素点的属性来达到在页面上生成图形的目的。如上方案绘制的图形，存储单位是图形覆盖的页面区域上每一点的像素值，存储结果是以png或jpg格式保存的位图。一旦图形被绘制完成，在页面资源文件中，图形与所覆盖的页面就是一体的，无法对其进行单独处理，如果图形的位置或形状等发生变化，那么图形所覆盖的整个场景也需要重新编写，包括页面中任何已被该图形覆盖的页面区域，对其中每个元素的像素值进行修改，使得对图形的更新非常的麻烦。
技术实现思路
鉴于上述问题，提出了本专利技术以便提供一种克服上述问题或者至少部分地解决上述问题的在页面绘制图形的方法和相应的在页面绘制图形的装置。依据本专利技术的一个方面，提供了一种在页面绘制图形的方法，包括：跟踪用户在页面的绘图区域中绘制图形的操作，生成用于描述所绘制的图形的图形文件；将生成的图形文件插入所述页面对应的页面资源文件中；加载插入所述图形文件的页面资源文件，生成在所述绘图区域展示所绘制的图形的页面。可选地，所述跟踪用户在页面的绘图区域中绘制图形的操作包括：跟踪用户操控的鼠标指针或用户在终端的触摸屏幕上的触摸点在所述页面的绘图区域中绘制图形的运动轨迹。可选地，在所述跟踪用户在页面的绘图区域中绘制图形的操作之前，所述方法还包括：接收所述用户针对所述页面上展示的绘图功能的接口的选择信息。可选地，所述接收所述用户针对所述页面上展示的绘图功能的接口的选择信息包括：接收所述用户对所述页面上预置的图形绘制接口的访问操作；在所述图形绘制接口相关联的位置生成展示多种绘图功能的接口的悬浮窗，并接收针对所述悬浮窗中展示的所述绘图功能的接口的选择信息。可选地，所绘制的图形为可伸缩矢量图形，不同的绘图功能对应绘制不同形状的可伸缩矢量图形；所述生成用于描述所绘制的图形的图形文件包括：由所选择的绘图功能的接口确定选择绘制的某种形状的图形；根据所述用户在页面的绘图区域中绘制图形的操作，计算表征所绘制的可伸缩矢量图形的展示效果的图形属性；按照预设格式将计算的图形属性组织为描述所述图形的图形文件。可选地，所述图形属性包括所绘制的可伸缩矢量图形的尺寸和所绘制的可伸缩矢量图形在所述绘图区域所处的位置；所述根据所述用户在页面的绘图区域中绘制图形的操作，计算所绘制的可伸缩矢量的图形属性包括：获取所述用户在所述绘图区域中绘制图形的操作的起点和终点，确定所绘制的可伸缩矢量图形在所述绘图区域所处的位置；根据绘制图形的操作的起点与终点之间的距离，计算所绘制的可伸缩矢量图形的尺寸。可选地，所述按照预设格式将计算的图形属性组织为描述所述图形的图形文件包括：将计算的图形属性组织为可扩展标记语言文本格式的图形文件。可选地，所述将生成的图形文件插入所述页面对应的页面资源文件中包括：在所述页面资源文件包括的多个页面元素中查找所述绘图区域对应页面元素；将所述图形文件以预设的超文本标记语言标签的形式插入到所述绘图区域对应页面元素中。可选地，所述页面采用浏览器进行展示，所述浏览器上安装有用于加载所述图形的图形插件；或，所述页面采用非浏览器的其它页面应用进行展示，所述页面应用上安装有用于加载所述图形的图形插件。可选地，所述加载插入所述图形文件的页面资源文件，生成在所述绘图区域展示所绘制的图形的页面包括：所述浏览器或所述页面应用加载插入所述图形文件的页面资源文件，重新生成所述页面，其中，当加载到所述绘图区域时，所述浏览器或所述页面应用调用用于加载所述图形的图形插件，由所述图形插件解析所述图形文件并在所述绘图区域加载所述图形。可选地，所述页面为实现对交易对象的交易过程的交易网页，所述交易页面的绘图区域为以图表形式展示所述交易对象的历史交易数据的页面区域。根据本专利技术的另一个方面，提供了一种在页面绘制图形的装置，包括：操作跟踪模块，用于跟踪用户在页面的绘图区域中绘制图形的操作；图形文件生成模块，用于生成用于描述所绘制的图形的图形文件；图形文件插入模块，用于将生成的图形文件插入所述页面对应的页面资源文件中；文件加载模块，用于加载插入所述图形文件的页面资源文件，生成在所述绘图区域展示所绘制的图形的页面。可选地，所述操作跟踪模块，具体用于跟踪用户操控的鼠标指针或用户在终端的触摸屏幕上的触摸点在所述页面的绘图区域中绘制图形的运动轨迹。可选地，所述装置还包括：选择信息接收模块，用于接收所述用户针对所述页面上展示的绘图功能的接口的选择信息。可选地，所述选择信息接收模块包括：访问操作接收子模块，用于接收所述用户对所述页面上预置的图形绘制接口的访问操作；悬浮窗生成子模块，用于在所述图形绘制接口相关联的位置生成展示多种绘图功能的接口的悬浮窗；选择信息接收子模块，用于接收针对所述悬浮窗中展示的所述绘图功能的接口的选择信息。可选地，所绘制的图形为可伸缩矢量图形，不同的绘图功能对应绘制不同形状的可伸缩矢量图形；所述图形文件生成模块包括：图形选择确定子模块，用于由所选择的绘图功能的接口确定选择绘制的某种形状的图形；图形属性计算子模块，用于根据所述用户在页面的绘图区域中绘制图形的操作，计算表征所绘制的可伸缩矢量图形的展示效果的图形属性；图形文件组织子模块，用于按照预设格式将计算的图形属性组织为描述所述图形的图形文件。可选地，所述图形属性包括所绘制的可伸缩矢量图形的尺寸和所绘制的可伸缩矢量图形在所述绘图区域所处的位置；所述图形属性计算子模块包括：位置确定子单元，用于获取所述用户在所述绘图区域中绘制图形的操作的起点和终点，确定所绘制的可伸缩矢量图形在所述绘图区域所处的位置；尺寸计算子单元，用于根据绘制图形的操作的起点与终点之间的距离，计算所绘制的可伸缩矢量图形的尺寸。可选地，所述图形文件组织子模块，具体用于将计算的图形属性组织为可扩展标记语言文本格式的图形文件。可选地，所述图形文件插入模块包括：页面元素查找子模块，用于在所述页面资源文件包括的多个页面元素中查找所述绘图区域对应页面元素；标签插入子模块，用于将所述图形文件以预设的超文本标记语言标签的形式插入到所述绘图区域对应页面元素中。可选地，所述页面采用浏览器进行展示，所述浏览器上安装有用于加载所述图形的图形插件；或，所述页面采用非浏览器的其它页面应用进行展示，所述页面应用上安装有用于加载所述图形的图形插件。可选地，所述文件加载模块，具体用于所述浏览器或所述页面应用加载插入所述图形文件的页面资源文件，重新生成所述页面，其中，当加载到所述绘图区域时，所述浏览器或所述页面应用调用用于加载所述图形的图形插件，由所述图形插件解析所述图形文件并在所述绘图区域加载所述图形。可选地，所述页面本文档来自技高网...

【技术保护点】
一种在页面绘制图形的方法，包括：跟踪用户在页面的绘图区域中绘制图形的操作，生成用于描述所绘制的图形的图形文件；将生成的图形文件插入所述页面对应的页面资源文件中；加载插入所述图形文件的页面资源文件，生成在所述绘图区域展示所绘制的图形的页面。

【技术特征摘要】
1.一种在页面绘制图形的方法，包括：接收用户针对所述页面上展示的绘图功能的接口的选择信息；跟踪用户在页面的绘图区域中绘制图形的操作，生成用于描述所绘制的图形的图形文件；将生成的图形文件插入所述页面对应的页面资源文件中；加载插入所述图形文件的页面资源文件，生成在所述绘图区域展示所绘制的图形的页面；其中，所绘制的图形为可伸缩矢量图形，不同的绘图功能对应绘制不同形状的可伸缩矢量图形；所述生成用于描述所绘制的图形的图形文件包括：由所选择的绘图功能的接口确定选择绘制的某种形状的图形；根据所述用户在页面的绘图区域中绘制图形的操作，计算表征所绘制的可伸缩矢量图形的展示效果的图形属性；按照预设格式将计算的图形属性组织为描述所述图形的图形文件。2.如权利要求1所述的方法，其中，所述跟踪用户在页面的绘图区域中绘制图形的操作包括：跟踪用户操控的鼠标指针或用户在终端的触摸屏幕上的触摸点在所述页面的绘图区域中绘制图形的运动轨迹。3.如权利要求1所述的方法，其中，所述接收所述用户针对所述页面上展示的绘图功能的接口的选择信息包括：接收所述用户对所述页面上预置的图形绘制接口的访问操作；在所述图形绘制接口相关联的位置生成展示多种绘图功能的接口的悬浮窗，并接收针对所述悬浮窗中展示的所述绘图功能的接口的选择信息。4.如权利要求1所述的方法，其中，所述图形属性包括所绘制的可伸缩矢量图形的尺寸和所绘制的可伸缩矢量图形在所述绘图区域所处的位置；所述根据所述用户在页面的绘图区域中绘制图形的操作，计算所绘制的可伸缩矢量的图形属性包括：获取所述用户在所述绘图区域中绘制图形的操作的起点和终点，确定所绘制的可伸缩矢量图形在所述绘图区域所处的位置；根据绘制图形的操作的起点与终点之间的距离，计算所绘制的可伸缩矢量图形的尺寸。5.如权利要求1所述的方法，其中，所述按照预设格式将计算的图形属性组织为描述所述图形的图形文件包括：将计算的图形属性组织为可扩展标记语言文本格式的图形文件。6.如权利要求1所述的方法，其中，所述将生成的图形文件插入所述页面对应的页面资源文件中包括：在所述页面资源文件包括的多个页面元素中查找所述绘图区域对应页面元素；将所述图形文件以预设的超文本标记语言标签的形式插入到所述绘图区域对应页面元素中。7.如权利要求1所述的方法，其中：所述页面采用浏览器进行展示，所述浏览器上安装有用于加载所述图形的图形插件；或，所述页面采用非浏览器的其它页面应用进行展示，所述页面应用上安装有用于加载所述图形的图形插件。8.如权利要求7所述的方法，其中，所述加载插入所述图形文件的页面资源文件，生成在所述绘图区域展示所绘制的图形的页面包括：所述浏览器或所述页面应用加载插入所述图形文件的页面资源文件，重新生成所述页面，其中，当加载到所述绘图区域时，所述浏览器或所述页面应用调用用于加载所述图形的图形插件，由所述图形插件解析所述图形文件并在所述绘图区域加载所述图形。9.如权利要求1所述的方法，其中，所述页面为实现对交易对象的交易过程的交易网页，所述交易页面的绘图区域为以图表形式展示所述交易对象的历史交易数据的页面区域。10.一种在页面绘制图形的装置，包括：选择信息...

【专利技术属性】
技术研发人员：银国徽，
申请(专利权)人：北京奇虎科技有限公司，奇智软件北京有限公司，
类型：发明
国别省市：北京;11