221 lines
7.8 KiB
JavaScript
221 lines
7.8 KiB
JavaScript
|
|
|||
|
|
(function($){
|
|||
|
|
|
|||
|
|
function drawSin(xOffset,color1,color2){
|
|||
|
|
var config = this.data('waterBall').config;
|
|||
|
|
var canvas = document.createElement('canvas');
|
|||
|
|
var ctx = canvas.getContext('2d');
|
|||
|
|
canvas.width = config.cvs_config.width;
|
|||
|
|
canvas.height = config.cvs_config.height;
|
|||
|
|
|
|||
|
|
/****剪切内圆画布***/
|
|||
|
|
ctx.save();
|
|||
|
|
var points = [];//用于存放绘制Sin曲线的点
|
|||
|
|
ctx.beginPath();
|
|||
|
|
ctx.arc(config.circle_config.r,config.circle_config.r,config.circle_config.cR - 5,0,2 * Math.PI);
|
|||
|
|
ctx.clip();
|
|||
|
|
ctx.closePath();
|
|||
|
|
|
|||
|
|
/***画sin曲线***/
|
|||
|
|
ctx.beginPath();
|
|||
|
|
//在整个轴长上取点
|
|||
|
|
var w_sX = config.wave_config.sX,
|
|||
|
|
w_waveWidth = config.wave_config.waveWidth,
|
|||
|
|
w_waveHeight = config.wave_config.waveHeight,
|
|||
|
|
w_axisLength = config.wave_config.axisLength,
|
|||
|
|
c_width = config.cvs_config.width,
|
|||
|
|
c_height = config.cvs_config.height;
|
|||
|
|
|
|||
|
|
for(var x = w_sX;x < w_sX + w_axisLength;x += 20 / w_axisLength) {
|
|||
|
|
//此处坐标(x,y)的取点，依靠公式 “振幅高*sin(x*振幅宽 + 振幅偏移量)”
|
|||
|
|
var y = -Math.sin((w_sX + x) * w_waveWidth + xOffset);
|
|||
|
|
|
|||
|
|
var dY = c_height * (1 - config.nowRange / 100 );
|
|||
|
|
|
|||
|
|
points.push([x, dY + y * w_waveHeight]);
|
|||
|
|
ctx.lineTo(x, dY + y * w_waveHeight);
|
|||
|
|
}
|
|||
|
|
ctx.lineTo(w_axisLength,c_height);
|
|||
|
|
ctx.lineTo(w_sX,c_height);
|
|||
|
|
ctx.lineTo(points[0][0],points[0][1]);
|
|||
|
|
|
|||
|
|
var gradient = ctx.createLinearGradient(0,c_height,c_width,points[points.length - 1][1]);
|
|||
|
|
gradient.addColorStop(0,color1);
|
|||
|
|
gradient.addColorStop(1,color2);
|
|||
|
|
|
|||
|
|
ctx.fillStyle = gradient;
|
|||
|
|
ctx.fill();
|
|||
|
|
ctx.restore();
|
|||
|
|
|
|||
|
|
|
|||
|
|
/**绘制百分比文本**/
|
|||
|
|
if (!config.isLoading) {
|
|||
|
|
ctx.save();
|
|||
|
|
var size = 0.4 * config.circle_config.cR;
|
|||
|
|
ctx.font = size + 'px Microsoft Yahei';
|
|||
|
|
ctx.textAlign = 'center';
|
|||
|
|
ctx.fillStyle = config.textColorRange[getIndex.call(this)];
|
|||
|
|
ctx.fillText(~~config.nowRange + '%', config.circle_config.r, config.circle_config.r + size / 2);
|
|||
|
|
ctx.restore();
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
return canvas;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function drawCircle(){
|
|||
|
|
var config = this.data('waterBall').config;
|
|||
|
|
var canvas = document.createElement('canvas');
|
|||
|
|
var ctx = canvas.getContext('2d');
|
|||
|
|
canvas.width = config.cvs_config.width;
|
|||
|
|
canvas.height = config.cvs_config.height;
|
|||
|
|
ctx.lineWidth = config.lineWidth;
|
|||
|
|
ctx.beginPath();
|
|||
|
|
ctx.strokeStyle = config.circle_line_color[getIndex.call(this)];
|
|||
|
|
ctx.arc(config.circle_config.r,config.circle_config.r,config.circle_config.cR,0,2 * Math.PI);
|
|||
|
|
ctx.stroke();
|
|||
|
|
|
|||
|
|
return canvas;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function getIndex(){
|
|||
|
|
var config = this.data('waterBall').config;
|
|||
|
|
for (var i = 0,data = config.data_range;i < data.length;i++) {
|
|||
|
|
if (config.nowRange < data[i]) {
|
|||
|
|
return i;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
return data.length - 1;
|
|||
|
|
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
var methods = {
|
|||
|
|
init: function (config) {
|
|||
|
|
|
|||
|
|
return this.each(function(){
|
|||
|
|
//使用jQuery data方法对每个元素跟踪变量
|
|||
|
|
|
|||
|
|
var $this = $(this),
|
|||
|
|
data = $this.data('waterBall'),
|
|||
|
|
_config = {
|
|||
|
|
cvs_config:{
|
|||
|
|
width:220,//canvas的长
|
|||
|
|
height:220//canvas的高
|
|||
|
|
},
|
|||
|
|
wave_config:{
|
|||
|
|
sX:0,//x轴偏移
|
|||
|
|
sY:220 / 2,
|
|||
|
|
waveWidth:0.015,//波宽
|
|||
|
|
waveHeight:5,//波高
|
|||
|
|
axisLength:220,//轴长
|
|||
|
|
speed:0.09,//波速
|
|||
|
|
xOffset:0
|
|||
|
|
},
|
|||
|
|
circle_config:{
|
|||
|
|
r:220 / 2,//圆心
|
|||
|
|
cR:220 / 2 - 5//半径
|
|||
|
|
},
|
|||
|
|
isLoading:false,//当isLoading为true时，不显示百分比文字
|
|||
|
|
nowRange:0,
|
|||
|
|
targetRange:0,
|
|||
|
|
lineWidth:2,//圆圈线条宽度
|
|||
|
|
data_range:[60,80,100],//数据临界值范围
|
|||
|
|
textColorRange:['#f44236','#fff','#fff'],//不同临界值文字的颜色范围
|
|||
|
|
circle_line_color:['#f15248','#f4c22b','#1de9b6'],//不同临界值圆圈线条颜色
|
|||
|
|
main_backcolor_range:[['#f15248','#f75c52'],['#f4c22b','#ffd148'],['#1de9b6','#35f1c2']],//渐变色
|
|||
|
|
backcolor_range:[['#f44236','#f75c52'],['#f4c22b','#ffd148'],['#1de9b6','#35f1c2']]
|
|||
|
|
};
|
|||
|
|
if (!data) {
|
|||
|
|
var wave_config = {},circle_config = {};
|
|||
|
|
if (config.cvs_config) {
|
|||
|
|
wave_config = {
|
|||
|
|
sY:config.cvs_config.width / 2,
|
|||
|
|
axisLength:config.cvs_config.width
|
|||
|
|
};
|
|||
|
|
circle_config = {
|
|||
|
|
r:config.cvs_config.width / 2,
|
|||
|
|
cR:config.cvs_config.width / 2 - 5
|
|||
|
|
};
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
$.extend(true, _config,{
|
|||
|
|
wave_config:wave_config,
|
|||
|
|
circle_config:circle_config
|
|||
|
|
},config);
|
|||
|
|
var canvas = document.createElement('canvas');
|
|||
|
|
canvas.width = _config.cvs_config.width;
|
|||
|
|
canvas.height = _config.cvs_config.height;
|
|||
|
|
$this.html("").html($(canvas));
|
|||
|
|
$this.data('waterBall',{
|
|||
|
|
canvas:canvas,
|
|||
|
|
target:$this,
|
|||
|
|
config:_config
|
|||
|
|
});
|
|||
|
|
methods.render.apply($this);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
},
|
|||
|
|
destroy: function () {
|
|||
|
|
},
|
|||
|
|
updateRange:function (newVal) {
|
|||
|
|
return this.each(function(){
|
|||
|
|
var $this = $(this),
|
|||
|
|
data = $this.data('waterBall');
|
|||
|
|
if (!data) return;
|
|||
|
|
var config = $this.data('waterBall').config;
|
|||
|
|
config.targetRange = 0;
|
|||
|
|
config.nowRange = 0;
|
|||
|
|
config.isLoading = false;
|
|||
|
|
setTimeout(function () {
|
|||
|
|
config.targetRange = newVal;
|
|||
|
|
},0);
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
render: function () {
|
|||
|
|
var config = this.data('waterBall').config;
|
|||
|
|
var _canvas = this.data('waterBall').canvas;
|
|||
|
|
var w_sX = config.wave_config.sX,
|
|||
|
|
xOffset = config.wave_config.xOffset,
|
|||
|
|
bg_color1 = config.backcolor_range[getIndex.call(this)][0],
|
|||
|
|
bg_color2 = config.backcolor_range[getIndex.call(this)][1],
|
|||
|
|
main_bg_color1 = config.main_backcolor_range[getIndex.call(this)][0],
|
|||
|
|
main_bg_color2 = config.main_backcolor_range[getIndex.call(this)][1],
|
|||
|
|
ctx = _canvas.getContext('2d');
|
|||
|
|
|
|||
|
|
var cvs1 = drawCircle.call(this);
|
|||
|
|
|
|||
|
|
if (config.nowRange <= config.targetRange) {
|
|||
|
|
var tmp = 1;
|
|||
|
|
config.nowRange += tmp;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (config.nowRange > config.targetRange) {
|
|||
|
|
var tmp = 1;
|
|||
|
|
config.nowRange -= tmp;
|
|||
|
|
}
|
|||
|
|
var cvs2 = drawSin.call(this,xOffset + 40, bg_color1, bg_color2);
|
|||
|
|
var cvs3 = drawSin.call(this,-40 + xOffset, main_bg_color1, main_bg_color2);
|
|||
|
|
ctx.clearRect(0,0,config.cvs_config.width,config.cvs_config.height);
|
|||
|
|
ctx.drawImage(cvs1, 0, 0);
|
|||
|
|
ctx.drawImage(cvs2, 0, 0);
|
|||
|
|
ctx.drawImage(cvs3, 0, 0);
|
|||
|
|
delete cvs1;
|
|||
|
|
delete cvs2;
|
|||
|
|
delete cvs3;
|
|||
|
|
|
|||
|
|
config.wave_config.xOffset += config.wave_config.speed;
|
|||
|
|
requestAnimationFrame(methods.render.bind(this));
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
$.fn.createWaterBall = function(method) {
|
|||
|
|
|
|||
|
|
if (methods[method]) {
|
|||
|
|
return methods[method].apply(this,Array.prototype.slice.call(arguments,1));
|
|||
|
|
} else if(typeof method === 'object' || !method) {
|
|||
|
|
return methods.init.apply(this,arguments);
|
|||
|
|
} else {
|
|||
|
|
$.error('Method ' + method + 'does not exits on jQuery.createWaterBall');
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
})(jQuery);
|