Canvas實(shí)現(xiàn)時(shí)間刻度標(biāo)尺功能

前言:項(xiàng)目中需要實(shí)現(xiàn)一個(gè)時(shí)間標(biāo)尺的功能,展示某個(gè)人在某段時(shí)間內(nèi)已經(jīng)被訂單占用的時(shí)間,并且展示當(dāng)前訂單在標(biāo)尺中的占用位置,大概為下圖的樣子

大概的實(shí)現(xiàn)邏輯如下:

計(jì)算時(shí)間刻度跨度。canvas總寬度為320,高度為40,注意,canvas的寬度不能使用css來寫,會(huì)導(dǎo)致計(jì)算混亂,直接寫在標(biāo)簽內(nèi),一共顯示8個(gè)時(shí)間區(qū)域，所以每個(gè)刻度之間的寬度為320/8=40

利用canvas畫一條線,X軸起點(diǎn)為0,終點(diǎn)點(diǎn)為320,Y軸起終點(diǎn)都是25,只所以不放到最底下,是因?yàn)樾枰o顯示時(shí)間的文字一定的區(qū)域

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

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

繪畫已有行程的矩形,拿到司機(jī)已有的行程的時(shí)間.用司機(jī)行程的開始時(shí)間跟當(dāng)前訂單的開始時(shí)間都轉(zhuǎn)化成時(shí)間戳去判斷,如果司機(jī)行程的開始時(shí)間早于訂單的開始時(shí)間,那矩形的X軸起點(diǎn)為0,反之用相差的時(shí)間/60000轉(zhuǎn)化成分鐘數(shù).

利用時(shí)間跨度*60,得出時(shí)間跨度的分鐘數(shù),使用前面的時(shí)間差的分?jǐn)?shù)/每個(gè)跨度代表的分鐘數(shù),得出需要展示的比例,乘于每個(gè)跨度中的寬度,也就是40.得出需要X軸起點(diǎn)位置

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

實(shí)現(xiàn)代碼如下

initDraw:function(){// 首先執(zhí)行此方法,計(jì)算起終點(diǎn)的時(shí)間let start = this.modifyStartTime ? this.modifyStartTime : this.orderStartTime;let end = this.modifyEndTime ? this.modifyEndTime : this.orderEndTime;// 先計(jì)算刻度的數(shù)值this.calculateSpan(start,end);// 初始化時(shí)間刻度尺this.initTimeArr(start);// 每個(gè)司機(jī)的行程都不相同,所以遍歷去繪畫每個(gè)司機(jī)的行程this.driverJourneyArr.forEach((item,index)=>{this.drawDriverRect("d" + item.id,index);})},calculateSpan:function(start,end){// 計(jì)算時(shí)間跨度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){// 獲取第一個(gè)時(shí)間刻度上的時(shí)間this.timeArr = [];// * -3 是因?yàn)榭潭瘸哒故镜臅r(shí)間是開始時(shí)間的前XX個(gè)小時(shí),跟后XX個(gè)小時(shí),所以start這個(gè)行程的開始時(shí)間是在刻度尺中間的位置展示的this.begin = moment(start).add(this.timeSpan * -3 , "hour").format("YYYY-MM-DD HH:mm:ss");// 初始化顯示在時(shí)間刻度表上的時(shí)間for (let i = 1; i < 9; i++) {this.timeArr.push(moment(start).add(this.timeSpan * (i - 3), "hour").format("HH:mm"));}},initTimeScale:function(ctx){// 先移動(dòng)至線的起點(diǎn)處ctx.moveTo(0,25);// 設(shè)定線的起點(diǎn)跟終點(diǎn)ctx.lineTo(320,25);// 設(shè)置線的顏色ctx.strokeStyle = "#070707";// 設(shè)置字體的顏色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)=>{// 獲取每個(gè)司機(jī)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){// 通過計(jì)算得出需要繪制起終點(diǎn)let timeDifference,startLocation,endLocation;// 計(jì)算出司機(jī)行程和訂單的開始時(shí)間的時(shí)間差,用于計(jì)算繪制的位置timeDifference = new Date(item.start).valueOf() - new Date(this.begin).valueOf() ;startLocation = 0;if(timeDifference > 0 ){// 使用前面計(jì)算出的時(shí)間差的分?jǐn)?shù)除于每個(gè)跨度代表的分鐘數(shù),得出需要展示的比例,乘于每個(gè)跨度中的寬度,也就是40.得出需要X軸起點(diǎn)位置startLocation = timeDifference / 60000 /(60 * this.timeSpan) * 40}// X軸終點(diǎn)的位置,是計(jì)算司機(jī)行程的結(jié)束時(shí)間和訂單開始的時(shí)間差,由于計(jì)算出來是時(shí)間戳,除于60000得到分鐘數(shù),除于一個(gè)刻度區(qū)域里代表的分鐘數(shù),得出需要展示的比例,乘以固定的刻度區(qū)域?qū)挾?0,得出需要繪制的X軸終點(diǎn)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);},

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。