CN105138642A - 一种基于html5的动态标绘方法及装置 - Google Patents

Abstract

本申请提供了一种基于HTML5的动态标绘方法及装置，方法包括：获取第一标绘对象；检测操作对象在HTML5画布中操作区域的操作；依据操作对象的操作以及与第一标绘对象对应的标绘规则将第一标绘对象绘制在HTML5画布中。本申请提供的基于HTML5的动态标绘方法及装置，在获取第一标绘对象之后，通过检测到的操作对象在HTML5画布中操作区域的操作，基于与第一标绘对象对应的标绘规则能够将第一标绘对象绘制在HTML5画布中，从而实现了基于HTML5的动态标绘。

Description

一种基于HTML5的动态标绘方法及装置

技术领域

本发明涉及标绘技术领域，尤其涉及一种基于HTML5的动态标绘方法及装置。

背景技术

计算机技术的飞速发展使得地理信息系统(GIS)领域也快速发展起来。电子地图、智能化地图导航逐渐变得强大，这就促使相应的GIS技术不断提高。动态标绘是在GIS普通标绘的基础上进行扩展，以绘制出更多的形状。通常，动态标绘被应用于作战指挥系统、指挥救援系统中，通过标绘出不同形状以指明态势，帮助指挥和分析，是电子地图强有力的补充。

目前，WEB前端技术中，HTML5的深入优化以及JS技术的全方位扩展，都为GIS系统提供了广阔的发展空间。如何实现基于HTML5的标绘是目前需要解决的问题。

发明内容

有鉴于此，本发明提供了一种基于HTML5的动态标绘方法及装置，用以实现基于HTML5的动态标绘，其技术方案如下：

一种基于HTML5的动态标绘方法，所述方法包括：

获取第一标绘对象；

检测操作对象在所述HTML5画布中操作区域的操作；

依据所述操作对象的操作以及与所述第一标绘对象对应的标绘规则将所述第一标绘对象绘制在所述HTML5画布中。

其中，所述检测操作对象在HTML5画布中操作区域的操作，具体为：

检测所述操作对象在所述HTML5画布中操作区域中的点击操作和移动操作。

其中，所述第一标绘对象为线，所述线为直线；

则依据所述操作对象的操作，以及与所述第一标绘对象对应的标绘规则将所述第一标绘对象绘制在所述HTML5画布中，包括：

在检测到所述操作对象的第一操作之后，通过擦除、重绘的方式始终连接第一位置点与所述操作对象当前的位置点，直至检测到所述操作对象的第二操作为止；

其中，所述第一位置点为所述操作对象执行所述第一操作时所处的位置点，所述操作对象执行所述第二操作时所处的位置点作为第二位置点，则所述第一标绘对象为所述第一位置点和所述第二位置点之间连接的直线。

其中，所述第一标绘对象为线，所述线为曲线或弧线；

则所述依据所述操作对象的操作，以及与所述第一标绘对象对应的标绘规则将所述第一标绘对象绘制在所述HTML5画布中，具体为：

在检测到所述操作对象的第一操作之后，通过擦除、重绘的方式始终连接第一位置点和所述操作对象当前的位置点，直至检测到所述操作对象的第二操作为止；在检测到所述操作对象的第二操作之后，通过擦除、重绘的方式始终连接第二位置点与所述操作对象当前的位置点，直至检测到所述操作对象的第三操作为止；

其中，所述第一位置点为所述操作对象执行所述第一操作时所处的位置点，所述第二位置点为所述操作对象执行所述第二操作时所处的位置点，将所述操作对象执行所述第三操作时所处的位置点作为第三位置点，所述曲线的弧度由所述第二位置点确定；所述弧线的弧度由两直线的夹角确定，所述两直线分别为连接所述第一位置点与所述第二位置点的直线，以及，连接所述第二位置点与所述第三位置点的直线，所述夹角的顶点为所述第二位置点。

其中，所述第一标绘对象为面，所述操作对象的操作至少包括两个操作；

则所述依据所述操作对象的操作，以及与所述第一标绘对象对应标绘规则将所述第一标绘对象绘制在所述HTML5画布中，具体为：

