欢迎光临,了解微信小程序开发,就上易用通!

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

发布:2018-01-25 09:15浏览: 来源:网络 作者:tianshu

我的思路可能比较复杂;如果有更简单的思路可以留言回复; 
下面说一下我的实现思路: 
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:['北京南','天津南','济南西','泰安','滕州东','徐州东','南京南','镇江南','苏州北','上海虹桥','北京南','天津南','济南西','泰安','滕州东','徐州东','南京南','镇江南','苏州北','上海虹桥','北京南','天津南','济南西','泰安','滕州东','徐州东','南京南','镇江南','苏州北','上海虹桥'],
  7.     chooseStation:'',//页面显示选中的车站名字
  8.     prevChooseIdx:null,//上一次选中车站的下标
  9.     // stations:['北京南','天津南','济南西','泰安'],
  10.   },
  11.   onLoad:function(options){
  12.     // 页面初始化 options为页面跳转所带来的参数
  13.     // this.setData({canvHeight:502});
  14.     const ctx = wx.createCanvasContext('map');//路线图绘制的画布上下文对象
  15.     this.ctx = ctx;//将ctx对象绑定到当前页面中
  16.     this.column = 3;//每行显示车站数量
  17.     this.offsetTop = 30;//绘制起始坐标的top值,也就是距离canvas顶部的距离
  18.     this.rect={//圆角矩形对象
  19.       img_b:'/images/rect-b.png',//初始时图片
  20.       img_g:'/images/rect-g.png',//选中时图片
  21.       height:32,
  22.       width:68
  23.     }
  24.     this.line = {//站与站之间的连线对象
  25.       img:'/images/line.png',
  26.       height:6,
  27.       width:30
  28.     },
  29.     this.bendLine = {//站与站之间弯曲的连线
  30.       img_l:'/images/line_l.png',//左侧连线
  31.       img_r:'/images/line_r.png',//右侧连线
  32.       height:70,
  33.       width:20
  34.     },
  35.     this.rectArr=[];//记录所有车站的绘制起始点的坐标的数组
  36.     this.oddRowIndexArr=[];//记录奇数行的车站的下标数组,如[0,1,2,6,.....]
  37.     this.evenRowIndexArr=[];//记录偶数行的车站的下标数组,如[3,4,5,9,.....]
  38.     this.initMap();
  39.   },
  40.   onReady:function(){
  41.   },
  42.   onShow:function(){
  43.     // 页面显示
  44.   },
  45.   onHide:function(){
  46.     // 页面隐藏
  47.   },
  48.   onUnload:function(){
  49.     // 页面关闭
  50.   },
  51.   //对不同设备下图片大小的适配
  52.   adaptiveScreenSize:function(o){
  53.     let ww = this.data.winWidth;
  54.     let zoom = ww/375;//375这里是按iPhone6的宽度做等比缩放
  55.     this.setData({zoom:zoom});
  56.     let rectW = o.width*zoom;
  57.     let rectH = o.height*zoom;
  58.     o.width = rectW;
  59.     o.height = rectH;
  60.   },
  61.   //初始化路线图的方法
  62.   initMap:function(){
  63.     const that = this;
  64.     wx.getSystemInfo({
  65.       success: function(res){
  66.         const ww = res.windowWidth;
  67.         const pr = res.pixelRatio;
  68.         that.setData({ winWidth:ww,pixelRatio:pr});//将设备的信息存入data中,供后面使用
  69.         that.drawMap();
  70.       }
  71.     })
  72.   },
  73.   drawTxtAtPos:function(idx){
  74.     const rectArr = this.rectArr;
  75.     const w = this.rect.width;
  76.     const h = this.rect.height;
  77.     let txt = this.data.stations[idx];
  78.     let len = txt.length;
  79.     //当站点文本文字超过3个字,将缩小字号
  80.     let fontSize = len>3?12:14;
  81.     let x = rectArr[idx].x;
  82.     let y = rectArr[idx].y;
  83.           //计算文本在圆角矩形中的绘制点,使文字居中显示
  84.     let txt_x = Math.floor((w - len*fontSize)/2)+x;
  85.     let txt_y = Math.floor(h/2+fontSize/2)+y-2;//这里额外-2,文本才能更接近垂直居中
  86.     this.ctx.setFontSize(fontSize);
  87.     this.ctx.setFillStyle('#ffffff')
  88.     this.ctx.fillText(txt, txt_x, txt_y);
  89.   },
  90.   //在下标为idx处绘制圆角矩形
  91.   initRect:function(idx){
  92.     const rectArr = this.rectArr;
  93.     let x = rectArr[idx].x;
  94.     let y = rectArr[idx].y;
  95.     this.ctx.drawImage(this.rect.img_b,x, y, this.rect.width, this.rect.height);
  96.   },
  97.   //动态计算不同屏幕大小canvas的高度
  98.   initCanvHeight:function(){
  99.     let len = this.data.stations.length;
  100.     let pr = this.data.pixelRatio;
  101.     let z = this.data.zoom;
  102.     let row = Math.ceil(len/this.column);
  103.     let h = 0;
  104.     if(row <= 1){
  105.       console.log(this.rect.height);
  106.       h = (this.offsetTop*2 + this.rect.height)*2;
  107.     }else{
  108.        h = this.offsetTop*2+(row-1)*(this.bendLine.height-this.line.height)+this.rect.height;
  109.     }
  110.    this.setData({canvHeight:h});
  111.   },
  112.   //绘制线路这逻辑比较乱,我是把路线分为奇数段和偶数段进行绘制
  113.   drawLine:function(){
  114.     const rectArr = this.rectArr;
  115.     let x=0,y=0; 
  116.     if(rectArr.length==2){//首先当车站数量为2个的时候,只需绘制一条线段
  117.         x = rectArr[0].x+this.rect.width;//计算绘制线段起始点的x坐标
  118.         y = rectArr[0].y+Math.floor((this.rect.height-this.line.height)/2);//计算绘制线段起始点的y坐标
  119.         this.ctx.drawImage(this.line.img, x, y, this.line.width, this.line.height);
  120.     }else{
  121.       const odd = this.oddRowIndexArr;
  122.       const even = this.evenRowIndexArr;
  123.       if(odd.length>0){
  124.         for(let i=0;i<odd.length;i++){
  125.           if((odd+1)!=rectArr.length){//判断当前下标绘制点后面是否还有绘制点
  126.             x = rectArr[odd].x+this.rect.width;
  127.             y = rectArr[odd].y+Math.floor((this.rect.height-this.line.height)/2);
  128.             if((odd+1)%this.column!=0){//判断奇数行绘制点的下标如果不是3的整数倍将绘制一条直线,反之绘制右曲线
  129.               this.ctx.drawImage(this.line.img, x, y, this.line.width, this.line.height);
  130.             }else{
  131.               this.ctx.drawImage(this.bendLine.img_r, x, y, this.bendLine.width, this.bendLine.height);
  132.             }
  133.           }
  134.         }
  135.       }
  136.       //下面逻辑同奇数行的逻辑,不同的是绘制直线和弯曲线时x的坐标会有变化
  137.       if(even.length>0){
  138.         for(let i=0;i<even.length;i++){
  139.           if((even+1)!=rectArr.length){
  140.             y = rectArr[even].y+Math.floor((this.rect.height-this.line.height)/2);
  141.             if((even+1)%this.column!=0){
  142.               x = rectArr[even].x-this.line.width;//绘制直线时的计算公式
  143.               this.ctx.drawImage(this.line.img, x, y, this.line.width, this.line.height);
  144.             }else{
  145.               x = rectArr[even].x-this.bendLine.width;//绘制弯曲线时的计算公式
  146.               this.ctx.drawImage(this.bendLine.img_l, x, y, this.bendLine.width, this.bendLine.height);
  147.             }
  148.           }
  149.         }
  150.       }
  151.     }
  152.   },
  153.   drawMap:function(){
  154.     this.adaptiveScreenSize(this.rect);
  155.     this.adaptiveScreenSize(this.line);
  156.     this.adaptiveScreenSize(this.bendLine);
  157.     this.initCanvHeight();
  158.     this.createRectTopPoints();
  159.     // setTimeout(()=>{
  160.       const rectArr = this.rectArr; 
  161.       for(let i=0;i<rectArr.length;i++){
  162.         this.initRect(i);
  163.         this.drawTxtAtPos(i);
  164.       }
  165.       this.ctx.draw(true);
  166.     // },500);
  167.     this.drawLine();
  168.     this.ctx.draw(true);
  169.   },
  170.   //计算后,每行的所有绘制点的起始坐标x值是一个固定数组
  171.   //如:奇数行[10,20,30],偶数行:[30,20,10]
  172.   getDisXArr:function(){
  173.     let arr = [];
  174.     let ww = this.data.winWidth;
  175.     let disX = Math.floor((ww-(this.column*this.rect.width+(this.column-1)*this.line.width))/2); 
  176.     for(let i=0;i<this.column;i++){
  177.       let x = disX+i%this.column*(this.rect.width+this.line.width);
  178.       arr = x;
  179.     }  
  180.     return arr;
  181.   },
  182.   //根据给出的车站数量,将每个车站的绘制顶点计算出来存入数组rectArr中
  183.   createRectTopPoints:function(){
  184.     let rectArr = [];
  185.     let disXArr = this.getDisXArr();
  186.     let disXArrRev = this.getDisXArr().reverse();
  187.     let disY = this.offsetTop;//绘制初始点距离canvas顶部的高度
  188.     let len = this.data.stations.length;
  189.     let row = Math.ceil(len/this.column);//根据车站数量计算需要绘制的行数
  190.     let n=0,x=0,y=0;
  191.     for(let j = 1;j<=row;j++){
  192.       for(let i=0;i<this.column;i++){
  193.         ++n;
  194.         if(n<=len){
  195.           if(j%2!=0){
  196.             this.oddRowIndexArr.push(n-1);
  197.             //console.log("奇数行:"+n);
  198.             x = disXArr;
  199.           }else{
  200.             this.evenRowIndexArr.push(n-1);
  201.             //console.log("偶数行:"+n);
  202.             x = disXArrRev;
  203.           }
  204.           y = disY + (j-1)*(this.bendLine.height-this.line.height);
  205.           this.rectArr[n-1] = {x:x,y:y};
  206.         }
  207.       }
  208.     }
  209.   },
  210.   //判断手指触摸点是否在圆角矩形中
  211.   pointInRectPolygon : function (point, vs) {
  212.     let x = point[0], y = point[1],inside = false;
  213.     for (let i = 0, j = vs.length - 1; i < vs.length; j = i++) {
  214.         let xi = vs[0], yi = vs[1];
  215.         let xj = vs[j][0], yj = vs[j][1];
  216.         let intersect = ((yi > y) != (yj > y))
  217.             && (x < (xj - xi) * (y - yi) / (yj - yi) + xi);
  218.         if (intersect) inside = !inside;
  219.     }
  220.     return inside;
  221.   },
  222.         //根据某个圆角矩形的绘制点和宽高,计算出圆角矩形4个顶点的坐标值
  223.         //顺序为左上,右上,右下,左下,也就是顺时针方向
  224.   getRectPolygon:function(x,y,w,h){
  225.     let vs = new Array() ;
  226.     vs[0] = [x,y];
  227.     vs[1] = [x+w,y];
  228.     vs[2] = [x+w,y+h];
  229.     vs[3] = [x,y+h];
  230.     return vs;
  231.   } ,
  232.   //点击车站调取的事件,事件中需要处理:
  233.   //1、需要获取到当前点击的车站文本
  234.   //2、判断是否有过选取,如果之前有选取,需要将之前选取过的区块颜色改为默认色
  235.   //3、改变当前区块的颜色
  236.   //4、记录当前点击的下标
  237.   chooseStation:function(currIdx){
  238.     let txt = this.data.stations[currIdx];
  239.     let prevIdx = this.data.prevChooseIdx;
  240.     if(prevIdx!=null){
  241.       let x = this.rectArr[prevIdx].x;
  242.       let y = this.rectArr[prevIdx].y;
  243.       this.ctx.drawImage(this.rect.img_b,x, y, this.rect.width, this.rect.height);
  244.       this.drawTxtAtPos(prevIdx);
  245.     }
  246.     let x = this.rectArr[currIdx].x;
  247.     let y = this.rectArr[currIdx].y;
  248.     this.ctx.drawImage(this.rect.img_g,x, y, this.rect.width, this.rect.height);
  249.     this.drawTxtAtPos(currIdx);
  250.     this.ctx.draw(true);
  251.     this.setData({chooseStation:txt,prevChooseIdx:currIdx});
  252.   },
  253.   //点击事件
  254.   touchS:function(e){
  255.     console.log(e);
  256.     let touch = e.changedTouches;//这里一定要用changedTouches,如果用touches,安卓机会有问题
  257.     if(touch.length==1){
  258.       let tapPoint = [touch[0].x,touch[0].y];
  259.       let rectArr = this.rectArr;
  260.       for(let i=0;i<rectArr.length;i++){
  261.         let vs = this.getRectPolygon(rectArr.x,rectArr.y,this.rect.width,this.rect.height);
  262.         let inside = this.pointInRectPolygon(tapPoint,vs);
  263.         if(inside){
  264.           this.chooseStation(i);
  265.           break;
  266.         }
  267.       }
  268.     }
  269.   }
  270. })
复制代码
真机测试图:

小程序之基于canvas绘制高铁线路图(图1) 
小程序之基于canvas绘制高铁线路图(图2) 
小程序之基于canvas绘制高铁线路图(图3) 

小程序之基于canvas绘制高铁线路图(图4) wxapp-Gline.zip






免责声明:本站所有文章和图片均来自用户分享和网络收集,文章和图片版权归原作者及原出处所有,仅供学习与参考,请勿用于商业用途,如果损害了您的权利,请联系网站客服处理。