时间刻度轴,支持滑动和点击刻度轴,先放一张效果图。
实现原理其实很简单,就是在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