在检测到所述操作对象的操作之后，通过所述操作对象的操作确定所述第一标绘对象的参数，其中，所述第一标绘对象的参数用于确定所述第一标绘对象的形状和大小；

在确定出所述第一标绘对象的参数之后，基于所述第一标绘对象的参数生成所述第一标绘对象。

其中，所述第一标绘对象为箭头，所述箭头包括箭头主体和箭头头部；

所述依据所述操作对象的操作，以及与所述第一标绘对象对应标绘规则将所述第一标绘对象绘制在所述HTML5画布中，具体为：

在检测到所述操作对象的第一操作之后，通过所述操作对象在执行所述第一操作时所处的位置点和所述操作对象当前所处的位置点确定所述箭头主体的参数；

利用所述箭头主体的参数依据预设的计算规则计算所述箭头头部的参数；

在检测到所述操作对象的第二操作之后，基于所述箭头主体的参数和所述箭头头部的参数生成所述第一标绘对象。

一种基于HTML5的动态标绘装置，所述装置包括：

获取模块，用于获取第一标绘对象；

检测模块，用于检测操作对象在HTML5画布中操作区域的操作；

标绘模块，用于依据所述检测模块检测出的所述操作对象的操作以及与所述获取模块获取的所述第一标绘对象对应的标绘规则将所述第一标绘对象绘制在所述HTML5画布中。

其中，所述操作对象在HTML5画布中操作区域的操作包括所述操作对象在所述HTML5画布中操作区域中的点击和移动操作；

所述第一标绘对象为线，所述线为直线、曲线或弧线；

当所述第一标绘对象为直线时，所述标绘模块包括：

第一标绘子模块，用于在所述检测模块检测到所述操作对象的第一操作之后，通过擦除、重绘的方式始终连接第一位置点与所述操作对象当前的位置点，直至检测到所述操作对象的第二操作为止；

其中，所述第一位置点为所述操作对象执行所述第一操作时所处的位置点，所述操作对象执行所述第二操作时所处的位置点将作为第二位置点，则所述第一标绘对象为所述第一位置点和所述第二位置点之间连接的直线。

当所述第一标绘对象为曲线或弧线时，所述标绘模块包括：

第二标绘子模块，在检测到所述操作对象的第一操作之后，通过擦除、重绘的方式始终连接第一位置点和所述操作对象当前的位置点，直至检测到所述操作对象的第二操作为止；在检测到所述操作对象的第二操作之后，通过擦除、重绘的方式始终连接第二位置点与所述操作对象当前的位置点，直至检测到所述操作对象的第三操作为止；

其中，所述第一位置点为所述操作对象执行所述第一操作时所处的位置点，所述第二位置点为所述操作对象执行所述第二操作时所处的位置点，将所述操作对象执行所述第三操作时所处的位置点作为第三位置点，所述曲线的弧度由所述第二位置点确定；所述弧线的弧度由两直线的夹角确定，所述两直线分别为连接所述第一位置点与所述第二位置点的直线，以及，连接所述第二位置点与所述第三位置点的直线，所述夹角的顶点为所述第二位置点。

其中，所述操作对象在HTML5画布中操作区域的操作包括所述操作对象在所述HTML5画布中操作区域中的点击和移动操作；

所述第一标绘对象为面，所述操作对象的操作至少包括两个操作，则所述标绘模块包括：

第一确定子模块，用于在所述检测模块检测到所述操作对象的操作之后，通过所述操作对象的操作确定所述第一标绘对象的参数，其中，所述第一标绘对象的参数用于确定所述第一标绘对象的形状和大小；

第一绘制子模块，用于在所述第一确定子模块确定出所述第一标绘对象的参数之后，基于所述第一标绘对象的参数生成所述第一标绘对象。

其中，所述操作对象在HTML5画布中操作区域的操作包括所述操作对象在所述HTML5画布中操作区域中的点击和移动操作；

所述第一标绘对象为箭头，所述箭头包括箭头主体和箭头头部，则所述标绘模块包括：

