您现在的位置是：网站首页> 编程资料编程资料

手把手教你实现一个JavaScript时间轴组件_javascript技巧_

2023-05-24 345人已围观

简介手把手教你实现一个JavaScript时间轴组件_javascript技巧_

这是开头

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

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

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

接下来进入开发时间。

开发时间

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

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

准备工作

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

{ 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(dif
                提示：
                    本文由神整理自网络，如有侵权请联系本站删除！
                    

                    本站声明： 

                    1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持； 

                    2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！
                
                
                
                                            上一篇：el-table 选中行与复选框相互联动的实现步骤_vue.js_
                                                                下一篇：Vue和uniapp中该如何使用canvas详解_vue.js_

您现在的位置是：网站首页> 编程资料编程资料

手把手教你实现一个JavaScript时间轴组件_javascript技巧_

目录

这是开头

开发时间

准备工作

中间的白色竖线

时间刻度

鼠标移动时显示所在时间

拖动时间轴

相关内容

点击排行

本栏推荐

猜你喜欢