持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第12天，点击查看活动详情

这是开头

本文给大家带来一个时间轴的组件开发教程，话不多说，先看动图：

主要功能就是可以拖动时间轴来定位当前时间，可以通过鼠标滚轮来修改当前时间分辨率，也支持显示时间段功能，动图未体现，可看下面的本次demo效果示例：

如果对canvas不太熟悉的话可以先看一下教程：https://www.runoob.com/tags/ref-canvas.html

接下来进入开发时间。

开发时间

前端框架依旧使用的是vue，这个组件交互是通过canvas实现的，模板非常简单：

<template>
  <div class="timeLineContainer" ref="timeLineContainer">
    <canvas
      ref="canvas"
      @mousemove="onMousemove"
      @mouseout="onMouseout"
      @mousedown="onMousedown"
      @mousewheel="onMouseweel"
    ></canvas>
  </div>
</template>

绑定了四个事件，后续再细说。

准备工作

首先要做的是设置一下画布的宽高及获取画图上下文：

{
    methods: {
        init () {
            // 获取外层宽高
            let {
                width,
                height
            } = this.$refs.timeLineContainer.getBoundingClientRect()
            this.width = width
            this.height = height
            // 设置画布宽高为外层元素宽高
            this.$refs.canvas.width = width
            this.$refs.canvas.height = height
            // 获取画图上下文
            this.ctx = this.$refs.canvas.getContext('2d')
        }
    }
}

中间的白色竖线

中间的白色竖线代表的就是当前的时间，但是就线而言它只是一条线，所以先把它画了：

{
    // 这个函数是整个绘制方法，所有的绘制方法都在此调用
    draw () {
        this.drawMiddleLine()
    },
    // 画中间的白色竖线
    drawMiddleLine () {
        let lineWidth = 2
        // 线的x坐标是时间轴的中点，y坐标即时间轴的高度
        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()
        // 设置线段颜色
        this.ctx.strokeStyle = '#fff'
        // 设置线段宽度
        this.ctx.lineWidth = lineWidth
        // 将路径起点移到x1,y1
        this.ctx.moveTo(x1, y1)
        // 将路径移动到x2,y2
        this.ctx.lineTo(x2, y2)
        // 把路径画出来
        this.ctx.stroke()
    }
}

这样白色竖线就有了：

时间刻度

时间刻度是本组件的核心，支持调整时间分辨率（就是整个时间轴所表示的时间范围，也即每两刻度之间的一格代表的时间大小），暂定包含0.5, 1, 2, 6, 12, 24这五种，单位是小时，先定义几个变量：

// 一小时的毫秒数
const ONE_HOUR_STAMP = 60 * 60 * 1000
// 时间分辨率
const ZOOM = [0.5, 1, 2, 6, 12, 24]

export default {
    data () {
        return {
            // 当前所在时间分辨率的类型索引
            currentZoomIndex: 5,
            // 当前时间
            currentTime: 0,
            // 时间轴左侧起点所代表的时间，默认为当天的0点减12小时，即昨天中午12点
            startTimestamp:
            new Date(moment().format('YYYY-MM-DD 00:00:00')).getTime() -
            12 * ONE_HOUR_STAMP,
        }
    }
}

时间分辨率放在ZOOM的数组里，先以24分辨率来开发，24代表的是整个时间轴表示的时间范围为24小时。但是具体用一格表示多久呢，可以1个小时1格，也可以半个小时一格，随便你，这里就用一格表示半个小时，其他分辨率也是如此，为了方便也把它们装到一个数组里：

// 时间分辨率对应的每格小时数
const ZOOM_HOUR_GRID = [1 / 60, 1 / 60, 2 / 60, 1 / 6, 0.25, 0.5]

0.5就代表1小格代表0.5个小时，既然每格代表的小时数知道了，那么时间轴一共需要画多少格也就确定了：

// 一共可以绘制的格数，时间轴的时间范围小时数除以每格代表的小时数，24/0.5=48
let gridNum = ZOOM[this.currentZoomIndex] / ZOOM_HOUR_GRID[this.currentZoomIndex]