第二确定子模块，用于在所述检测模块检测到所述操作对象的第一操作之后，通过所述操作对象在执行所述第一操作时所处的位置点和所述操作对象当前所处的位置点确定所述箭头主体的参数；

计算子模块，用于利用所述第二确定子模块确定出的所述箭头主体的参数依据预设的计算规则计算所述箭头头部的参数；

第二绘制子模块，在检测到所述操作对象的第二操作之后，基于所述第二确定子模块确定出的所述箭头主体的参数和所述计算子模块计算出的所述箭头头部的参数生成所述第一标绘对象。

上述技术方案具有如下有益效果：

本发明提供的基于HTML5的动态标绘方法及装置，在获取第一标绘对象之后，通过检测到的操作对象在HTML5画布中操作区域的操作，基于与第一标绘对象对应的标绘规则能够将第一标绘对象绘制在HTML5画布中，从而实现了基于HTML5的动态标绘。

附图说明

图1为本发明实施例提供的基于HTML5的动态标绘方法的一流程示意图；

图2为本发明实施例提供的当第一标绘对象为线时，依据操作对象的操作，以及与第一标绘对象对应标绘规则将第一标绘对象绘制在HTML5画布中的一种可能的实现方式的流程示意图；

图3为本发明实施例提供的当第一标绘对象为面时，依据操作对象的操作，以及与第一标绘对象对应标绘规则将第一标绘对象绘制在HTML5画布中的一种可能的实现方式的流程示意图；

图4为本发明实施例提供的当第一标绘对象为箭头时，依据操作对象的操作，以及与第一标绘对象对应标绘规则将第一标绘对象绘制在HTML5画布中的一种可能的实现方式的流程示意图；

图5为本发明实施例提供的基于HTML5的动态标绘装置的一种结构示意图。

具体实施方式

下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

请参阅图1，为本发明实施例提供的基于HTML5的动态标绘方法的一流程示意图，该方法可以包括：

步骤S101：获取第一标绘对象。

步骤S102：检测操作对象在HTML5画布中操作区域的操作。

步骤S103：依据操作对象的操作以及与第一标绘对象对应的标绘规则将第一标绘对象绘制在HTML5画布中。

本发明实施例提供的基于HTML5的动态标绘方法，在获取第一标绘对象之后，通过检测到的操作对象在HTML5画布中操作区域的操作，基于与第一标绘对象对应的标绘规则能够将第一标绘对象绘制在HTML5画布中，从而实现了基于HTML5的动态标绘。

伴随着全国信息化进程的不断推进，以GIS为基础的动态标绘、资源部署、情报展示、应急指挥等可视化动态图形展示在军事、海洋、地震、民政等行业得到越来越多的应用。在一种具体的实现方式中，本发明实施例提供的基于HTML5的动态标绘方法可以为基于HTML5的GIS动态标绘方法。基于HTML5的GIS动态标绘方法，即在GIS普通标绘的基础上进行扩展，以绘制出更多的形状，即上述实施例中的第一标绘对象可以为以GIS为基础动态标绘的多种图形。

具体的，在上述实施例中，第一标绘对象可以为线，线是由点组成的。

进一步的，线可以为直线，可以为曲线，还可以或弧线。

当所述第一标绘对象为直线时，在一种可能的实现方式中，依据操作对象的操作，以及与第一标绘对象对应的标绘规则将第一标绘对象绘制在HTML5画布中，具体为：在检测到所述操作对象的第一操作之后，通过擦除、重绘的方式始终连接第一位置点与操作对象当前的位置点，直至检测到操作对象的第二操作为止。

其中，第一操作用于指示开始标绘，第二操作用于指示结束标绘，第一位置点为操作对象执行第一操作时所处的位置点，操作对象执行第二操作时所处的位置点将作为第二位置点，则第一标绘对象为第一位置点和第二位置点之间连接的直线。

示例性的，操作对象为鼠标，第一操作为鼠标在HTML5画布中的单击操作，第二操作为鼠标在HTML5画布中的双击操作。在绘制直线时，用户握持鼠标，单击HTML5画布，拖动鼠标，双击结束。在拖动鼠标过程中，不断擦除、重绘，始终连接绘制起点与鼠标当前所在的位置点，直至鼠标双击结束。

