canvas实现一个简易的停车场/游乐园导航功能

1,141 阅读1分钟

由于上位同事离职,这个坑就这么落我头上了!!

提示: 本导航只针对起点固定的情况

演示地址

由于本功能是用于停车场的固定设备(列如停车场入口的导航显示),所以就比正常理解的随机起点导航要简单了很多,下面说一下实现方法:

1. 随便找个路线图, 如下游乐园:

2.找到起点,对于从起点开始能够到达的任意终点,都需要事先画好,但是难道还要做一个画图工具嘛?  于是就想到了标点的方式来辅助,在地图上每一个拐点都需要标好点位,然后每条可行的路线分别按照顺序连上,如下(绿色的点为起点,黄色为拐点或者线路终点):

每条不同的路线都用了不同的颜色,方便区分。

从代码上来说,每次重新画线,都会新建一个array,它的第一项必定为起点的坐标,此后的每条路线都会切分为有序的一些(数量可以自己定)坐标点位,于是每条线路就变成从起点开始的一连串坐标点。

3.在选择终点的时候,只要遍历所有线路中的坐标点,找到最近的坐标,以及该线路,做好动画即可

代码实现比较简单,就不细说了,有兴趣的同学可以在演示页面直接查看复制页面源码。