基于canvas轨道交通可视化图形组件设计与实现.docVIP

基于canvas轨道交通可视化图形组件设计与实现 　　摘要：html5中canvas接口的出现使运用javascript绘制图形成为越来越多前端开发者的选择。该文结合html5的canvas绘图技术设计了轨道交通的前端图形组件，能够很好地兼容浏览器并且利用它来实时构建想要的轨道前端界面。 　　关键词：canvas 前端；轨道交通；组件 　　中图分类号：TP391 文献标识码：A 文章编号：1009-3044（2013）31-7019-06 　　目前，轨道交通前端大多是需要在用户机器上安装客户端或者插件。上海地铁信息查询系统的前端展示平台使用时需要安装flash插件，另外有一些大公司专门为交通监管中心研制的智能交通检测平台，其前端大多采用客户端的形式展示；深圳交通信息网站前端展示使用的是内嵌的flash插件展示地铁线路上的信息。这些前端平台都具备一样的问题：原生性比较差，都需要在PC端或移动端安装插件或者客户端，客户端需要维护升级，插件需要更新；flash等技术的滥用造成浏览器极易崩溃；html5等新技术的异军突起，苹果等公司直接排斥flash；客户端开发，本身在开发代价上较高等等问题。相对于以上这些前端展示平台，用户采用web原生网页访问的方式，其实更具价值，它也更符合用户的意愿。尤其在HTML5出现之后，借助于一些新的标准和接口，web端完全可以和客户端媲美，而其强大的功能和轻便的特性是它胜出的关键。在HTML5中最具代表意义的就是canvas接口的出现了，它只需要一个标签，便可以实现你想要的几乎任何二维操作效果（3D标准还未被浏览器支持）。它既不需要插件支持，载入速度也非常快，可以实现一切前端客户端能够给你的视觉效果，用户没有理由不选择它。随着越来越多的浏览器支持HTML5 canvas，未来canvas会大放异彩。 　　本文针对前端客户端软件占资源严重，自身不轻量、带插件的web端插件不灵活容易崩溃等弱点，根据轨道交通前端展示需求，使用html5原生接口，在canvas标准的基础上对轨道交通前端常用的图形展示画面进行通用化，设计和实现了canvas前端图形的类库，并在组件化的思想上进行抽象，为轨道交通前端的绘制提供一个通用化的解决方案。 　　1 canvas技术简介 　　canvas是html5最新提供的接口??canvas原先是作为新的网页元素被苹果公司最早引入Safari浏览器的，canvas实现的是在原生网页中就可以使用javascript进行绘制，不需要flash和java applet等插件的支持。只要在html中加入一个canvas标签，就可以对canvas对象进行操作并绘图。在canvas画布上的任何操作，都是用javascript来完成的，利用canvas标准提供的API，就可以实现例如颜色、填充、透明等等效果，你可以建立图案，可以完成一些以前网页级做不到的事情。canvas提供了矢量图、栅格图和文字等的绘制API，还可以利用它来画表格，做动画等等。canvas是基于像素级的即时模式图形系统，绘制完后不保存对象到内存中，这样使用canvas就可以获得快速的绘图速度，用户体验会比较好。随着canvas的高速发展，一些canvas图形库也孕育而生，如chartjs等画表的库，可以用来构建你所需要的图表，fabricjs等交互对象图形库也可以个性化实现一些图像样式甚至的动画的创建。 　　2 轨道交通前端组件通用化 　　2.1 需求分析 　　目前轨道交通使用纯html5 canvas接口完成的展示界面少之又少，基于canvas的轨道交通图形可视化库的定位也可以从两个角度考虑。 　　首先，针对用户而言，用户受到各种各样web插件的约束，对于展示页面的原生态性具有很高的要求，催生出一套基于原生javascript的canvas图形组件库需求，有图形库保证前端无插件运行，使用户拥有良好的视觉和交互效果。 　　其次，针对开发者而言。随着互联网的井喷式发展，各式各样的web页面都呈现在大家的眼前。网页设计者的技术水平良莠不齐，导致即便web页面易于开发，还是有很多web页面的质量不高，对于前端可视化应用多是流程化开发，很难做到模块化实现，且要做到模块化抽象，学习javascript周期也很长，可视化应用实现的过程极有可能要遇到开发周期过长、可视化效果差和维护性和扩展性差等问题。 　　针对上述各种情况，该文提出了基于组件化思想的轨道交通可视化解决方案，实现了一套基于canvas的轨道交通可视化类库——MetroJS。该类库简化了对canvas的操作复杂度，并且封装好的各个接口可以让开发人员忽略canvas原生接口的变更。工作人员通过对MetroJS的应用就可以实现轨道交通可视化的良好效果。