需要说明的是，用户可通过上述方法绘制直线，也可根据需要绘制折线，折线可通过上述方式绘制多条直线，然后将多条直线连接得到。

当第一标绘对象为曲线或弧线时，请参阅图2，示出了依据操作对象的操作，以及与第一标绘对象对应标绘规则将第一标绘对象绘制在HTML5画布中的一种可能的实现方式的流程示意图，可以包括：

步骤S201：在检测到操作对象的第一操作之后，通过擦除、重绘的方式始终连接第一位置点和操作对象当前的位置点，直至检测到操作对象的第二操作为止。

其中，第一位置点为操作对象执行第一操作时所处的位置点。

步骤S202：在检测到操作对象的第二操作之后，通过擦除、重绘的方式始终连接第二位置点和操作对象当前的位置点，直至检测到操作对象的第三操作为止。

其中，第二位置点为操作对象执行第二操作时所处的位置点。将操作对象执行第三操作时所处的位置点作为第三位置点。

需要说明的是，当第一标绘对象为曲线时，曲线的弧度由第二位置点确定。当第一标绘对象为弧线时，弧线的弧度由两直线的夹角确定，该两直线分别为连接第一位置点与第二位置点的直线，以及，连接第二位置点与第三位置点的直线，夹角的顶点为第二位置点。需要说明的，弧线的弯曲是规则的。在确定弧线弧度的过程中，上述两直线夹角的计算均是在HTML5画布中规定的平面直角坐标系中进行。

示例性的，操作对象为鼠标，第一操作为鼠标在HTML5画布中的单击操作，第二操作为鼠标在HTML5画布中的单击操作，第三操作为鼠标在HTML5画布中的双击操作。一条曲线至少由三个点击的点形成，用户握持鼠标，单击HTML5画布，拖动鼠标，再单击HTML5画布，拖动鼠标，双击HTML5画布结束。与绘制直线类似，在拖动鼠标过程中，不断擦除、重绘。弧线的绘制与曲线类似，在此不做赘述。

需要说明的，曲线的弧度通过一控制点决定，该控制点即为上述的第二位置点。曲线可基于贝塞尔曲线来绘制，可以是一条简单的三阶贝塞尔曲线，也可以是多条三阶贝塞尔曲线的拟合。

在上述实施例中，第一标绘对象可以为面。面即是闭合的线。

进一步的，面可以包括规则面和不规则面，规则面可以为圆、扇形、椭圆、矩形等，不规则面即为曲线面。

当第一标绘对象为规则面时，请参阅图3，示出了依据操作对象的操作，以及与第一标绘对象对应的标绘规则将第一标绘对象绘制在HTML5画布中的一种可能的实现方式的流程示意图，可以包括：

步骤S301：在检测到操作对象的操作之后，通过操作对象的操作确定第一标绘对象的参数。

其中，第一标绘对象的参数用于确定第一标绘对象的形状和大小，即用于确定面的形状和大小。

步骤S302：在确定出第一标绘对象的参数之后，基于第一标绘对象的参数生成第一标绘对象。

下面分别以规则面中的圆、扇形、矩形为例对上述实现方式进行说明。

第一标绘对象为圆：圆的大小通过半径确定。上述操作对象的操作包括第一操作(指示开始标绘)和第二操作(指示结束标绘)。当检测到第一操作时，将操作对象执行第一操作的位置点作为圆心，在检测到第二操作时，确定操作对象执行第一操作的位置点与操作对象执行第二操作的位置点之间的距离，并将确定出的距离作为圆的半径绘制圆。对于用户而言，以操作对象为鼠标为例，绘制圆的过程为：用户握持鼠标点击HTML5画布中的第一位置点开始绘制，然后拖动鼠标，再用鼠标点击HTML5画布中的第二位置点结束绘制。画布上生成的圆即是以第一位置点为圆心，第一位置点与第二位置点直线的距离为半径的圆。

需要说明的是，椭圆与圆类似，是在圆的基础上压缩坐标系而成，另外，椭圆也可通过两条贝塞尔曲线平滑连接而成。

