一种通用画布输入接口设计方法及装置的制造方法
【技术领域】
[0001]本发明属于Html5技术领域，尤其涉及一种通用画布输入接口设计方法及装置。
【背景技术】
[0002]HTML5规范是万维网联盟由2012年12月17日正式宣布定稿的第五版超级文本标记(Hyper Text Markup language)，HTML 5规范定义了Html5画布和其对应的应用编程接口(Applicat1n Programming Interface ,Canvas API) αΗ?ηιΙδ画布支持多种对象的绘制，包括笔迹、文字、图片。
[0003]然而，在目前的Html5网页中，当不同输入设备在画布上输入时，不同绘制方法带来的编程繁琐、难于维护以及扩展受限的问题。其原因在于，绘制对象的数据来源通常来自输入设备，如鼠标、键盘、手写板、点阵纸笔等。由于各种输入设备在Html5网页中的响应都不一样，如果需要获取绘制对象对画布进行绘制，每一种设备都需要编写一次数据渲染的方法。
[0004]为便于说明，以在画布上绘制一条笔迹为例，详述如下:
[0005]对于鼠标设备，通常需要以下步骤:
[0006]1.响应点击按下事件MouseDown，记录笔迹书写开始，调用Canvas API开始绘制起占.V ，
[0007]2.响应鼠标移动事件MouseMove，记录笔迹书写过程，调用Canvas API绘制笔迹；
[0008]3.响应鼠标按起事件MouseUp，记录笔迹书写完成，调用Canvas API绘制笔迹终点;完成一次笔迹的绘制。
[0009]每加一种输入设备的支持，就需要重新书写以上I，2，3流程，导致代码冗余而难于维护，同时扩展性较差。此外，需要调用相应的Canvas API进行绘制，以笔迹绘制为例，需要调用Canvas API如下:
[0010]var canvas = document.getElementById( “myCanvas” );//获取canvas的html元素
[0011 ] var context = canvas.getContext( “2d” );//获取上下文绘制对象
[0012]context.beginPath()；
[0013]context.strokeStyle = “#fff” ；//这里设置字体颜色
[0014]context.1ineWidth = 2;//这里要设置字体大小
[0015]context.moveTo(x,y)；
[0016]context.lineTo(xl,yl)；
[0017]context.stroke ()；
[0018]综上所述，在一次绘制过程需要调用以上接口进行渲染，而如文字和图片渲染则更为复杂，并且在渲染过程我们通常需要不同的参数如大小、颜色、缩放等，这些不同的渲染对象和参数则需要重复一遍代码书写，对开发效率并不利，扩展性较差并且增加维护成本。
【发明内容】
[0019]本发明实施例的目的在于提供一种通用画布输入接口设计方法，旨在解决不同输入设备在画布上输入时，不同绘制方法带来的编程繁琐、难于维护以及扩展受限的问题。
[0020]本发明实施例是这样实现的，一种通用画布输入接口设计方法，包括:
[0021 ]将绘制编辑层和绘制显示层进行分离；
[0022]所述绘制编辑层接收不同输入设备的输入数据；
[0023]所述绘制编辑层根据输入数据，生成绘制对象，并将生成的绘制对象传递给绘制控制层；
[0024]所述绘制控制层监听来自所述绘制编辑层的数据，并将所述绘制对象传递给绘制显不层;
[0025]所述绘制显示层根据所述绘制对象，在画板上执行绘制动作；
[0026]其中，所述画板由多层画布叠加而成，所述画布为:超文本标记语言Html5画布。
[0027]本发明实施例的另一目的在于提供一种通用画布输入接口设计装置，包括:
[0028]分离模块，用于将绘制编辑层和绘制显示层进行分离；
[0029]绘制编辑层接收模块，用于所述绘制编辑层接收不同输入设备的输入数据；
[0030]绘制编辑层传递模块，用于所述绘制编辑层根据输入数据，生成绘制对象，并将生成的绘制对象传递给绘制控制层；
[0031 ]绘制控制层传递模块，用于所述绘制控制层监听来自所述绘制编辑层的数据，并将所述绘制对象传递给绘制显示层；
[0032]绘制动作执行模块，用于所述绘制显示层根据所述绘制对象，在画板上执行绘制动作；
[0033]其中，所述画板由多层画布叠加而成，所述画布为:超文本标记语言Html5画布。
[0034]在本发明实施例中，绘制编辑层接收不同输入设备的输入数据;所述绘制编辑层根据输入数据，生成绘制对象，并将生成的绘制对象传递给绘制控制层。解决了对于不同输入设备在画布上输入时不同绘制方法带来的繁琐的编程问题以及难于维护和扩展的问题。其有益效果在于以下三个方面，详述如下:
[0035]第一方面，提高了数据扩展性，对输入内容的数据可加入第三方监听模块对数据进行操作，如云端存储、数据广播等；
[0036]第二方面，提高了输入扩展性，对新输入设备或新绘制对象的支持，即多一个加EditLayer，实现 EditStart，Edi ting ,EditEnd 和清染方法即可。
[0037]第三方面，易于维护，以绘制对象为单位分离编辑层，模块清晰。
【附图说明】
[0038]图1是本发明实施例提供的通用画布输入接口设计方法的实现流程图；
[0039]图2是本发明实施例提供的通用画布输入接口设计方法步骤S102的实现流程图；
[0040]图3是本发明实施例提供的通用画布输入接口设计方法步骤S104的实现流程图；
[0041]图4是本发明实施例提供的通用画布输入接口设计方法步骤S105的实现流程图；
[0042]图5是本发明实施例提供的通用画布输入接口设计方法步骤S105的实现流程图；
[0043]图6是本发明实施例提供的通用画布输入接口设计装置的第一结构框图；
[0044]图7是本发明实施例提供的绘制对象生成过程的较佳实施流程图；
[0045]图8是本发明实施例提供的通用画布输入接口设计装置的第二结构框图。
【具体实施方式】
[0046]为了使本发明的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本发明进行进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。
[0047]实施例一
[0048]图1是本发明实施例提供的通用画布输入接口设计方法的实现流程图，详述如下:
[0049]在步骤SlOl中，将绘制编辑层和绘制显示层进行分离；
[0050]其中，步骤SlOl，具体为:
[0051]在Html5网页中，将绘制编辑层和绘制显示层进行分离，在所述绘制编辑层和绘制显示层之间，嵌入不同输入设备通用的绘制控制层。
[0052]在步骤S102中，所述绘制编辑层接收不同输入设备的输入数据；
[0053]步骤S102，具体为:
[0054]在Html5网页的应用程序编辑接口调用画布时，所述绘制编辑层接收不同输入设备的输入数据。
[0055]在步骤S103中，所述绘制编辑层根据输入数据，生成绘制对象，并将生成的绘制对象传递给绘制控制层；
[0056]在步骤S104中，所述绘制控制层监听来自所述绘制编辑层的数据，并将所述绘制对象传递给绘制显示层；
[0057]在步骤S105中，所述绘制显示层根据所述绘制对象，在画板上执行绘制动作；
[0058]其中，所述画板由多层画布叠加而成，所述画布为:超文本标记语言Html5画布。
[0059]在本发明实施例中，简化了编程，同时又具备足够的灵活性，可以根据不同需求进行不同的设计，提高了可维护性和开发效率。
[0060]实施例二
[0061]图2是本发明实施例提供的通用画布输入接口设计方法步骤S102的实现流程图，详述如下:
[0062]在步骤S201中，绘制编辑层根据输入内容类型，调用不同设备编辑事件；
[0063]在步骤S202中，通过所述不同设备编辑事件，接收不同输入设备的输入数据；
[0064]其中，所述输入内容类型包括笔迹、文本、图片、橡皮擦以及扩展输入内容类型中的至少一种；
[0065]其中，所述不同设备编辑事件包括不同设备编辑开始事件、不同设备编辑过程事件、不同设备编辑结束事件中的至少一种。
[0066]其中，扩展输入内容类型为自定义的输入内容类型，包括但不限于预定义公式、图形。
[0067]实施例三
[0068]图3是本发明实施例提供的通用画布输入接口设计方法步骤S104的实现流程图，详述如下:
[0069]在步骤S301中，绘制控制层监听来自所述绘制编辑层的数据，所述数据包括不同设备编辑开始事件、不同设备编辑过程事件、不同设备编辑结束事件；
[0070]在步骤S302中，当接收到来自绘制编辑层的不同设备编辑结束事件时，将所述绘制对象以及实时生成的加工数据传递给绘制显示层。