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

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

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

一，JS实现

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

function TimeScaleChart(canvas, options) {this.canvas = canvas;this.options = optionsthis.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);});
}

5，另外，支持异步加载资源图片，也既刻度线上的指针游标图片，代码如下：

function preImage(url, callback) { //图片异步加载，加载完后再canvas中画出var img = new Image(); //创建一个Image对象，实现图片的预下载  img.src = url;if (img.complete) { // 如果图片已经存在于浏览器缓存，直接调用回调函数  callback.call(img);return; // 直接返回，不用再处理onload事件  }img.onload = function() { //图片下载完毕时异步调用callback函数。  callback.call(img); //将回调函数的this替换为Image对象  };
}

二，页面中的使用

<!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;//回调函数，当鼠标点击和滑动使得其值更改时，会执行此函数，并把更改后的值返回给thistimeScaleChartOptions.callback = timeScaleChartFun;var chart = new TimeScaleChart(canvas, timeScaleChartOptions);chart.init();}</script></head><body><canvas id="Chart" width="" height="100"></canvas></body>
</html>

以上就是全部代码。

canvas上纯JS实现可滑动时间刻度轴相关推荐

html5游戏开发马赛克对比,基于HTML5 Canvas的纯JS图片马赛克效果插件
这是一款基于HTML5 canvas的图片马赛克js插件.该图片马赛克插件使用简单,可调整马赛克的大小,透明度等属性,适合用于制作一些特殊的图片效果. 基于HTML5 Canvas的纯JS图片马赛克效 ...
如何使用Qt绘制时间刻度轴
#简述在日常开发过程中,我们一般都使用Qt提供的控件库.但是在特殊情况下,我们需要一些特殊的效果,而Qt本身提供的控件有限,可能满足不了我们的需求.所有这个时候需要我们自己去创造新的控件. 创造新的 ...
将base64格式的图片画到canvas上（js和vue两种）
使用时将里面的base数据替换即可,画布大小进行修改 vue使用时必须在mounted里面.或者点击触发,因为在这个生命周期后才能获取dom元素 js <!DOCTYPE html> &l ...
纯JS实现左右滑动布局和滑动
<!DOCTYPE html> <html> <head><meta charset=utf-8><meta name=keywords cont ...
js纯ajax,自动完成JS类(纯JS, Ajax模式)
自动完成JS类(纯JS, Ajax模式) 更新时间:2009年03月12日 23:51:15 作者: 自动完成JS类,用户体验较好.封装成类,方便使用.本站一. 封装的JS文件 //****** ...
二维码生成插件qrious(纯JS)
二维码生成插件qrious(纯JS) 二维码又称QR Code,QR全称Quick Response,是一个近几年来移动设备上超流行的一种编码方式,它比传统的Bar Code条形码能存更多的信息,也能 ...
js手机端时间区间_js根据时间范围生成时间刻度数据
前言: 使用d3绘制时间轴图表,不可避免的涉及到动态变动时间刻度,根据业务需求需要调整查看不同的时间粒度数据.如果后台数据非连续数据,需要前端自己处理的话,就得自己根据时间范围创建时间刻度数据. 一. ...
设置横坐标刻度_是不是快被Excel的时间刻度逼疯了，教你两招轻松解决
最近身边的同事都要被Excel的时间刻度逼疯了,你是不是也遇到了同样的问题呢? 就拿下面这三张图片来说吧,日期刻度比较长,图表宽度不足,看上去特别不美观,而且阅读性很差. ❶ 时间轴显示不全❷ 时间轴 ...
python 大数据量绘图_Matplotlib绘图遇到时间刻度就犯难？现在，一次性告诉你四种方法...
点击上方"蓝字"关注我们 Python大数据分析记录分享成长添加微信号" CNFeffery "加入技术交流群最近有小伙伴私信我关于matpl ...

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

canvas上纯JS实现可滑动时间刻度轴相关推荐

最新文章

热门文章