基于HTML5的图形界面设计,基于HTML5Canvas的交互式图形工具箱的研究与实现

摘要：

随着无处不在计算技术的深入发展,HTML中传统的简单"点和击"交互方式已经不能够满足今天Web应用个性化和交互多样性的需求.因此,新标准HTML5将Web前端带入一个标准化的应用平台,通过Canvas元素将图形交互与直接操作的交互范式引入到Web应用中,扩充信息操作方式的同时,并带来更好的用户体验. 然而,由于设计并实现高度交互的Web图形应用是一个高度知识密集型行为,目前的Canvas平台存在以下不足:首先,Canvas仅提供低级的绘图原语,并没有给交互式图形的开发提供高效的技术支持;其次,该平台尚未在图形对象层次上提供有效方便的事件处理机制.因此,这就要求开发者不仅需要学习各种图形绘制细节,还需控制和管理作用在图形上的交互事件,这使得HTML5Canvas上交互式图形开发变得复杂繁琐. 针对上述问题,本文提出一个基于HTML5Canvas的交互式图形工具箱,旨在为设计者提供一种高效的交互式图形构建技术,提高开发效率.该工具箱具有以下特征:一方面,根据数据驱动模型思想,设计了一种基于JSON的交互式图形标记语言JIGML,旨在一个高级抽象层次上指定交互式图形对象及它们之间的关系,通过对图形绘制细节进行封装,使得开发者不需要手动编写代码就能实现界面图形的绘制,从而降低了开发者的学习曲线.为了实现这种交互式图形标记语言,设计并实现一个交互式图形库,进而可以缩短开发周期;另一方面,在图形对象层次上,设计并实现交互式图形的事件转化机制以及事件处理机制,将图形绘制与交互事件处理相分离,从而简化了交互事件处理的复杂性.最后,通过一个Tetris游戏实例说明该工具箱系统在开发交互式图形的可行性以及高效性.

展开