[0123]本说明书中各个实施例采用递进的方式描述，每个实施例重点说明的都是与其他实施例的不同之处，各个实施例之间相同相似部分互相参见即可。
[0124]对所提供的实施例的上述说明，使本领域专业技术人员能够实现或使用本发明。对这些实施例的多种修改对本领域的专业技术人员来说将是显而易见的，本文中所定义的一般原理可以在不脱离本发明的精神或范围的情况下，在其它实施例中实现。因此，本发明将不会被限制于本文所示的这些实施例，而是要符合与本文所提供的原理和新颖特点相一致的最宽的范围。
【主权项】
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画布中操作区域中的点击和移动操作； 所述第一标绘对象为箭头，所述箭头包括箭头主体和箭头头部，则所述标绘模块包括: 第二确定子模块，用于在所述检测模块检测到所述操作对象的第一操作之后，通过所述操作对象在执行所述第一操作时所处的位置点和所述操作对象当前所处的位置点确定所述箭头主体的参数； 计算子模块，用于利用所述第二确定子模块确定出的所述箭头主体的参数依据预设的计算规则计算所述箭头头部的参数； 第二绘制子模块，在检测到所述操作对象的第二操作之后，基于所述第二确定子模块确定出的所述箭头主体的参数和所述计算子模块计算出的所述箭头头部的参数生成所述第一标绘对象。
【专利摘要】本申请提供了一种基于HTML5的动态标绘方法及装置，方法包括：获取第一标绘对象；检测操作对象在HTML5画布中操作区域的操作；依据操作对象的操作以及与第一标绘对象对应的标绘规则将第一标绘对象绘制在HTML5画布中。本申请提供的基于HTML5的动态标绘方法及装置，在获取第一标绘对象之后，通过检测到的操作对象在HTML5画布中操作区域的操作，基于与第一标绘对象对应的标绘规则能够将第一标绘对象绘制在HTML5画布中，从而实现了基于HTML5的动态标绘。
【IPC分类】G06F17/30
【公开号】CN105138642
【申请号】CN201510526042
【发明人】张琴, 张广宇, 孙耀, 何泽潘, 董坤, 邹德君
【申请人】航天恒星科技有限公司
【公开日】2015年12月9日
【申请日】2015年8月25日