一种基于html5的动态标绘方法及装置的制造方法
【技术领域】
[0001]本发明涉及标绘技术领域，尤其涉及一种基于HTML5的动态标绘方法及装置。
【背景技术】
[0002]计算机技术的飞速发展使得地理信息系统(GIS)领域也快速发展起来。电子地图、智能化地图导航逐渐变得强大，这就促使相应的GIS技术不断提高。动态标绘是在GIS普通标绘的基础上进行扩展，以绘制出更多的形状。通常，动态标绘被应用于作战指挥系统、指挥救援系统中，通过标绘出不同形状以指明态势，帮助指挥和分析，是电子地图强有力的补充。
[0003]目前，WEB前端技术中，HTML5的深入优化以及JS技术的全方位扩展，都为GIS系统提供了广阔的发展空间。如何实现基于HTML5的标绘是目前需要解决的问题。
【发明内容】
[0004]有鉴于此，本发明提供了一种基于HTML5的动态标绘方法及装置，用以实现基于HTML5的动态标绘，其技术方案如下:
[0005]—种基于HTML5的动态标绘方法，所述方法包括:
[0006]获取第一标绘对象；
[0007]检测操作对象在所述HTML5画布中操作区域的操作；
[0008]依据所述操作对象的操作以及与所述第一标绘对象对应的标绘规则将所述第一标绘对象绘制在所述HTML5画布中。
[0009]其中，所述检测操作对象在HTML5画布中操作区域的操作，具体为:
[0010]检测所述操作对象在所述HTML5画布中操作区域中的点击操作和移动操作。
[0011]其中，所述第一标绘对象为线，所述线为直线；
[0012]则依据所述操作对象的操作，以及与所述第一标绘对象对应的标绘规则将所述第一标绘对象绘制在所述HTML5画布中，包括:
[0013]在检测到所述操作对象的第一操作之后，通过擦除、重绘的方式始终连接第一位置点与所述操作对象当前的位置点，直至检测到所述操作对象的第二操作为止；
[0014]其中，所述第一位置点为所述操作对象执行所述第一操作时所处的位置点，所述操作对象执行所述第二操作时所处的位置点作为第二位置点，则所述第一标绘对象为所述第一位置点和所述第二位置点之间连接的直线。
[0015]其中，所述第一标绘对象为线，所述线为曲线或弧线；
[0016]则所述依据所述操作对象的操作，以及与所述第一标绘对象对应的标绘规则将所述第一标绘对象绘制在所述HTML5画布中，具体为:
[0017]在检测到所述操作对象的第一操作之后，通过擦除、重绘的方式始终连接第一位置点和所述操作对象当前的位置点，直至检测到所述操作对象的第二操作为止；在检测到所述操作对象的第二操作之后，通过擦除、重绘的方式始终连接第二位置点与所述操作对象当前的位置点，直至检测到所述操作对象的第三操作为止；
[0018]其中，所述第一位置点为所述操作对象执行所述第一操作时所处的位置点，所述第二位置点为所述操作对象执行所述第二操作时所处的位置点，将所述操作对象执行所述第三操作时所处的位置点作为第三位置点，所述曲线的弧度由所述第二位置点确定；所述弧线的弧度由两直线的夹角确定，所述两直线分别为连接所述第一位置点与所述第二位置点的直线，以及，连接所述第二位置点与所述第三位置点的直线，所述夹角的顶点为所述第二位置点。
[0019]其中，所述第一标绘对象为面，所述操作对象的操作至少包括两个操作；
[0020]则所述依据所述操作对象的操作，以及与所述第一标绘对象对应标绘规则将所述第一标绘对象绘制在所述HTML5画布中，具体为:
[0021]在检测到所述操作对象的操作之后，通过所述操作对象的操作确定所述第一标绘对象的参数，其中，所述第一标绘对象的参数用于确定所述第一标绘对象的形状和大小；
[0022]在确定出所述第一标绘对象的参数之后，基于所述第一标绘对象的参数生成所述第一标绘对象。
[0023]其中，所述第一标绘对象为箭头，所述箭头包括箭头主体和箭头头部；
[0024]所述依据所述操作对象的操作，以及与所述第一标绘对象对应标绘规则将所述第一标绘对象绘制在所述HTML5画布中，具体为:
[0025]在检测到所述操作对象的第一操作之后，通过所述操作对象在执行所述第一操作时所处的位置点和所述操作对象当前所处的位置点确定所述箭头主体的参数；
[0026]利用所述箭头主体的参数依据预设的计算规则计算所述箭头头部的参数；
[0027]在检测到所述操作对象的第二操作之后，基于所述箭头主体的参数和所述箭头头部的参数生成所述第一标绘对象。
[0028]—种基于HTML5的动态标绘装置，所述装置包括:
[0029]获取模块，用于获取第一标绘对象；
[0030]检测模块，用于检测操作对象在HTML5画布中操作区域的操作；
[0031]标绘模块，用于依据所述检测模块检测出的所述操作对象的操作以及与所述获取模块获取的所述第一标绘对象对应的标绘规则将所述第一标绘对象绘制在所述HTML5画布中。
[0032]其中，所述操作对象在HTML5画布中操作区域的操作包括所述操作对象在所述HTML5画布中操作区域中的点击和移动操作；
[0033]所述第一标绘对象为线，所述线为直线、曲线或弧线；
[0034]当所述第一标绘对象为直线时，所述标绘模块包括:
[0035]第一标绘子模块，用于在所述检测模块检测到所述操作对象的第一操作之后，通过擦除、重绘的方式始终连接第一位置点与所述操作对象当前的位置点，直至检测到所述操作对象的第二操作为止；
[0036]其中，所述第一位置点为所述操作对象执行所述第一操作时所处的位置点，所述操作对象执行所述第二操作时所处的位置点将作为第二位置点，则所述第一标绘对象为所述第一位置点和所述第二位置点之间连接的直线。
[0037]当所述第一标绘对象为曲线或弧线时，所述标绘模块包括:
[0038]第二标绘子模块，在检测到所述操作对象的第一操作之后，通过擦除、重绘的方式始终连接第一位置点和所述操作对象当前的位置点，直至检测到所述操作对象的第二操作为止；在检测到所述操作对象的第二操作之后，通过擦除、重绘的方式始终连接第二位置点与所述操作对象当前的位置点，直至检测到所述操作对象的第三操作为止；
[0039]其中，所述第一位置点为所述操作对象执行所述第一操作时所处的位置点，所述第二位置点为所述操作对象执行所述第二操作时所处的位置点，将所述操作对象执行所述第三操作时所处的位置点作为第三位置点，所述曲线的弧度由所述第二位置点确定；所述弧线的弧度由两直线的夹角确定，所述两直线分别为连接所述第一位置点与所述第二位置点的直线，以及，连接所述第二位置点与所述第三位置点的直线，所述夹角的顶点为所述第二位置点。
[0040]其中，所述操作对象在HTML5画布中操作区域的操作包括所述操作对象在所述HTML5画布中操作区域中的点击和移动操作；
[0041]所述第一标绘对象为面，所述操作对象的操作至少包括两个操作，则所述标绘模块包括:
[0042]第一确定子模块，用于在所述检测模块检测到所述操作对象的操作之后，通过所述操作对象的操作确定所述第一标绘对象的参数，其中，所述第一标绘对象的参数用于确定所述第一标绘对象的形状和大小；
[0043]第一绘制子模块，用于在所述第一确定子模块确定出所述第一标绘对象的参数之后，基于所述第一标绘对象的参数生成所述第一标绘对象。
[0044]其中，所述操作对象在HTML5画布中操作区域的操作包括所述操作对象在所述HTML5画布中操作区域中的点击和移动操作；
[0045]所述第一标绘对象为箭头，所述箭头包括箭头主体和箭头头部，则所述标绘模块包括:
[0046]第二确定子模块，用于在所述检测模块检测到所述操作对象的第一操作之后，通过所述操作对象在执行所述第一操作时所处的位置点和所述操作对象当前所处的位置点确定所述箭头主体的参数；
[0047]计算子模块，用于利用所述第二确定子模块确定出的所述箭头主体的参数依据预设的计算规则计算所述箭头头部的参数；
[0048]第二绘制子模块，在检测到所述操作对