时间刻度轴，支持滑动和点击刻度轴，先放一张效果图。
实现原理其实很简单，就是在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;
}
}
options.chooseIndex = tempIndex + 1;
_this.update(options);
_this.options.callback.call((tempIndex + 1 + 1) / 2);
});
//注册touchmove事件，用于监测滑动事件
this.canvas.addEventListener('touchmove', function(evt) {
var tempLength = 100000;
var tempIndex = 0;
var selectX = evt.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;
}
}
options.chooseIndex = tempIndex + 1;
_this.update(options);
});
}
2，定义init()方法，用于初始化操作
TimeScaleChart.prototype.init = function() { var _this = this; _this.draw(); this.inited = true; }
3，定义update()方法，用于点击事件的更新操作
TimeScaleChart.prototype.update = function(options) {
this.options = options;
if (this.inited) {
this.init();
}
}
4，定义draw()方法，用于在canvas上画出图形。
TimeScaleChart.prototype.draw = function() {
var _this = this;
//横线距底部偏移量
var offsetY = 13 * diviceRatio;
this.ctx.save();
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
this.ctx.fillStyle = this.options.backgroundColor;
this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
//横线
this.ctx.beginPath();
this.ctx.strokeStyle = this.options.lineColors[0];
this.ctx.lineWidth = 1 * diviceRatio;
this.ctx.moveTo(0, this.canvas.height - offsetY);
this.ctx.lineTo(this.canvas.width, this.canvas.height - offsetY)
this.ctx.stroke();
for (var i = 0; i < this.scaleXpointArr.length; i++) {
//刻度
this.ctx.beginPath();
this.ctx.strokeStyle = this.options.lineColors[1];
this.ctx.lineWidth = 1 * diviceRatio;
//整数刻度
var scaleY = 20 * diviceRatio;
if (i % 2) {
//半数刻度
scaleY = 10 * diviceRatio;
}
this.ctx.moveTo(this.scaleXpointArr[i], this.canvas.height - offsetY - scaleY);
this.ctx.lineTo(this.scaleXpointArr[i], this.canvas.height - offsetY)
this.ctx.stroke();
//文字
if (i % 2 == 0) {
this.ctx.fillStyle = this.options.labelColors[0];
// this.ctx.font = this.options.fontSize + this.options.fontName;
var fontSize1 = 8 * diviceRatio;
//字向下偏移量
var font_offsetY = fontSize1 + 1 * diviceRatio;
this.ctx.font = fontSize1 + "px Arial";
var text1 = i / 2 + 1;
var textWidth1 = this.ctx.measureText(text1).width;
var textHeight1 = this.ctx.measureText(text1).height;
this.ctx.fillText(text1, this.scaleXpointArr[i] - textWidth1, (this.canvas.height - offsetY + font_offsetY));
var fontSize2 = 6 * diviceRatio;
this.ctx.font = fontSize2 + "px Arial";
var text2 = "月";
var textWidth2 = this.ctx.measureText(text2).width;
this.ctx.fillText(text2, this.scaleXpointArr[i], (this.canvas.height - offsetY + font_offsetY));
}
}
//大屏手机加载3倍图
if (diviceRatio > 2) {
_this.options.chooseImg = _this.options.chooseImg.replace('@2x', '@3x');
}
//选中图片
preImage(_this.options.chooseImg, function() {
//此处的this指img，实际月份等于_this.options.chooseIndex * 2 - 1
_this.ctx.drawImage(this, (_this.options.chooseIndex) * _this.perStep - this.width / 2, _this.canvas.height - offsetY - this.height);
});
}
二，页面中的使用
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="animation.js"></script>
<script type="text/javascript">
function timeScaleChartFun() {
console.info("callback:" + this);
}
window.onload = function(){
var timeScaleChartOptions = {};
var canvas = document.getElementById("Chart");
canvas.width = document.body.clientWidth;
canvas.style.width = canvas.width + "px";
canvas.style.height = canvas.height + "px";
canvas.width = canvas.width * diviceRatio;
canvas.height = canvas.height * diviceRatio;
//背景颜色
timeScaleChartOptions.backgroundColor = "#F3F3F3";
//字颜色
timeScaleChartOptions.labelColors = ["#d1445a"];
//线颜色：1，横线颜色；2，竖线颜色
timeScaleChartOptions.lineColors = ["#d1445a", "#faaa6c"];
//选中滑动图标
timeScaleChartOptions.chooseImg = "images/timeScaleChart@2x.png";
//默认选中月份
timeScaleChartOptions.chooseIndex = 9.5;
//回调函数，当鼠标点击和滑动使得其值更改时，会执行此函数，并把更改后的值返回给this
timeScaleChartOptions.callback = timeScaleChartFun;
var chart = new TimeScaleChart(canvas, timeScaleChartOptions);
chart.init();
}
</script>
</head>
<body>
<canvas id="Chart" width="" height="100"></canvas>
</body>
</html>
以上就是全部代码。
相关文章
精彩导读
热门资讯
关注我们
