Canvas實現時間刻度標尺功能

前言:項目中需要實現一個時間標尺的功能,展示某個人在某段時間內已經被訂單占用的時間,并且展示當前訂單在標尺中的占用位置,大概為下圖的樣子

大概的實現邏輯如下:

計算時間刻度跨度。canvas總寬度為320,高度為40,注意,canvas的寬度不能使用css來寫,會導致計算混亂,直接寫在標簽內,一共顯示8個時間區域，所以每個刻度之間的寬度為320/8=40

利用canvas畫一條線,X軸起點為0,終點點為320,Y軸起終點都是25,只所以不放到最底下,是因為需要給顯示時間的文字一定的區域

計算顯示的時間跨度，正常跨度為1個小時，行程超過4個小時跨度為2個小時，超過12小時跨度為6個小時.利用行程的結束時間減去開始的時間,得出行程的時長,再做判斷得出時間的跨度

利用moment格式化行程的開始時間,得出第一個刻度上的時間,然后再根據跨度遞增并且顯示即可.

繪畫已有行程的矩形,拿到司機已有的行程的時間.用司機行程的開始時間跟當前訂單的開始時間都轉化成時間戳去判斷,如果司機行程的開始時間早于訂單的開始時間,那矩形的X軸起點為0,反之用相差的時間/60000轉化成分鐘數.

利用時間跨度*60,得出時間跨度的分鐘數,使用前面的時間差的分數/每個跨度代表的分鐘數,得出需要展示的比例,乘于每個跨度中的寬度,也就是40.得出需要X軸起點位置

X軸的終點位置也是一樣,只需要在計算行程差的時候,使用司機行程的結束時間去減訂單的開始時間,然后算法同上,得出X軸的終點位置即可繪制.

實現代碼如下

initDraw:function(){// 首先執行此方法,計算起終點的時間let start = this.modifyStartTime ? this.modifyStartTime : this.orderStartTime;let end = this.modifyEndTime ? this.modifyEndTime : this.orderEndTime;// 先計算刻度的數值this.calculateSpan(start,end);// 初始化時間刻度尺this.initTimeArr(start);// 每個司機的行程都不相同,所以遍歷去繪畫每個司機的行程this.driverJourneyArr.forEach((item,index)=>{this.drawDriverRect("d" + item.id,index);})},calculateSpan:function(start,end){// 計算時間跨度orderEndTimelet hours = (new Date(end).valueOf() - new Date(start).valueOf()) / 60000 / 6 ;if(hours < 4){this.timeSpan = 1;}else if(hours > 4 && hours < 12){this.timeSpan = 2;}else{this.timeSpan = 6;}},initTimeArr:function(start){// 獲取第一個時間刻度上的時間this.timeArr = [];// * -3 是因為刻度尺展示的時間是開始時間的前XX個小時,跟后XX個小時,所以start這個行程的開始時間是在刻度尺中間的位置展示的this.begin = moment(start).add(this.timeSpan * -3 , "hour").format("YYYY-MM-DD HH:mm:ss");// 初始化顯示在時間刻度表上的時間for (let i = 1; i < 9; i++) {this.timeArr.push(moment(start).add(this.timeSpan * (i - 3), "hour").format("HH:mm"));}},initTimeScale:function(ctx){// 先移動至線的起點處ctx.moveTo(0,25);// 設定線的起點跟終點ctx.lineTo(320,25);// 設置線的顏色ctx.strokeStyle = "#070707";// 設置字體的顏色ctx.fillStyle = "#070707";for (let i = 1; i < 8; i++) {ctx.moveTo(i * 40,17);ctx.lineTo(i * 40,25);ctx.textAlign = "center";ctx.fillText(this.timeArr[i-1],i * 40,35)}// 繪畫ctx.stroke();},drawDriverRect:function(domId,i){let ctx = document.getElementById(domId).getContext("2d");// 清除畫布ctx.clearRect(0,0,320,40);this.driverJourneyArr[i].times.forEach((time,index)=>{// 獲取每個司機let obj = this.getDrawLocation(time);// 繪制矩形ctx.fillStyle = "rgb(161,161,161)";ctx.fillRect (obj.start, 10, obj.end - obj.start, 15);})this.drawOrderRect(ctx);this.initTimeScale(ctx);},getDrawLocation:function(item){// 通過計算得出需要繪制起終點let timeDifference,startLocation,endLocation;// 計算出司機行程和訂單的開始時間的時間差,用于計算繪制的位置timeDifference = new Date(item.start).valueOf() - new Date(this.begin).valueOf() ;startLocation = 0;if(timeDifference > 0 ){// 使用前面計算出的時間差的分數除于每個跨度代表的分鐘數,得出需要展示的比例,乘于每個跨度中的寬度,也就是40.得出需要X軸起點位置startLocation = timeDifference / 60000 /(60 * this.timeSpan) * 40}// X軸終點的位置,是計算司機行程的結束時間和訂單開始的時間差,由于計算出來是時間戳,除于60000得到分鐘數,除于一個刻度區域里代表的分鐘數,得出需要展示的比例,乘以固定的刻度區域寬度40,得出需要繪制的X軸終點endLocation = (new Date(item.end).valueOf() - new Date(this.begin).valueOf()) / 60000 / (60 * this.timeSpan) * 40;return {start:startLocation,end:endLocation}},drawOrderRect(c){let start = this.modifyStartTime ? this.modifyStartTime : this.orderStartTime;let end = this.modifyEndTime ? this.modifyEndTime : this.orderEndTime;let obj = this.getDrawLocation({start:start,end:end});// 繪制矩形c.fillStyle = "rgba(0,204,255,0.5)";c.fillRect (obj.start, 0, obj.end - obj.start, 25);},

總結

以上是生活随笔為你收集整理的Canvas实现时间刻度标尺功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。