因为时间计算都是通过毫秒进行计算，所以先算一下一格代表多少毫秒：

// 一格多少毫秒，将每格代表的小时数转成毫秒数就可以了
let msPerGrid = ZOOM_HOUR_GRID[this.currentZoomIndex] * ONE_HOUR_STAMP

接下来是关键，因为要画图，最终还是要知道像素大小，那么每格是多少像素呢：

// 每格宽度，时间轴的宽度除以总格数
let pxPerGrid = this.width / gridNum

接下来事情似乎就简单了，循环一下画出刻度就好了：

for (let i = 0; i < gridNum; i++) {
    // 横坐标就是当前索引乘每格宽度
    let x = i * pxPerGrid
    // 当前刻度的时间，时间轴起始时间加上当前格子数乘每格代表的毫秒数
    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点则显示当天日期
    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分，看下效果：

可以看到，虽然每格代表的还是半个小时，但是我们的要求应该是逢整点和半点才显示刻度的，所以起始点应该是处在12:00和12:30分两根刻度的中间才对，所以画刻度的位置就需要加上一个偏移量，这里的偏移量很明显就是12:30-12:15=15分钟，如果起始点是12:40，那么偏移量就是13:00-12:40=20分钟，那么怎么算呢？我们不妨把时间拖回到0点，从0开始也许更容易看出来：

比如间距为10，起始点为5，那么与0的偏移量当然是5，可以通过5-0也可以通过5%10来算出来，那如果起始点是14，与前一个点的偏移量是14-10=4，但问题是你不知道前一个点是多少，所以减不了，只能14%10=4来算。但是我们实际需要的是与后一个点的偏移量，很简单，间距减去它就可以了。

其实很多差距的计算都可以通过取余来算，所以：

// 时间偏移量，初始时间除每格时间取余数，
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
    //...
}

效果如下：

但是这样每个刻度都显示时间没必要也有点丑，所以可以循环的时候加个判断条件来选择性的绘制，因为每种分辨率也有不同的判断条件，所以也用一个数组来表示：

// 时间分辨率对应的时间显示判断条件
const ZOOM_DATE_SHOW_RULE = [
  () => {// 全都显示
    return true
  },
  date => {// 每五分钟显示
    return date.getMinutes() % 5 === 0
  },
  date => {// 显示10、20、30...分钟数
    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)) {// 其他根据判断条件来显示
        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)')
}

效果如下：

鼠标移动时显示所在时间

鼠标在时间轴上滑动时需要实时显示鼠标所在位置的时间，效果如下：

实现方式就是获取到鼠标相对画布的位置，然后换算成距起始点的时间：

{
    // 最开始就绑定的鼠标移动事件
    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
        )
    }
}

拖动时间轴

万众瞩目的焦点来了，时间轴时间轴，当然得需要能拖动，不然那叫时间段，从效果上看好像是鼠标拖着时间轴在滑动，但是实际上并没有，跟动画类似，就是不断的刷新重绘，因为人眼的暂存效应，看起来就像在滑动一样，而时间轴渲染的依据就是起始时间点，所以本质上就是计算鼠标拖动过程中的起始时间点是多少，先看一下鼠标按下的事件处理函数：

onMousedown (e) {
    let { left } = this.$refs.canvas.getBoundingClientRect()
    // 也是计算鼠标相当于时间轴左侧的距离
    this.mousedownX = e.clientX - left
    // 设置一下标志位
    this.mousedown = true
    // 缓存一下鼠标按下时的起始时间点
    this.mousedownCacheStartTimestamp = this.startTimestamp
}

鼠标开始移动就又到了鼠标移动事件处理的那个函数：

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) {
        // 计算鼠标当前相当于鼠标按下那个点的距离
        let diffX = x - this.mousedownX
        // 用鼠标按下时的起始时间点减去拖动过程中的偏移量，往左拖是负值，减减得正，时间就是在增加，往右拖时间就是在减少
        this.startTimestamp =
          this.mousedownCacheStartTimestamp - Math.round(diffX / PX_PER_MS)
        // 不断刷新重绘就ok了
        this.clearCanvas(this.width, this.height)
        this.draw()
      } else {
       	// 鼠标滑动显示时间的逻辑
      }