第一标绘对象为扇形：扇形是圆的一部分，扇形的大小通过半径和圆心角确定。上述操作对象的操作包括第一操作(指示开始标绘)、第二操作和第三操作(指示结束标绘)。当检测到第一操作时，将操作对象执行第一操作的位置点作为圆心，在检测到第二操作时，确定操作对象执行第一操作的位置点与操作对象执行第二操作的位置点之间的距离，并将确定出的距离作为扇形的半径，在检测到第三操作时，通过操作对象执行第三操作时所处位置点计算圆心角，最后基于确定的半径和计算出的圆心角生成扇形。对于用户而言，以操作对象为鼠标为例，绘制圆的过程为：用户握持鼠标点击HTML5画布中的第一位置点开始绘制，然后拖动鼠标，再用鼠标点击HTML5画布中的第二位置点，然后移动鼠标点击HTML5画布中的第三位置点结束绘制。HTML5画布上生成的扇形的圆心为第一位置点，半径为第一位置点与第二位置点直线的距离，圆心角为通过第三位置点计算出的圆心角。

第一标绘对象为矩形：矩形的大小通过对角线确定。上述操作对象的操作包括第一操作(指示开始标绘)、第二操作(指示结束标绘)。首先通过第一操作和第二操作确定矩形的一条对角线，并将操作对象执行第一操作时所处的位置点作为矩形的第一个顶点，将操作对象执行第二操作时所处的位置点作为矩形的第二个顶点，然后通过确定出的对角线确定矩形的第三个顶点和第四个顶点，最后连接四个顶点便生成矩形。对于用户而言，以操作对象为鼠标为例，绘制矩形的过程为：用户握持鼠标点击HTML5画布中的第一位置点开始绘制，然后拖动鼠标，再用鼠标点击HTML5画布中的第二位置点结束绘制。画布上生成的矩形即是以第一位置点与第二位置点之间连接的直线为对角线的矩形。

另外，对于多边形而言，其是由连接操作对象点击的多个点而成的闭合图形。多边形的大小和形状由操作对象多次点击的位置点确定。

而对于不规则面，与多边形类似，同样是连接操作对象点击的多个点而成的闭合图形。与多边形不同的时，不规则面中连接各点的线为曲线，而多边形中连接各点的线为直线。

在上述实施例中，第一标绘对象可以为箭头。其中，箭头可以包括箭头主体和箭头头部。

请参阅图4，示出了当第一标绘对象为箭头时，依据操作对象的操作，以及与第一标绘对象对应的标绘规则将第一标绘对象绘制在HTML5画布中的一种可能的实现方式的流程示意图，可以包括：

步骤S401：在检测到操作对象的第一操作之后，通过操作对象在执行第一操作时所处的位置点和操作对象当前所处的位置点确定箭头主体的参数。

步骤S402：利用箭头主体的参数依据预设的计算规则计算箭头头部的参数。

步骤S403：在检测到操作对象的第二操作之后，基于箭头主体的参数和箭头头部的参数生成第一标绘对象。

进一步的，动态标绘的箭头可以为简单箭头、空心箭头和曲线箭头。

其中，简单箭头由一条主线(箭头主体)和由两条交于顶点的短直线(箭头头部)组成，主线通过操作对象的两个点击操作确定。上述箭头主体的参数具体为通过两点确定的主线的长度。箭头头部短线的长度可以通过主线确定，具体的，箭头头部短线的长度可以设定为固定比例的主线长度。短线与主线的夹角可根据比例计算得出，箭头的方向可由主线与水平轴的夹角确定。

示例性的，操作对象为鼠标，在绘制过程中，用户先用鼠标在HTML5画布中点击一点作为起始点，然后移动鼠标得到第二个点，此时计算箭头方向、箭头头部短线的长度、短线与主线的夹角，得到箭头形状，随着与起始点距离的远近变化，箭头的大小也随之变大或变小，最后点击HTML5画布结束绘制，得到简单箭头。

