|
前几天@天下雪 给了我一张高铁的路线图，问我能不能用canvas画出来，所以我就试了试，我的思路可能比较复杂；如果有更简单的思路可以留言回复；
下面说一下我的实现思路：
1、首先是每个站点圆角矩形的绘制，一开始想着用canvas把圆角矩形绘制出来，但发现小程序暂时还没有绘制圆角的arcTo方法，所以用canvas绘制就相对比较麻烦，最后为了方便决定用图片代替；
2、将整个路线图分为四个小图片，（1）站点圆角矩形（2）站点之间的直连线（3）站点之间右侧弯曲连线（4）站点之间左侧弯曲连线；
3、通过观察分析，将绘制过程分为两步，（1）奇数行圆角矩形、连线的绘制点x坐标是从左至右递增，y坐标值是行数乘以某个固定值（2）偶数行圆角矩形、连线的绘制点x坐标是从左至右递减，y坐标值是行数乘以某个固定值
4、奇数行，偶数行的圆角矩形的下标index+1是3的倍数的话，奇数行当前下标右侧绘制右弯曲连线图片，偶数行当前下标左侧绘制左弯曲连线图片；
5、整个canvas绘制区域在不同手机上的适配
6、具体的一些细节请参照代码注释
7、开发工具上使用drawImage重复绘制同一张图片只显示第一次绘制的位置，暂时不知道什么原因，所以请在真机上测试；
8、有什么不足之处，望大家多多指点！感激！
wxml代码： <!--pages/Gline/index.wxml--><view class="g-title">（G23）选择出发站点 <text class="chooseStation">{{chooseStation}}</text> </view><canvas bindtouchstart="touchS" canvas-id="map" style='width:{{canvWidth}}rpx;height:{{canvHeight}}px;background-color: #eee' />
wxss代码： /* pages/Gline/index.wxss */page{ background-color: #eeeeee }.g-title{font-size: 36rpx;font-weight: 600;color: #768da4;padding: 36rpx 0;padding-left: 20rpx; background-color: #fff}.chooseStation{color: #32b16c}
js代码： // pages/Gline/index.jsPage({ data:{ canvWidth:750, canvHeight:750, stations:['北京南','天津南','济南西','泰安','滕州东','徐州东','南京南','镇江南','苏州北','上海虹桥','北京南','天津南','济南西','泰安','滕州东','徐州东','南京南','镇江南','苏州北','上海虹桥','北京南','天津南','济南西','泰安','滕州东','徐州东','南京南','镇江南','苏州北',
邀请
原作者: jsh5css
| 
刚上线就发现了，感谢楼主帮忙完成一项组件
不谢，还要感谢你给我一个提升自己能力的案例
这个帖子立功了 刚好有个同学问我，这个效果怎么实现的，正好帖子丢过去
看来我以后还得找点有意思的东西让别人帮忙做做