调整时间分辨率

调整时间分辨率说白了就是调整时间轴所表示的时间范围，我们的范围是定义在ZOOM数组里的，所以通过鼠标滚动来调整之前定义的变量currentZoomIndex，然后重新渲染画布即可，需要注意的是时间范围调整了，而时间起始点不变的话那么当前时间就会变，但是我们一般是希望当前时间是不变的，所以需要调整时要计算新的时间起始点：

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)
    // 重新计算起始时间点，当前时间-新的时间范围的一半
    this.startTimestamp =
        this.currentTime - (ZOOM[this.currentZoomIndex] * ONE_HOUR_STAMP) / 2 
    this.draw()
}

绘制时间段

时间段就是在时间轴里带颜色的矩形块，先看看时间段的数据结构：

[
    {
        beginTime: new Date('2020-06-10 09:30:00').getTime(),
        endTime: new Date('2020-06-10 11:20:00').getTime(),
        style: {
            background: '#5881CF'
        }
    }
]

接下来就是想办法把起始时间用给定的颜色在时间轴里画出来，首先要判断一下时间段是否在当前时间轴的范围内，如果不相交当然就不用画了：

if (item.beginTime <= this.startTimestamp + ZOOM[this.currentZoomIndex] * ONE_HOUR_STAMP && item.endTime >= this.startTimestamp) {
    // 绘制范围内的线段
}

绘制矩形用的是fillRect方法，它的四个参数分别是：x、y、width、height，先算起始点的坐标，y和height可以直接根据时间轴的高度来定，所以主要计算的就是x和width，x是起点值，可以用beginTime-startTimestamp再换算成像素就可以了，需要注意的是可能beginTime小于startTimestamp，负值显然是不行的，所以转成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大于时间轴最大时间的情况不用特殊处理呢，因为不管也没关系，反正长度都已经超出范围了，再长一点短一点也看不到。

当然，这样单纯的显示一下时间段意义并不大，一般使用场景是代表在当前时间段内才有视频，所以可以在时间段存在的情况下对拖动时间做一下处理，如果拖动到的时间点不在任何一个时间段内，那么就让它吸附到离它最近的一个时间段的时间点上。

多个时间轴

一个时间轴往往是不够用的，比如同时要进行多路视频回放，每个视频都有自己的时间段，那么就需要多个时间轴来进行显示，这也很简单，我们把时间段相关的代码抽到一个单独的组件里，然后把内部状态都通过props进行传递，这样就可以进行复用了：

<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>

效果如下：

显示自定义元素

除了时间段，有时候我们会想在时间段上显示自定义元素，比如在某个时间点显示一张图片，因为时间轴是在动的，所以图片也得跟着动，这可以给使用者提供一个监听时间的功能，具体实现就是在上文的绘制方法draw里实时获取某个时间点的位置，然后抛出一个事件给使用者监听，使用者可以根据监听到的left、top值来定位元素。

获取某个时间点的位置也很简单，先判断这个时间点是否在当前显示的范围内，不在的话那显然就不用显示，在的话再换算成在当前时间轴上的位置，最后加上时间轴距离页面的位置即可：

draw () {
    // ...

    // 更新观察的时间位置
    this.updateWatchTime()
}

// 更新观察的时间位置
updateWatchTime () {
    this.watchTimeList.forEach((item) => {
        // 当前不在显示范围内
        if (item.time < this.startTimestamp || item.time > this.startTimestamp + this.totalMS) {
            item.callback(-1, -1)
        } else { // 在范围内
            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)
        }
    })
}

使用的时候，通过给你要显示的元素设置绝对定位或固定定位，然后监听时间的当前位置来修改元素的位置，如果时间轴本身的位置都变化了，比如页面滚动了，需要手动调用updateWatchTime方法来修正。

效果如下：

总结

本文介绍了如何实现一个视频时间轴组件，可以满足一些常见的场景，笔者也开发了一个可以直接使用的组件，文档：https://github.com/wanglin2/VideoTimeLine，如何不满足需求，也可以在此组件基础上进行定制。