空心箭头为直线与简单箭头的结合，在绘制空心箭头时，用户先用鼠标在HTML5画布中点击一点作为起始点，然后移动鼠标得到第二个点，此时计算箭头方向、箭头头部短线的长度、短线与主线的夹角，得到箭头形状，最后点击HTML5画布结束绘制。与简单箭头不同的时，空心箭头把主线扩展成面(即多边形)，箭头头部的短直线同样扩展成面。

曲线箭头是在空心箭头的基础上，保持箭头的头部形状不变，箭头尾部的多边形随着鼠标的点击和移动形成弯曲的空心曲线，绘制过程与空心箭头类似，区别在于，在绘制时可以通过多次点击，使箭头主体部分形成弯曲的曲线，即，箭头主体的形状通过多次点击操作确定。

与上述方法相对应，本发明实施例还提供了一种基于HTML5的动态标绘装置，请参阅图5，示出了该装置的结构示意图，该装置可以包括：获取模块501、检测模块502和标绘模块503。其中：

获取模块501，用于获取第一标绘对象。

检测模块502，用于检测操作对象在HTML5画布中操作区域的操作。

标绘模块503，用于依据检测模块502检测的操作对象的操作以及与获取模块501获取的第一标绘对象对应的标绘规则将第一标绘对象绘制在HTML5画布中。

本发明实施例提供的基于HTML5的动态标绘装置，在获取第一标绘对象之后，通过检测到的操作对象在HTML5画布中操作区域的操作，基于与第一标绘对象对应的标绘规则能够将第一标绘对象绘制在HTML5画布中，从而实现了基于HTML5的动态标绘。

进一步的，上述实施例中的检测模块502，具体用于检测操作对象在HTML5画布中操作区域中的点击和移动操作。

在上述实施例中，第一标绘对象可以为线，进一步的，线为直线、曲线或弧线。

当第一标绘对象为直线时，标绘模块503可以包括：第一标绘子模块。

第一标绘子模块，用于在检测模块502检测到操作对象的第一操作之后，通过擦除、重绘的方式始终连接第一位置点与操作对象当前的位置点，直至检测到所述操作对象的第二操作为止。

其中，第一操作用于指示开始标绘，第二操作用于指示结束标绘，第一位置点为操作对象执行第一操作时所处的位置点，操作对象执行第二操作时所处的位置点将作为第二位置点，则第一标绘对象为第一位置点和第二位置点之间连接的直线。

当第一标绘对象为曲线或弧线时，标绘模块503包括：第二标绘子模块。

第二标绘子模块，在检测到操作对象的第一操作之后，通过擦除、重绘的方式始终连接第一位置点和操作对象当前的位置点，直至检测到操作对象的第二操作为止；在检测到操作对象的第二操作之后，通过擦除、重绘的方式始终连接第二位置点与操作对象当前的位置点，直至检测到操作对象的第三操作为止。

其中，第一位置点为所述操作对象执行第一操作时所处的位置点，第二位置点为操作对象执行第二操作时所处的位置点，将操作对象执行第三操作时所处的位置点作为第三位置点，曲线的弧度由第二位置点确定；弧线的弧度由两直线的夹角确定，该两直线分别为连接第一位置点与第二位置点的直线，以及，连接第二位置点与第三位置点的直线，夹角的顶点为第二位置点。

在上述实施例中，第一标绘对象为面，操作对象的操作至少包括两个操作；

所述标绘模块包括：第一确定子模块和第一绘制子模块。其中：

第一确定子模块，用于在检测模块502检测到操作对象的操作之后，通过操作对象的操作确定第一标绘对象的参数。

其中，第一标绘对象的参数用于确定第一标绘对象的形状和大小。

第一绘制子模块，用于在第一确定子模块确定出第一标绘对象的参数之后，基于第一标绘对象的参数生成第一标绘对象。

在上述实施例中，第一标绘对象为箭头，箭头包括箭头主体和箭头头部。

则标绘模块包括：第二确定模块子、计算子模块和第二绘制子模块。其中：

第二确定子模块，用于在检测模块502检测到操作对象的第一操作之后，通过操作对象在执行第一操作时所处的位置点和操作对象当前所处的位置点确定箭头主体的参数。

