canvas上纯JS实现可滑动时间刻度轴

最新推荐文章于 2023-10-25 17:07:02 发布

放荡不羁的圣诞老人

最新推荐文章于 2023-10-25 17:07:02 发布

阅读量8.6k

点赞数 1

分类专栏：前端早读课文章标签： HTML5 javascript canvas

本文链接：https://blog.csdn.net/laosaidan/article/details/75308850

版权

本文介绍如何使用纯JS在HTML5 canvas上创建一个可滑动的时间刻度轴，包括绘制图形、实现点击拖动效果以及相关的方法如init()、update()和draw()。示例中提供了一张完成效果的图片。

摘要由CSDN通过智能技术生成

时间刻度轴，支持滑动和点击刻度轴，先放一张效果图。

实现原理其实很简单，就是在canvas上画图，然后支持点击拖动效果，主要代码如下：

一，JS实现

1，定义TimeScaleChart类，定义内部变量组options，以及注册事件，执行回调函数返回当前刻度值。

function TimeScaleChart(canvas, options) {
    this.canvas = canvas;
    this.options = options
    this.ctx = canvas.getContext("2d");
    this.inited = false;
    this.touchPoint;
    this.value;
    this.canTouch = true;
    this.options.chooseIndex = options.chooseIndex * 2 - 1;
    //生成x轴刻度点数组
    this.scaleXpointArr = new Array();
    this.perStep = this.canvas.width / 24;
    for (var i = 0; i < 23; i++) {
        this.scaleXpointArr.push((i + 1) * this.perStep);
    }

    //注册touchend事件，用于监测点击事件
    var _this = this;
    this.canvas.addEventListener('touchend', function(eve) {
        var tempLength = 100000;
        var tempIndex = 0;
        var selectX = eve.changedTouches[0].clientX;
        for (var i = 0; i < _this.scaleXpointArr.length; i++) {
            var tmpValue = Math.abs(_this.scaleXpointArr[i] - selectX * diviceRatio);
            if (tmpValue <= tempLength) {
                tempLength = tmpValue;
                tempIndex = i;
            }
        }
        optio