基于canvas的轨道交通可视化图形组件的设计与实现
作者：温志超
来源：《电脑知识与技术》2013年第31期
        摘要：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的应用就可以实现轨道交通可视化的良好效果。
        2.2需求描述
        MetroJS在轨道交通前端可视化上，除了提供目前所有类似软件具备的基本可视化特性以外，还在一些功能的扩展性上预留接口，让前端界面具有更好的可维护性和可扩展性。具体的需求表现在：
        1）图案形态设计。目前html5 canvas接口提供了大量的图形绘制函数，能够完成你能想象到的几乎任何图像的绘制，但是这些绘制方法往往比较繁琐，而MetroJS在canvas提供的图形绘制接口的基础上，通过对canvas原生绘图方法的封装，为轨道交通前端图形界面提供图像对象的支持，提供超高的图像质量。
        2）交互设计。轨道交通可视化前端在web端使用，通过MetroJS实现对轨道交通的图形展示仿真，交互事件的设计必不可少。面向用户需求是设计交互事件的根源。鼠标点击和悬浮等事件等的描述，是MetroJS的另一特性。
        3）网络通讯管理。Web页面需要通过与后台通讯获取所需要的数据，MetroJS根据前端需要从后台接受的数据进行分类，划分出图形展示需要的数据类型，并对数据接受方式进行封装，实现canvas图形库的通讯功能，方便开发者使用。
        2.3一个典型canvas库Kineticjs
        2.3.1 Kineticjs定位
        Kineticjs是最新流行的canvas图形库。它的出现为很多html5开发者的减轻了负担，是一个易用而且学习成本低、扩展性好、API风格一致和性能优越的canvas库。
        Kineticjs涵括了几乎所有的canvas方法并对它们进行了良好的封装，提供了简单而且易用的接口，让开发者在使用时如沐春风，通过简单学习便可轻而易举可以实现一些自己想要的图形效果。Kineticjs是一个中量级的js库，提供的方法很强大，很适合做一些复杂度较高的图形界面开发。
        2.3.2 kineticjs的设计特点
        Kinetic是基于html canvas标签来设计的，它利用了canvas本身的一些特性来进行扩展，把每一层都定义成layer层在画布上叠放，它们像是打印机里面的一张张纸，互不受影响。用户可以选择对每一个layer层进行绘制，kineticjs的作用是把每一个layer层封装成图件的形式，当需要不同的图件的时候，就可以用kineticjs创建对应形状的图件层，接着开发人员就可以在layer层上进行需求上的增补。
        3 本文Metrojs库的设计
        3.1 MetroJS库定位
        Metrojs库是借鉴Kineticjs的设计思路，为轨道交通设计一套通用的前端组件库，使开发人员用最少的开发代价获得最好的针对轨交交通的设计效果。并且，Metrojs在量级上对比kineticjs显得非常小，但是在元素级上粒度更粗，更具有针对性。这样轻量级的类库在针对轨道交通特性的前端界面开发上具有性能上的优势。在可操作性上，接口简易，能够减少学习代价。
        3.2 MetroJS库的设计架构和思路
        首先从横向设计来进行全局观察，轨道交通前端具体需求有交通线路、站点、站点名和相互之间的交互和鼠标点击事件等触发事件，Metrojs的设计符合横向需求并提供扩展接口，如图2。
        Metrojs类库对canvas底层函数进行了封装，根据具体轨道交通的需求对底层函数进行模块化处理，实现对轨道交通前端类的属性和方法的描绘。在基础类上，从全局需求实现了
对三个基本对象（线路、站点和站点名）的属性和方法的描绘，在扩展模块上，实现了可能需要的UI控件，预留了一些未来开发需要的接口。开发者可以把这些UI控件和接口应用到页面中来。
        首先，定义类库所需的Util方法库，为从canvas层到stage层，从stage层到layer层，从layer层再到各个shape类的各个层提供方法函数。Util函数库的实现为MetroJS库的实现提供通用函数处理方法，如上层和下层之间的方法继承函数，层与层交互事件处理函数。Util方法库直接服务于MetroJS库的开发和类库的使用者。
        其次，对各个层进行有下而上剖析，定义每个层最合理的属性和方法函数，并实现下层层对上层的继承。上图说明的各个层之间的继承关系。最上层则实现了轨道交通基本类的描绘和功能函数的定义。以下是MetroJS库最上层shape的通用接口和基于shape类（shape类于layer层之上）实现的各个轨道交通图形类的方法表。
        4 实验结果展示
        本文在MetroJS类库的支持下，实现了一套轨道交通前端展示框架。如图5所示上海1—4号地铁线网图。
        上图是一号线路况图，使用MetorJS封装列车图片，使用MetroJS提供的接口函数实现图片的实时实地的放置，通过MetroJS提供的与后台交互的ajax通讯机制，从后台存取数据。上图实现了列车图片根据后台数据的实时放置。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。