计算子模块，用于利用第二确定子模块确定出的箭头主体的参数依据预设的计算规则计算箭头头部的参数。

第二绘制子模块，用于在检测模块502检测到操作对象的第二操作之后，基于第二确定子模块确定出的箭头主体的参数和计算子模块计算出的箭头头部的参数生成第一标绘对象。

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

对所提供的实施例的上述说明，使本领域专业技术人员能够实现或使用本发明。对这些实施例的多种修改对本领域的专业技术人员来说将是显而易见的，本文中所定义的一般原理可以在不脱离本发明的精神或范围的情况下，在其它实施例中实现。因此，本发明将不会被限制于本文所示的这些实施例，而是要符合与本文所提供的原理和新颖特点相一致的最宽的范围。

Claims (10)

1.一种基于HTML5的动态标绘方法，其特征在于，所述方法包括：

获取第一标绘对象；

检测操作对象在所述HTML5画布中操作区域的操作；

依据所述操作对象的操作以及与所述第一标绘对象对应的标绘规则将所述第一标绘对象绘制在所述HTML5画布中。

2.根据权利要求1所述的方法，其特征在于，所述检测操作对象在HTML5画布中操作区域的操作，具体为：

检测所述操作对象在所述HTML5画布中操作区域中的点击操作和移动操作。

3.根据权利要求2所述的方法，其特征在于，所述第一标绘对象为线，所述线为直线；

则依据所述操作对象的操作，以及与所述第一标绘对象对应的标绘规则将所述第一标绘对象绘制在所述HTML5画布中，包括：

在检测到所述操作对象的第一操作之后，通过擦除、重绘的方式始终连接第一位置点与所述操作对象当前的位置点，直至检测到所述操作对象的第二操作为止；

其中，所述第一位置点为所述操作对象执行所述第一操作时所处的位置点，所述操作对象执行所述第二操作时所处的位置点作为第二位置点，则所述第一标绘对象为所述第一位置点和所述第二位置点之间连接的直线。

4.根据权利要求2所述的方法，其特征在于，所述第一标绘对象为线，所述线为曲线或弧线；

则所述依据所述操作对象的操作，以及与所述第一标绘对象对应的标绘规则将所述第一标绘对象绘制在所述HTML5画布中，具体为：

在检测到所述操作对象的第一操作之后，通过擦除、重绘的方式始终连接第一位置点和所述操作对象当前的位置点，直至检测到所述操作对象的第二操作为止；在检测到所述操作对象的第二操作之后，通过擦除、重绘的方式始终连接第二位置点与所述操作对象当前的位置点，直至检测到所述操作对象的第三操作为止；

其中，所述第一位置点为所述操作对象执行所述第一操作时所处的位置点，所述第二位置点为所述操作对象执行所述第二操作时所处的位置点，将所述操作对象执行所述第三操作时所处的位置点作为第三位置点，所述曲线的弧度由所述第二位置点确定；所述弧线的弧度由两直线的夹角确定，所述两直线分别为连接所述第一位置点与所述第二位置点的直线，以及，连接所述第二位置点与所述第三位置点的直线，所述夹角的顶点为所述第二位置点。

5.根据权利要求2所述的方法，其特征在于，所述第一标绘对象为面，所述操作对象的操作至少包括两个操作；

则所述依据所述操作对象的操作，以及与所述第一标绘对象对应标绘规则将所述第一标绘对象绘制在所述HTML5画布中，具体为：

在检测到所述操作对象的操作之后，通过所述操作对象的操作确定所述第一标绘对象的参数，其中，所述第一标绘对象的参数用于确定所述第一标绘对象的形状和大小；

在确定出所述第一标绘对象的参数之后，基于所述第一标绘对象的参数生成所述第一标绘对象。

6.根据权利要求2所述的方法，其特征在于，所述第一标绘对象为箭头，所述箭头包括箭头主体和箭头头部；

所述依据所述操作对象的操作，以及与所述第一标绘对象对应标绘规则将所述第一标绘对象绘制在所述HTML5画布中，具体为：

