canvas 地图开发总结

之前沉迷 minecraft,起初是玩游戏时觉得下界交通太复杂,容易迷失方向。于是就想统计一份线性地图来提供参考。最初只是简单的图片,但随着服务器肝帝愈来愈多,这种简单的图片已经满足不了数据更新的需求(手动统计加上绘图实在太麻烦了)

于是根据自己掌握的知识,打算写一个网页版的线性地图。最初的候选方案有 svgcanvas,两者都各具优势和缺点。

就我掌握的知识来说:svg 可以直接渲染在 dom 节点里面,能够直接用 css 修改样式,能够利用 js 控制,性能可能会比 canvas 好很多;

而 canvas 相比貌似没有多少优势,只是会有更多的可能性。于是我选择基于 canvas 来制作,更多可能性能够更好的面对未来,也有可能突发脑洞写一些没用的功能。

由于平时很少写原生的 js,于是计划用原生写,尽量全部自己写,不使用其它库。由于主要面向年轻人,所以没有考虑做多少兼容,直接上新技术。由于没有服务器,页面就打算放在 github page,通过 json 存储地图数据,通过 git 同步代码实现增量更新,对于维护来说轻松太多了。

整体的方案确定,先写个小 dome 测试可行性,测试时发现如果使用 github 提供的域名,则无法获取 JSON 数据,好在我有自己的域名,绑定了自己的二级域名后,访问数据成功。由此基础的测试就完成了!

于是开始具体的构建工作,大体流程:

获取默认加载项—> 请求json数据—> 解析json数据—> 绘制地图

使用一个数组来储存地图数据列表,加载页面时,将数组渲染到下拉列表里面,通过用户手动切换列表改变显示的数据源。

通过封装的 Promise 对象实现异步加载选择地图源数据。然后调用 then() 来初始化绘制并调用绘制地图。

加入移动、放大缩小功能:由于手机是双指缩放,不了解,所以引用了唯一的第三方库 hammer 。使用 hammer 来识别双指缩放,同时完成检测移动操作。这样就只剩 pc 的缩放功能了,写一个方法检测鼠标滚轮的滚动,通过判断滚轮的方向实现放大缩小的检查,执行相关的代码。

由于地图是实时绘制的,大量的缩放和移动操作引起了地图的严重卡顿(特别是手机),所以就加入了 transform 3D(tranform 3D 相比于 transform 来说会调用硬件加速功能,可能会带来更好的效果)。缩放和移动首先通过 transform 3D 来控制 canvas 实现,然后在操作完成后再绘制地图。这样一定程度地解决卡顿问题,但由于没有实时绘制地图,在移动和缩放的过程中会引起在新区域产生空白等等问题。

关于数据格式的设计:考虑到不是所有的线路都是直线,也有很多曲线的线路,所以计划使用 lineTo 和 quadraticCurveTo 配合的方式绘制线路。给曲线一个type值表示,然后使用贝塞尔曲线绘制这段线段,没有type值的,直接使用 lineTo 绘制。

为了更好的维护地图数据,将每条线路的数据分开,一条线的所有数据都集中在一起。这样就产生了一个问题,由于数据是依次绘制,引起了线路文字被后面的数据覆盖的情况,所以就手动将数据分类集中,按分类的重要性排列数据,然后单独的绘制文字。

由于需要标明分类的区别和类型,所以延续了之前使用的颜色来区别。突然想到了 input type=“color” 既能够显示颜色信息,又能够输入颜色。多点代码就能够实现颜色的自定义,还是很不错的。为了提供恢复初始颜色的功能,和不加更多按钮,所以就选择将颜色旁边的文字作为恢复按钮。

总感觉选 canvas 是个巨大失误,如果用 svg 的话,缩放和移动手机直接改下 meta 标签加个 overflow: hidden 就行了,也不会有什么性能问题,真想不通当初为什么要选 canvas

​为服务器开发的线性地图

查看源码

nth-child的一些特别使用技巧

nth-child的一些特别使用技巧

使用 :nth-child() 选择器匹配属于其父元素的某个、间隔、某段子元素

ios 输入法将页面往上顶

ios 输入法将页面往上顶

ios 输入法将页面往上顶,输入法收回后下方留下空白区域