一种基于html5的动态标绘方法及装置的制造方法_2

文档序号:9417474阅读:来源:国知局
象的第二操作之后,基于所述第二确定子模块确定出的所述箭头主体的参数和所述计算子模块计算出的所述箭头头部的参数生成所述第一标绘对象。
[0049]上述技术方案具有如下有益效果:
[0050]本发明提供的基于HTML5的动态标绘方法及装置,在获取第一标绘对象之后,通过检测到的操作对象在HTML5画布中操作区域的操作,基于与第一标绘对象对应的标绘规则能够将第一标绘对象绘制在HTML5画布中,从而实现了基于HTML5的动态标绘。
【附图说明】
[0051]图1为本发明实施例提供的基于HTML5的动态标绘方法的一流程示意图;
[0052]图2为本发明实施例提供的当第一标绘对象为线时,依据操作对象的操作,以及与第一标绘对象对应标绘规则将第一标绘对象绘制在HTML5画布中的一种可能的实现方式的流程示意图;
[0053]图3为本发明实施例提供的当第一标绘对象为面时,依据操作对象的操作,以及与第一标绘对象对应标绘规则将第一标绘对象绘制在HTML5画布中的一种可能的实现方式的流程示意图;
[0054]图4为本发明实施例提供的当第一标绘对象为箭头时,依据操作对象的操作,以及与第一标绘对象对应标绘规则将第一标绘对象绘制在HTML5画布中的一种可能的实现方式的流程示意图;
[0055]图5为本发明实施例提供的基于HTML5的动态标绘装置的一种结构示意图。
【具体实施方式】
[0056]下面将结合本发明实施例中的附图,对本发明实施例中的技术方案进行清楚、完整地描述,显然,所描述的实施例仅仅是本发明一部分实施例,而不是全部的实施例。基于本发明中的实施例,本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例,都属于本发明保护的范围。
[0057]请参阅图1,为本发明实施例提供的基于HTML5的动态标绘方法的一流程示意图,该方法可以包括:
[0058]步骤SlOl:获取第一标绘对象。
[0059]步骤S102:检测操作对象在HTML5画布中操作区域的操作。
[0060]步骤S103:依据操作对象的操作以及与第一标绘对象对应的标绘规则将第一标绘对象绘制在HTML5画布中。
[0061]本发明实施例提供的基于HTML5的动态标绘方法,在获取第一标绘对象之后,通过检测到的操作对象在HTML5画布中操作区域的操作,基于与第一标绘对象对应的标绘规则能够将第一标绘对象绘制在HTML5画布中,从而实现了基于HTML5的动态标绘。
[0062]伴随着全国信息化进程的不断推进,以GIS为基础的动态标绘、资源部署、情报展示、应急指挥等可视化动态图形展示在军事、海洋、地震、民政等行业得到越来越多的应用。在一种具体的实现方式中,本发明实施例提供的基于HTML5的动态标绘方法可以为基于HTML5的GIS动态标绘方法。基于HTML5的GIS动态标绘方法,即在GIS普通标绘的基础上进行扩展,以绘制出更多的形状,即上述实施例中的第一标绘对象可以为以GIS为基础动态标绘的多种图形。
[0063]具体的,在上述实施例中,第一标绘对象可以为线,线是由点组成的。
[0064]进一步的,线可以为直线,可以为曲线,还可以或弧线。
[0065]当所述第一标绘对象为直线时,在一种可能的实现方式中,依据操作对象的操作,以及与第一标绘对象对应的标绘规则将第一标绘对象绘制在HTML5画布中,具体为:在检测到所述操作对象的第一操作之后,通过擦除、重绘的方式始终连接第一位置点与操作对象当前的位置点,直至检测到操作对象的第二操作为止。
[0066]其中,第一操作用于指示开始标绘,第二操作用于指示结束标绘,第一位置点为操作对象执行第一操作时所处的位置点,操作对象执行第二操作时所处的位置点将作为第二位置点,则第一标绘对象为第一位置点和第二位置点之间连接的直线。
[0067]示例性的,操作对象为鼠标,第一操作为鼠标在HTML5画布中的单击操作,第二操作为鼠标在HTML5画布中的双击操作。在绘制直线时,用户握持鼠标,单击HTML5画布,拖动鼠标,双击结束。在拖动鼠标过程中,不断擦除、重绘,始终连接绘制起点与鼠标当前所在的位置点,直至鼠标双击结束。
[0068]需要说明的是,用户可通过上述方法绘制直线,也可根据需要绘制折线,折线可通过上述方式绘制多条直线,然后将多条直线连接得到。
[0069]当第一标绘对象为曲线或弧线时,请参阅图2,示出了依据操作对象的操作,以及与第一标绘对象对应标绘规则将第一标绘对象绘制在HTML5画布中的一种可能的实现方式的流程示意图,可以包括:
[0070]步骤S201:在检测到操作对象的第一操作之后,通过擦除、重绘的方式始终连接第一位置点和操作对象当前的位置点,直至检测到操作对象的第二操作为止。
[0071]其中,第一位置点为操作对象执行第一操作时所处的位置点。
[0072]步骤S202:在检测到操作对象的第二操作之后,通过擦除、重绘的方式始终连接第二位置点和操作对象当前的位置点,直至检测到操作对象的第三操作为止。
[0073]其中,第二位置点为操作对象执行第二操作时所处的位置点。将操作对象执行第三操作时所处的位置点作为第三位置点。
[0074]需要说明的是,当第一标绘对象为曲线时,曲线的弧度由第二位置点确定。当第一标绘对象为弧线时,弧线的弧度由两直线的夹角确定,该两直线分别为连接第一位置点与第二位置点的直线,以及,连接第二位置点与第三位置点的直线,夹角的顶点为第二位置点。需要说明的,弧线的弯曲是规则的。在确定弧线弧度的过程中,上述两直线夹角的计算均是在HTML5画布中规定的平面直角坐标系中进行。
[0075]示例性的,操作对象为鼠标,第一操作为鼠标在HTML5画布中的单击操作,第二操作为鼠标在HTML5画布中的单击操作,第三操作为鼠标在HTML5画布中的双击操作。一条曲线至少由三个点击的点形成,用户握持鼠标,单击HTML5画布,拖动鼠标,再单击HTML5画布,拖动鼠标,双击HTML5画布结束。与绘制直线类似,在拖动鼠标过程中,不断擦除、重绘。弧线的绘制与曲线类似,在此不做赘述。
[0076]需要说明的,曲线的弧度通过一控制点决定,该控制点即为上述的第二位置点。曲线可基于贝塞尔曲线来绘制,可以是一条简单的三阶贝塞尔曲线,也可以是多条三阶贝塞尔曲线的拟合。
[0077]在上述实施例中,第一标绘对象可以为面。面即是闭合的线。
[0078]进一步的,面可以包括规则面和不规则面,规则面可以为圆、扇形、椭圆、矩形等,不规则面即为曲线面。
[0079]当第一标绘对象为规则面时,请参阅图3,示出了依据操作对象的操作,以及与第一标绘对象对应的标绘规则将第一标绘对象绘制在HTML5画布中的一种可能的实现方式的流程示意图,可以包括:
[0080]步骤S301:在检测到操作对象的操作之后,通过操作对象的操作确定第一标绘对象的参数。
[0081]其中,第一标绘对象的参数用于确定第一标绘对象的形状和大小,即用于确定面的形状和大小。
[0082]步骤S302:在确定出第一标绘对象的参数之后,基于第一标绘对象的参数生成第一标绘对象。
[0083]下面分别以规则面中的圆、扇形、矩形为例对上述实现方式进行说明。
[0084]第一标绘对象为圆:圆的大小通过半径确定。上述操作对象的操作包括第一操作(指示开始标绘)和第二操作(指示结束标绘)。当检测到第一操作时,将操作对象执行第一操作的位置点作为圆心,在检测到第二操作时,确定操作对象执行第一操作的位置点与操作对象执行第二操作的位置点之间的距离,并将确定出的距离作为圆的半径绘制圆。对于用户而言,以操作对象为鼠标为例,绘制圆的过程为:用户握持鼠标点击HTML5画布中的第一位置点开始绘制,然后拖动鼠标,再用鼠标点击HTML5画布中的第二位置点结束绘制。画布上生成的圆即是以第一位置点为圆心,第一位置点与第二位置点直线的距离为半径的圆。
[0085]需要说明的是,椭圆与圆类似,是在圆的基础上压缩坐标系而成,另外,椭圆也可通过两条贝塞尔曲线平滑连接而成。
[0086]第一标绘对象为扇形:扇形是圆的一部分,扇形的大小通过半径和圆心角确定。上述操作对象的操作包括第
当前第2页1 2 3 4 
网友询问留言 已有0条留言
  • 还没有人留言评论。精彩留言会获得点赞!
1