基于HTML5在线评阅及批注实现.docVIP

基于HTML5在线评阅及批注实现 　　摘要：针对现阶段各种Web系统对于电子文档在线评阅及批注功能的支持有限问题，本文提出了一种基于新一代Web技术HTML5的在线评阅及手写批注实现，并支持与服务端进行通信保留修改痕迹。电子文档的全文批注功能是很多OA系统、在线学习系统的重要环节，此技术的实现有助于提高公文批阅、作业批改的效率以及用户体验。 　　关键词：在线批注;手写批注;HTML5;Web系统 　　中图分类号：TP311.52 文献标识码：A 论文编号：1674-2117（2015）09-0073-03 　　● 引言 　　在各种涉及电子文档的Web系统中，电子文档在线评阅及批注功能是一种重要的用户需求。然而现今阶段，各种Web系统对电子文档一般只提供阅读功能。少数拥有对在线批注功能提供支持的系统，一般要求用户提交基于在线编辑器的富文本，该富文本一般是属于HTML格式，无法支持Word、PDF等格式文档。此外，此类系统批注的实现一般是直接对富文本进行编辑，不支持手写、圈注等符合用户体验的批注模式。 　　为了实现电子文档在线手写批注的功能，不少系统和学者都采用了ActiveX控件的形式。[1]此类实现方式要求用户在浏览器上安装ActiveX控件或客户端，并且都是以ActiveX控件作为桥接，调用MS Word进行处理，需要用户本机安装MS Office等软件。此类实现方式的另一个问题是，系统虽然可以保留批注信息，但无法感知批注信息的内容。所有的批注结果最终以一个新的Word文档保存，如果第一位用户将所有的内容删除了，第二位用户则无法直接查看原始内容。此外，用户如果在Word文档中嵌入一些脚本，还可能导致安全问题出现。 　　为此，本文提出一种基于HTML5技术的在线评阅及批注功能的实现，支持手写、文本、圈注等批注模式，通过序列化后可以将批注痕迹上传到服务器并合成批注后的新文档。 　　● 相关技术 　　本文实现电子文档在线批注功能，涉及了HTML5、电子文档转换背景图片、批注组件序列化等技术。主要的核心技术为HTML5 Canvas画布、GUI事件机制、背景局部刷新和缓存机制。 　　1.HTML5 Canvas 　　HTML5为新一代的标准通用标记语言，其最大的优势是原生支持视频、音频，不使用Flash等插件就可以进行视频播放，大大提高了程序员的开发效率以及避免用户端安装第三方插件的过程。并且HTML5的规范更加清晰，对本地数据存储和对游戏互动提供了良好的支持，现阶段基于HTML5 Canvas的游戏越来越流行，支持在PC端以及手机端运行。 　　HTML5 Canvas画布标签是HTML5的一个新标签，通过它可使用JavaScript进行2D图形的绘制。使用Canvas，可以使得浏览器原生支持游戏开发、图表制作、视频播放等功能。使用Canvas可以制作出非常绚丽的网页动画效果，而不需要第三方控件。 　　在HTML5中，与Canvas类似的标签还有SVG。与Canvas逐像素进行渲染的机制不同，SVG是基于XML标记语言描述的2D矢量图形语言，不依赖于分辨率并且支持事件处理机制，但对于游戏等图像密集的应用它并不适合。 　　由于手写批注的表现形式很难使用矢量语言进行描述，而且过于复杂或过多的描述语言会导致SVG效率下降，因此本文使用Canvas作为在线批注的实现基础。 　　2.事件机制 　　采用Canvas进行2D图像绘制，由于它是逐像素进行渲染，所以不支持事件处理机制。手写批注虽然是最贴近实际应用的一种批注模式，但是对于圈注、画线以及撰写评语等批注模式，如果不支持移动、缩放或者编辑功能，将会给实际的使用带来不便。由于HTML5正处于发展时期，目前还没有完善的用户界面类库可供使用，此外大多HTML5类库为游戏开发所用，属于重量级类库。因此，为了实现批注组件的移动、缩放和编辑事件处理，需要实现基于事件机制的编程框架。 　　在JavaScript的事件机制中，首先为DOM对象添加事件处理函数，当触发的相应事件被捕获时，则执行事件处理函数。[2]在事件机制的运转过程中主要包括捕获和冒泡两个流程。以鼠标事件为例，如果鼠标指针停留在某个最外层DOM对象范围内，将被该DOM对象捕获，捕获过程还将一层一层向内分析鼠标指针是否位于子对象范围，搜集所有符合条件的对象。然后从最内层的对象开始往外冒泡，依次触发各个对象的事件处理函数。 　　由于Canvas本身属于DOM对象，我们可以在其上注册各类事件，然后在事件处理函数中模拟画布内组件的事件机制。对于画布内的所有批注信息，都以一个组件表示，组件包括该批注的长宽以及坐标属性。使用这些属性，可以判断当前鼠标指针位于哪一些组件之内，从而模拟Javscript的事件机制