用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序之基于canvas绘制高铁线路图

天下雪 2017-2-20 10:21

前几天@天下雪 给了我一张高铁的路线图,问我能不能用canvas画出来,所以我就试了试,我的思路可能比较复杂;如果有更简单的思路可以留言回复;下面说一下我的实现思路: 1、首先是每个站点圆角矩形的绘制,一开始想 ...

前几天@天下雪 给了我一张高铁的路线图,问我能不能用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代码:

  1. <!--pages/Gline/index.wxml-->
  2. <view class="g-title">(G23)选择出发站点 <text class="chooseStation">{{chooseStation}}</text> </view>
  3. <canvas bindtouchstart="touchS" canvas-id="map" style='width:{{canvWidth}}rpx;height:{{canvHeight}}px;background-color: #eee' />

wxss代码:

  1. /* pages/Gline/index.wxss */
  2. page{ background-color: #eeeeee }
  3. .g-title{font-size: 36rpx;font-weight: 600;color: #768da4;padding: 36rpx 0;padding-left: 20rpx; background-color: #fff}
  4. .chooseStation{color: #32b16c}

js代码:

  1. // pages/Gline/index.js
  2. Page({
  3. data:{
  4. canvWidth:750,
  5. canvHeight:750,
  6. stations:['北京南','天津南','济南西','泰安','滕州东','徐州东','南京南','镇江南','苏州北','上海虹桥','北京南','天津南','济南西','泰安','滕州东','徐州东','南京南','镇江南','苏州北','上海虹桥','北京南','天津南','济南西','泰安','滕州东','徐州东','南京南','镇江南','苏州北', 邀请
    鲜花
    鲜花
    鸡蛋
    鸡蛋 (1)

    刚表态过的朋友 (1 人)

    分享至 : QQ空间
    收藏
    原作者: jsh5css

    相关阅读

    • 天下雪 2017-2-20 10:09
      刚上线就发现了,感谢楼主帮忙完成一项组件
    • jsh5css 2017-2-20 10:16
      天下雪 发表于 2017-2-20 10:09
      刚上线就发现了,感谢楼主帮忙完成一项组件

      不谢,还要感谢你给我一个提升自己能力的案例
    • 安静的小智 2017-2-20 12:37
      厉害了
    • jeffer 2017-2-20 13:08
      nice
    • 天下雪 2017-2-28 16:02
      这个帖子立功了    刚好有个同学问我,这个效果怎么实现的,正好帖子丢过去 QQ截图20170228160209.jpg


      看来我以后还得找点有意思的东西让别人帮忙做做
    • zc1223410028 2017-2-28 16:04
      好东西啊,正需要啊

    查看全部评论>>