手把手教你實現(xiàn)一個JavaScript時間軸組件
這是開頭
本文給大家?guī)硪粋€時間軸的組件開發(fā)教程,話不多說,先看動圖:
主要功能就是可以拖動時間軸來定位當(dāng)前時間,可以通過鼠標(biāo)滾輪來修改當(dāng)前時間分辨率,也支持顯示時間段功能,動圖未體現(xiàn),可看下面的本次demo效果示例:
如果對canvas不太熟悉的話可以先看一下教程:https://www.runoob.com/tags/ref-canvas.html
接下來進(jìn)入開發(fā)時間。
開發(fā)時間
前端框架依舊使用的是vue,這個組件交互是通過canvas實現(xiàn)的,模板非常簡單:
<template> <div class="timeLineContainer" ref="timeLineContainer"> <canvas ref="canvas" @mousemove="onMousemove" @mouseout="onMouseout" @mousedown="onMousedown" @mousewheel="onMouseweel" ></canvas> </div> </template>
綁定了四個事件,后續(xù)再細(xì)說。
準(zhǔn)備工作
首先要做的是設(shè)置一下畫布的寬高及獲取畫圖上下文:
{ methods: { init () { // 獲取外層寬高 let { width, height } = this.$refs.timeLineContainer.getBoundingClientRect() this.width = width this.height = height // 設(shè)置畫布寬高為外層元素寬高 this.$refs.canvas.width = width this.$refs.canvas.height = height // 獲取畫圖上下文 this.ctx = this.$refs.canvas.getContext('2d') } } }
中間的白色豎線
中間的白色豎線代表的就是當(dāng)前的時間,但是就線而言它只是一條線,所以先把它畫了:
{ // 這個函數(shù)是整個繪制方法,所有的繪制方法都在此調(diào)用 draw () { this.drawMiddleLine() }, // 畫中間的白色豎線 drawMiddleLine () { let lineWidth = 2 // 線的x坐標(biāo)是時間軸的中點,y坐標(biāo)即時間軸的高度 let x = this.width / 2 this.drawLine(x, 0, x, this.height, lineWidth, '#fff') }, // 畫線段方法 drawLine (x1, y1, x2, y2, lineWidth = 1, color = '#fff') { // 開始一段新路徑 this.ctx.beginPath() // 設(shè)置線段顏色 this.ctx.strokeStyle = '#fff' // 設(shè)置線段寬度 this.ctx.lineWidth = lineWidth // 將路徑起點移到x1,y1 this.ctx.moveTo(x1, y1) // 將路徑移動到x2,y2 this.ctx.lineTo(x2, y2) // 把路徑畫出來 this.ctx.stroke() } }
這樣白色豎線就有了:
時間刻度
時間刻度是本組件的核心,支持調(diào)整時間分辨率(就是整個時間軸所表示的時間范圍,也即每兩刻度之間的一格代表的時間大?。瑫憾ò?code>0.5, 1, 2, 6, 12, 24這五種,單位是小時,先定義幾個變量:
// 一小時的毫秒數(shù) const ONE_HOUR_STAMP = 60 * 60 * 1000 // 時間分辨率 const ZOOM = [0.5, 1, 2, 6, 12, 24] export default { data () { return { // 當(dāng)前所在時間分辨率的類型索引 currentZoomIndex: 5, // 當(dāng)前時間 currentTime: 0, // 時間軸左側(cè)起點所代表的時間,默認(rèn)為當(dāng)天的0點減12小時,即昨天中午12點 startTimestamp: new Date(moment().format('YYYY-MM-DD 00:00:00')).getTime() - 12 * ONE_HOUR_STAMP, } } }
時間分辨率放在ZOOM
的數(shù)組里,先以24分辨率來開發(fā),24代表的是整個時間軸表示的時間范圍為24小時。但是具體用一格表示多久呢,可以1個小時1格,也可以半個小時一格,隨便你,這里就用一格表示半個小時,其他分辨率也是如此,為了方便也把它們裝到一個數(shù)組里:
// 時間分辨率對應(yīng)的每格小時數(shù) const ZOOM_HOUR_GRID = [1 / 60, 1 / 60, 2 / 60, 1 / 6, 0.25, 0.5]
0.5就代表1小格代表0.5個小時,既然每格代表的小時數(shù)知道了,那么時間軸一共需要畫多少格也就確定了:
// 一共可以繪制的格數(shù),時間軸的時間范圍小時數(shù)除以每格代表的小時數(shù),24/0.5=48 let gridNum = ZOOM[this.currentZoomIndex] / ZOOM_HOUR_GRID[this.currentZoomIndex]
因為時間計算都是通過毫秒進(jìn)行計算,所以先算一下一格代表多少毫秒:
// 一格多少毫秒,將每格代表的小時數(shù)轉(zhuǎn)成毫秒數(shù)就可以了 let msPerGrid = ZOOM_HOUR_GRID[this.currentZoomIndex] * ONE_HOUR_STAMP
接下來是關(guān)鍵,因為要畫圖,最終還是要知道像素大小,那么每格是多少像素呢:
// 每格寬度,時間軸的寬度除以總格數(shù) let pxPerGrid = this.width / gridNum
接下來事情似乎就簡單了,循環(huán)一下畫出刻度就好了:
for (let i = 0; i < gridNum; i++) { // 橫坐標(biāo)就是當(dāng)前索引乘每格寬度 let x = i * pxPerGrid // 當(dāng)前刻度的時間,時間軸起始時間加上當(dāng)前格子數(shù)乘每格代表的毫秒數(shù) let graduationTime = this.startTimestamp + i * msPerGrid // 刻度高度為時間軸高度的20% let h = this.height * 0.2 // 刻度線顏色 this.ctx.fillStyle = 'rgba(151,158,167,1)' // 顯示時間 this.ctx.fillText( this.graduationTitle(graduationTime), x - 13,// 向左平移一半 h + 15// 加上行高 ) this.drawLine(x, 0, x, h, 1, 'rgba(151,158,167,1)') }
graduationTitle
方法是用來格式時間的,在0點時顯示日期而不是時間:
graduationTitle (datetime) { let time = moment(datetime) // 0點則顯示當(dāng)天日期 if ( time.hours() === 0 && time.minutes() === 0 && time.milliseconds() === 0 ) { return time.format('MM-DD') } else {// 否則顯示小時和分鐘 return time.format('HH:mm') } }
看下效果:
似乎很完美,但是這樣的真的可以了嗎?不妨把起始時間加上個15分鐘看一下:
startTimestamp: new Date(moment().format('YYYY-MM-DD 00:00:00')).getTime() - 12 * ONE_HOUR_STAMP + 15 * 60 * 1000// 加15分鐘
起始時間加上15分鐘,則為12:15分,看下效果:
可以看到,雖然每格代表的還是半個小時,但是我們的要求應(yīng)該是逢整點和半點才顯示刻度的,所以起始點應(yīng)該是處在12:00和12:30分兩根刻度的中間才對,所以畫刻度的位置就需要加上一個偏移量,這里的偏移量很明顯就是12:30-12:15=15分鐘,如果起始點是12:40,那么偏移量就是13:00-12:40=20分鐘,那么怎么算呢?我們不妨把時間拖回到0點,從0開始也許更容易看出來:
比如間距為10,起始點為5,那么與0的偏移量當(dāng)然是5,可以通過5-0也可以通過5%10來算出來,那如果起始點是14,與前一個點的偏移量是14-10=4,但問題是你不知道前一個點是多少,所以減不了,只能14%10=4來算。但是我們實際需要的是與后一個點的偏移量,很簡單,間距減去它就可以了。
其實很多差距的計算都可以通過取余來算,所以:
// 時間偏移量,初始時間除每格時間取余數(shù), let msOffset = msPerGrid - (this.startTimestamp % msPerGrid) // 距離偏移量,時間偏移量和每格時間比例乘每格像素 let pxOffset = (msOffset / msPerGrid) * pxPerGrid for (let i = 0; i < gridNum; i++) { let x = pxOffset + i * pxPerGrid let graduationTime = this.startTimestamp + msOffset + i * msPerGrid //... }
效果如下:
但是這樣每個刻度都顯示時間沒必要也有點丑,所以可以循環(huán)的時候加個判斷條件來選擇性的繪制,因為每種分辨率也有不同的判斷條件,所以也用一個數(shù)組來表示:
// 時間分辨率對應(yīng)的時間顯示判斷條件 const ZOOM_DATE_SHOW_RULE = [ () => {// 全都顯示 return true }, date => {// 每五分鐘顯示 return date.getMinutes() % 5 === 0 }, date => {// 顯示10、20、30...分鐘數(shù) return date.getMinutes() % 10 === 0 }, date => {// 顯示整點和半點小時 return date.getMinutes() === 0 || date.getMinutes() === 30 }, date => {// 顯示整點小時 return date.getMinutes() === 0 }, date => {// 顯示2、4、6...整點小時 return date.getHours() % 2 === 0 && date.getMinutes() === 0 } ] for (let i = 0; i < gridNum; i++) { let x = pxOffset + i * pxPerGrid let graduationTime = this.startTimestamp + msOffset + i * msPerGrid let h = 0 let date = new Date(graduationTime) // 0點顯示日期 if (date.getHours() === 0 && date.getMinutes() === 0) { h = this.height * 0.3 this.ctx.fillStyle = 'rgba(151,158,167,1)' this.ctx.fillText( this.graduationTitle(graduationTime), x - 13, h + 15 ) } else if (ZOOM_DATE_SHOW_RULE[this.currentZoomIndex](date)) {// 其他根據(jù)判斷條件來顯示 h = this.height * 0.2 this.ctx.fillStyle = 'rgba(151,158,167,1)' this.ctx.fillText( this.graduationTitle(graduationTime), x - 13, h + 15 ) } else {// 其他不顯示時間 h = this.height * 0.15 } this.drawLine(x, 0, x, h, 1, 'rgba(151,158,167,1)') }
效果如下:
鼠標(biāo)移動時顯示所在時間
鼠標(biāo)在時間軸上滑動時需要實時顯示鼠標(biāo)所在位置的時間,效果如下:
實現(xiàn)方式就是獲取到鼠標(biāo)相對畫布的位置,然后換算成距起始點的時間:
{ // 最開始就綁定的鼠標(biāo)移動事件 onMousemove (e) { // 計算出相對畫布的位置 let { left } = this.$refs.canvas.getBoundingClientRect() let x = e.clientX - left // 計算出時間軸上每毫秒多少像素 const PX_PER_MS = this.width / (ZOOM[this.currentZoomIndex] * ONE_HOUR_STAMP) // px/ms // 計算所在位置的時間 let time = this.startTimestamp + x / PX_PER_MS // 清除畫布 this.clearCanvas(this.width, this.height) // 繪制 this.draw() // 繪制實時的豎線及時間 this.drawLine(x, 0, x, this.height * 0.3, 'rgb(194, 202, 215)', 1) this.ctx.fillStyle = 'rgb(194, 202, 215)' this.ctx.fillText( moment(time).format('YYYY-MM-DD HH:mm:ss'), x - 20, this.height * 0.3 + 20 ) } }
拖動時間軸
萬眾矚目的焦點來了,時間軸時間軸,當(dāng)然得需要能拖動,不然那叫時間段,從效果上看好像是鼠標(biāo)拖著時間軸在滑動,但是實際上并沒有,跟動畫類似,就是不斷的刷新重繪,因為人眼的暫存效應(yīng),看起來就像在滑動一樣,而時間軸渲染的依據(jù)就是起始時間點,所以本質(zhì)上就是計算鼠標(biāo)拖動過程中的起始時間點是多少,先看一下鼠標(biāo)按下的事件處理函數(shù):
onMousedown (e) { let { left } = this.$refs.canvas.getBoundingClientRect() // 也是計算鼠標(biāo)相當(dāng)于時間軸左側(cè)的距離 this.mousedownX = e.clientX - left // 設(shè)置一下標(biāo)志位 this.mousedown = true // 緩存一下鼠標(biāo)按下時的起始時間點 this.mousedownCacheStartTimestamp = this.startTimestamp }
鼠標(biāo)開始移動就又到了鼠標(biāo)移動事件處理的那個函數(shù):
onMousemove (e) { let { left } = this.$refs.canvas.getBoundingClientRect() let x = e.clientX - left const PX_PER_MS = this.width / (ZOOM[this.currentZoomIndex] * ONE_HOUR_STAMP) // px/ms if (this.mousedown) { // 計算鼠標(biāo)當(dāng)前相當(dāng)于鼠標(biāo)按下那個點的距離 let diffX = x - this.mousedownX // 用鼠標(biāo)按下時的起始時間點減去拖動過程中的偏移量,往左拖是負(fù)值,減減得正,時間就是在增加,往右拖時間就是在減少 this.startTimestamp = this.mousedownCacheStartTimestamp - Math.round(diffX / PX_PER_MS) // 不斷刷新重繪就ok了 this.clearCanvas(this.width, this.height) this.draw() } else { // 鼠標(biāo)滑動顯示時間的邏輯 }
調(diào)整時間分辨率
調(diào)整時間分辨率說白了就是調(diào)整時間軸所表示的時間范圍,我們的范圍是定義在ZOOM
數(shù)組里的,所以通過鼠標(biāo)滾動來調(diào)整之前定義的變量currentZoomIndex
,然后重新渲染畫布即可,需要注意的是時間范圍調(diào)整了,而時間起始點不變的話那么當(dāng)前時間就會變,但是我們一般是希望當(dāng)前時間是不變的,所以需要調(diào)整時要計算新的時間起始點:
onMouseweel (event) { let e = window.event || event let delta = Math.max(-1, Math.min(1, e.wheelDelta || -e.detail)) if (delta < 0) { // 縮小 if (this.currentZoomIndex + 1 >= ZOOM.length - 1) { this.currentZoomIndex = ZOOM.length - 1 } else { this.currentZoomIndex++ } } else if (delta > 0) { // 放大 if (this.currentZoomIndex - 1 <= 0) { this.currentZoomIndex = 0 } else { this.currentZoomIndex-- } } this.clearCanvas(this.width, this.height) // 重新計算起始時間點,當(dāng)前時間-新的時間范圍的一半 this.startTimestamp = this.currentTime - (ZOOM[this.currentZoomIndex] * ONE_HOUR_STAMP) / 2 this.draw() }
繪制時間段
時間段就是在時間軸里帶顏色的矩形塊,先看看時間段的數(shù)據(jù)結(jié)構(gòu):
[ { beginTime: new Date('2020-06-10 09:30:00').getTime(), endTime: new Date('2020-06-10 11:20:00').getTime(), style: { background: '#5881CF' } } ]
接下來就是想辦法把起始時間用給定的顏色在時間軸里畫出來,首先要判斷一下時間段是否在當(dāng)前時間軸的范圍內(nèi),如果不相交當(dāng)然就不用畫了:
if (item.beginTime <= this.startTimestamp + ZOOM[this.currentZoomIndex] * ONE_HOUR_STAMP && item.endTime >= this.startTimestamp) { // 繪制范圍內(nèi)的線段 }
繪制矩形用的是fillRect
方法,它的四個參數(shù)分別是:x、y、width、height,先算起始點的坐標(biāo),y和height可以直接根據(jù)時間軸的高度來定,所以主要計算的就是x和width,x是起點值,可以用beginTime-startTimestamp再換算成像素就可以了,需要注意的是可能beginTime小于startTimestamp,負(fù)值顯然是不行的,所以轉(zhuǎn)成0,width就是起始時間的差值換算成像素,也需要注意小于0的情況,完整代碼如下:
drawTimeSegments () { const PX_PER_MS = this.width / (ZOOM[this.currentZoomIndex] * ONE_HOUR_STAMP) // px/ms this.timeSegments.forEach(item => { if ( item.beginTime <= this.startTimestamp + ZOOM[this.currentZoomIndex] * ONE_HOUR_STAMP && item.endTime >= this.startTimestamp ) { let x = (item.beginTime - this.startTimestamp) * PX_PER_MS let w if (x < 0) { x = 0 w = (item.endTime - this.startTimestamp) * PX_PER_MS } else { w = (item.endTime - item.beginTime) * PX_PER_MS } this.ctx.fillStyle = item.style.background this.ctx.fillRect(x, this.height * 0.6, w, this.height * 0.3) } }) }
為什么endTime大于時間軸最大時間的情況不用特殊處理呢,因為不管也沒關(guān)系,反正長度都已經(jīng)超出范圍了,再長一點短一點也看不到。
當(dāng)然,這樣單純的顯示一下時間段意義并不大,一般使用場景是代表在當(dāng)前時間段內(nèi)才有視頻,所以可以在時間段存在的情況下對拖動時間做一下處理,如果拖動到的時間點不在任何一個時間段內(nèi),那么就讓它吸附到離它最近的一個時間段的時間點上。
多個時間軸
一個時間軸往往是不夠用的,比如同時要進(jìn)行多路視頻回放,每個視頻都有自己的時間段,那么就需要多個時間軸來進(jìn)行顯示,這也很簡單,我們把時間段相關(guān)的代碼抽到一個單獨的組件里,然后把內(nèi)部狀態(tài)都通過props
進(jìn)行傳遞,這樣就可以進(jìn)行復(fù)用了:
<template> <div class="timeLineContainer" ref="timeLineContainer"> <canvas ref="canvas"></canvas> <!--多個時間軸--> <div class="windowList" ref="windowList" v-if="showWindowList && windowList && windowList.length > 1" @scroll="onWindowListScroll"> <WindowListItem v-for="(item, index) in windowListInner" ref="WindowListItem" :key="index" :index="index" :data="item" :totalMS="totalMS" :startTimestamp="startTimestamp" :width="width" :active="item.active" @click_window_timeSegments="triggerClickWindowTimeSegments" @click="toggleActive(index)" ></WindowListItem> </div> </div> </template>
每個單獨的時間軸也是一個canvas
:
// WindowListItem.vue <template> <div class="windowListItem" :class="{active: active}" ref="windowListItem" @click="onClick"> <span class="order">{{ index + 1 }}</span> <canvas class="windowListItemCanvas" ref="canvas"></canvas> </div> </template>
效果如下:
顯示自定義元素
除了時間段,有時候我們會想在時間段上顯示自定義元素,比如在某個時間點顯示一張圖片,因為時間軸是在動的,所以圖片也得跟著動,這可以給使用者提供一個監(jiān)聽時間的功能,具體實現(xiàn)就是在上文的繪制方法draw
里實時獲取某個時間點的位置,然后拋出一個事件給使用者監(jiān)聽,使用者可以根據(jù)監(jiān)聽到的left
、top
值來定位元素。
獲取某個時間點的位置也很簡單,先判斷這個時間點是否在當(dāng)前顯示的范圍內(nèi),不在的話那顯然就不用顯示,在的話再換算成在當(dāng)前時間軸上的位置,最后加上時間軸距離頁面的位置即可:
draw () { // ... // 更新觀察的時間位置 this.updateWatchTime() }
// 更新觀察的時間位置 updateWatchTime () { this.watchTimeList.forEach((item) => { // 當(dāng)前不在顯示范圍內(nèi) if (item.time < this.startTimestamp || item.time > this.startTimestamp + this.totalMS) { item.callback(-1, -1) } else { // 在范圍內(nèi) let x = (item.time - this.startTimestamp) * (this.width / this.totalMS) let y = 0 let { left, top } = this.$refs.canvas.getBoundingClientRect() if (item.windowTimeLineIndex !== -1 && this.windowList.length > 1 && item.windowTimeLineIndex >= 0 && item.windowTimeLineIndex < this.windowList.length) { let rect = this.$refs.WindowListItem[item.windowTimeLineIndex].getRect() y = rect ? rect.top : top } else { y = top } item.callback(x + left, y) } }) }
使用的時候,通過給你要顯示的元素設(shè)置絕對定位或固定定位,然后監(jiān)聽時間的當(dāng)前位置來修改元素的位置,如果時間軸本身的位置都變化了,比如頁面滾動了,需要手動調(diào)用updateWatchTime
方法來修正。
效果如下:
總結(jié)
本文介紹了如何實現(xiàn)一個視頻時間軸組件,可以滿足一些常見的場景,筆者也開發(fā)了一個可以直接使用的組件,文檔:https://github.com/wanglin2/VideoTimeLine,如何不滿足需求,也可以在此組件基礎(chǔ)上進(jìn)行定制。
以上就是手把手教你實現(xiàn)一個JavaScript時間軸組件的詳細(xì)內(nèi)容,更多關(guān)于JavaScript時間軸組件的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
dispatchEvent解決重疊元素響應(yīng)事件示例詳解
這篇文章主要為大家介紹了dispatchEvent解決重疊元素響應(yīng)事件示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-10-10基于JS正則表達(dá)式實現(xiàn)模板數(shù)據(jù)動態(tài)渲染(實現(xiàn)思路詳解)
這篇文章主要介紹了基于JS正則表達(dá)式實現(xiàn)模板數(shù)據(jù)動態(tài)渲染 ,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-03-03JavaScript實現(xiàn)彈出DIV層同時頁面背景漸變成半透明效果
這篇文章主要介紹了JavaScript實現(xiàn)彈出DIV層同時頁面背景漸變成半透明效果,涉及JavaScript彈出窗口的實現(xiàn)及頁面元素屬性動態(tài)變換的相關(guān)技巧,需要的朋友可以參考下2016-03-03javascript replace()正則替換實現(xiàn)代碼
javascript-replace()基礎(chǔ),一次完成將"<,>"替換"<>"實例2010-02-02JS+CSS實現(xiàn)分類動態(tài)選擇及移動功能效果代碼
這篇文章主要介紹了JS+CSS實現(xiàn)分類動態(tài)選擇及移動功能效果代碼,涉及JavaScript實現(xiàn)頁面元素動態(tài)變換效果實現(xiàn)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-10-10JavaScript 面向?qū)ο蠡A(chǔ)簡單示例
這篇文章主要介紹了JavaScript 面向?qū)ο蠡A(chǔ),結(jié)合簡單實例形式分析了JavaScript面向?qū)ο蟪绦蛟O(shè)計中類的定義、類方法與屬性相關(guān)操作技巧,需要的朋友可以參考下2019-10-10