在检测到所述操作对象的第一操作之后，通过所述操作对象在执行所述第一操作时所处的位置点和所述操作对象当前所处的位置点确定所述箭头主体的参数；

利用所述箭头主体的参数依据预设的计算规则计算所述箭头头部的参数；

在检测到所述操作对象的第二操作之后，基于所述箭头主体的参数和所述箭头头部的参数生成所述第一标绘对象。

7.一种基于HTML5的动态标绘装置，其特征在于，所述装置包括：

获取模块，用于获取第一标绘对象；

检测模块，用于检测操作对象在HTML5画布中操作区域的操作；

标绘模块，用于依据所述检测模块检测出的所述操作对象的操作以及与所述获取模块获取的所述第一标绘对象对应的标绘规则将所述第一标绘对象绘制在所述HTML5画布中。

8.根据权利要求7所述的装置，其特征在于，所述操作对象在HTML5画布中操作区域的操作包括所述操作对象在所述HTML5画布中操作区域中的点击和移动操作；

所述第一标绘对象为线，所述线为直线、曲线或弧线；

当所述第一标绘对象为直线时，所述标绘模块包括：

第一标绘子模块，用于在所述检测模块检测到所述操作对象的第一操作之后，通过擦除、重绘的方式始终连接第一位置点与所述操作对象当前的位置点，直至检测到所述操作对象的第二操作为止；

其中，所述第一位置点为所述操作对象执行所述第一操作时所处的位置点，所述操作对象执行所述第二操作时所处的位置点将作为第二位置点，则所述第一标绘对象为所述第一位置点和所述第二位置点之间连接的直线。

当所述第一标绘对象为曲线或弧线时，所述标绘模块包括：

第二标绘子模块，在检测到所述操作对象的第一操作之后，通过擦除、重绘的方式始终连接第一位置点和所述操作对象当前的位置点，直至检测到所述操作对象的第二操作为止；在检测到所述操作对象的第二操作之后，通过擦除、重绘的方式始终连接第二位置点与所述操作对象当前的位置点，直至检测到所述操作对象的第三操作为止；

其中，所述第一位置点为所述操作对象执行所述第一操作时所处的位置点，所述第二位置点为所述操作对象执行所述第二操作时所处的位置点，将所述操作对象执行所述第三操作时所处的位置点作为第三位置点，所述曲线的弧度由所述第二位置点确定；所述弧线的弧度由两直线的夹角确定，所述两直线分别为连接所述第一位置点与所述第二位置点的直线，以及，连接所述第二位置点与所述第三位置点的直线，所述夹角的顶点为所述第二位置点。

9.根据权利要求7所述的装置，其特征在于，所述操作对象在HTML5画布中操作区域的操作包括所述操作对象在所述HTML5画布中操作区域中的点击和移动操作；

所述第一标绘对象为面，所述操作对象的操作至少包括两个操作，则所述标绘模块包括：

第一确定子模块，用于在所述检测模块检测到所述操作对象的操作之后，通过所述操作对象的操作确定所述第一标绘对象的参数，其中，所述第一标绘对象的参数用于确定所述第一标绘对象的形状和大小；

第一绘制子模块，用于在所述第一确定子模块确定出所述第一标绘对象的参数之后，基于所述第一标绘对象的参数生成所述第一标绘对象。

10.根据权利要求7所述的装置，其特征在于，所述操作对象在HTML5画布中操作区域的操作包括所述操作对象在所述HTML5画布中操作区域中的点击和移动操作；

所述第一标绘对象为箭头，所述箭头包括箭头主体和箭头头部，则所述标绘模块包括：

第二确定子模块，用于在所述检测模块检测到所述操作对象的第一操作之后，通过所述操作对象在执行所述第一操作时所处的位置点和所述操作对象当前所处的位置点确定所述箭头主体的参数；

计算子模块，用于利用所述第二确定子模块确定出的所述箭头主体的参数依据预设的计算规则计算所述箭头头部的参数；

第二绘制子模块，在检测到所述操作对象的第二操作之后，基于所述第二确定子模块确定出的所述箭头主体的参数和所述计算子模块计算出的所述箭头头部的参数生成所述第一标绘对象。