355 lines
13 KiB
JavaScript
355 lines
13 KiB
JavaScript
/**
|
||
* Created by JianJia.Zhou<jianjia.zhou@longmaster.com.cn> on 2017/12/18.
|
||
*/
|
||
var CircleProcess = (function (window) {
|
||
// 版本
|
||
var version = "0.0.1";
|
||
|
||
var CircleProcess = function (selector, options) {
|
||
return new CircleProcess.fn.init(selector, options);
|
||
};
|
||
CircleProcess.fn = CircleProcess.prototype = {
|
||
circleProcess: version,
|
||
context: null,
|
||
option: {},
|
||
interVal: 0,
|
||
constructor: CircleProcess,
|
||
init: function (selector, options) {
|
||
// 如果没有传递实体对象 抛出异常
|
||
if (typeof selector === "undefined") {
|
||
throw new Error("Unable to get canvas object");
|
||
}
|
||
// 获取canvas对象
|
||
this.context = selector.getContext("2d");
|
||
|
||
// 获取配置
|
||
this.option = this._option();
|
||
// 根据canvas获取初始配置
|
||
this._getCanvasOption(selector);
|
||
// 获取全局配置
|
||
this._getOption();
|
||
if (typeof options === 'object') {
|
||
this._setOption(options);
|
||
this._getOption();
|
||
}
|
||
this.interVal = setInterval(function () {
|
||
this.run();
|
||
}.bind(this), 20);
|
||
},
|
||
|
||
/**
|
||
* 执行
|
||
*/
|
||
run: function () {
|
||
var option = this.option;
|
||
var process = option.percent;//从0到刻度：option.process; 立即到刻度：option.percent;
|
||
|
||
if (option.percent > 100 || option.percent < 0) {
|
||
clearInterval(this.interVal);
|
||
alert("Percentage out of range,The correct range of 1 - 100");
|
||
throw new Error("Percentage out of range,The correct range of 1 - 100");
|
||
}
|
||
|
||
if (process >= option.percent) {
|
||
process = option.percent;
|
||
clearInterval(this.interVal);
|
||
}
|
||
this._clear();
|
||
// 设置背景圆是否显示
|
||
if (option.backgroundCircle.show) {
|
||
this._backgroundCircle();
|
||
}
|
||
// 设置梯度是否显示
|
||
if (option.percentCircle.show) {
|
||
this._percentCircle(process);
|
||
}
|
||
// 设置起始圆点是否显示
|
||
if (option.startSmallCircle.show) {
|
||
this._smallCircle(option.startSmallCircle.radius, option.startSmallCircle.color, 0);
|
||
}
|
||
// 设置截止圆点是否显示
|
||
if (option.endSmallCircle.show) {
|
||
this._smallCircle(option.endSmallCircle.borderRadius, option.endSmallCircle.borderColor, process);
|
||
this._smallCircle(option.endSmallCircle.radius, option.endSmallCircle.color, process);
|
||
}
|
||
// 设置文字是否显示
|
||
if (option.processText.show) {
|
||
this._showProcess(process);
|
||
}
|
||
this._speed(option.percentCircle.speed);
|
||
},
|
||
/**
|
||
* 清除上一次画板
|
||
* @private
|
||
*/
|
||
_clear: function () {
|
||
var option = this.option;
|
||
this.context.clearRect(0, 0, option.backgroundCircle.roundX * 2, option.backgroundCircle.roundY * 2);
|
||
},
|
||
/**
|
||
* 背景圆环
|
||
* @private
|
||
*/
|
||
_backgroundCircle: function () {
|
||
var option = this.option;
|
||
// 设置线宽
|
||
this.context.lineWidth = option.lineWidth;
|
||
this.context.beginPath();
|
||
// 绘制圆环
|
||
this.context.arc(option.backgroundCircle.roundX,
|
||
option.backgroundCircle.roundY,
|
||
option.radius,
|
||
option.backgroundCircle.startAngle,
|
||
option.backgroundCircle.endAngle
|
||
);
|
||
this.context.strokeStyle = option.backgroundCircle.color;
|
||
this.context.stroke();
|
||
this.context.closePath();
|
||
},
|
||
/**
|
||
* 前置圆环
|
||
*
|
||
* @param {int|float} process
|
||
* @private
|
||
*/
|
||
_percentCircle: function (process) {
|
||
var option = this.option;
|
||
this.context.beginPath();
|
||
this.context.lineWidth = option.lineWidth;
|
||
|
||
this.context.arc(option.backgroundCircle.roundX,
|
||
option.backgroundCircle.roundY,
|
||
option.radius,
|
||
option.backgroundCircle.startAngle,
|
||
option.backgroundCircle.startAngle + process / 100 * option.cMultiple, // Math.PI * 180 / 180 * 2
|
||
false
|
||
);
|
||
if (option.percentCircle.gradientColorShow) {
|
||
this.context.strokeStyle = this._linearGradient();
|
||
} else {
|
||
this.context.strokeStyle = option.percentCircle.color;
|
||
}
|
||
this.context.lineCap = 'round';
|
||
this.context.stroke();
|
||
this.context.closePath();
|
||
},
|
||
/**
|
||
* 梯度颜色
|
||
*
|
||
* @returns {CanvasGradient}
|
||
* @private
|
||
*/
|
||
_linearGradient: function () {
|
||
var option = this.option;
|
||
// createLinearGradient x起点, y起点, x终点, y终点
|
||
var xStart = option.backgroundCircle.roundX - option.radius - this.option.lineWidth;
|
||
var xEnd = option.backgroundCircle.roundX + option.radius + this.option.lineWidth;
|
||
var yStart = option.backgroundCircle.roundY;
|
||
var yEnd = option.backgroundCircle.roundY;
|
||
|
||
var linGrad = this.context.createLinearGradient(xStart, yStart, xEnd, yEnd);
|
||
|
||
linGrad.addColorStop(0.0, 'rgba(255,0,0,0.1)');
|
||
linGrad.addColorStop(0.2, 'rgba(255,0,0,0.3)');
|
||
linGrad.addColorStop(0.4, 'rgba(255,0,0,0.5)');
|
||
linGrad.addColorStop(0.6, 'rgba(255,0,0,0.7)');
|
||
linGrad.addColorStop(0.8, 'rgba(255,0,0,0.9)');
|
||
linGrad.addColorStop(1.0, 'rgba(255,0,0,1)');
|
||
|
||
return linGrad;
|
||
},
|
||
|
||
/**
|
||
* 开始|结束圆点
|
||
* @param {int|float} radius
|
||
* @param {int|float} process
|
||
* @param {string} color
|
||
* @private
|
||
*/
|
||
_smallCircle: function (radius, color, process) {
|
||
var option = this.option;
|
||
var cx = Math.cos(2 * Math.PI / 360 * (option.angle + process * option.sMultiple / 100)) * option.radius + option.backgroundCircle.roundX;
|
||
var cy = Math.sin(2 * Math.PI / 360 * (option.angle + process * option.sMultiple / 100)) * option.radius + option.backgroundCircle.roundY;
|
||
this.context.beginPath();
|
||
this.context.arc(cx, cy, radius, 0, Math.PI * 2);
|
||
this.context.lineWidth = 1;
|
||
this.context.fillStyle = color;
|
||
this.context.fill();
|
||
},
|
||
/**
|
||
* 显示文字进度
|
||
* @param {int} process
|
||
* @private
|
||
*/
|
||
_showProcess: function (process) {
|
||
var decimal = 0;
|
||
var option = this.option;
|
||
var num = option.percent.toString();
|
||
// 如果当前数字是小数，那么需要保留小数 最大两位
|
||
if (/\./.test(num) && num.split(".")[1].length > 0) {
|
||
decimal = num.split(".")[1].length < 2 ? 1 : 2;
|
||
}
|
||
this.context.font = option.processText.fontSize + 'px April';
|
||
this.context.textAlign = option.processText.textAlign;
|
||
this.context.textBaseline = option.processText.textBaseline;
|
||
this.context.fillStyle = option.processText.color;
|
||
this.context.fillText(parseFloat(process).toFixed(decimal) + '%', option.backgroundCircle.roundX, option.backgroundCircle.roundY);
|
||
},
|
||
_showProcessFollow: function () {
|
||
|
||
},
|
||
/**
|
||
* 梯度速度
|
||
*
|
||
* @param mode
|
||
* @private
|
||
*/
|
||
_speed: function (mode) {
|
||
var option = this.option;
|
||
if (mode === "gradient") {
|
||
if (option.process / option.percent > 0.90) {
|
||
option.process += 0.30;
|
||
} else if (option.process / option.percent > 0.80) {
|
||
this.option.process += 0.55;
|
||
} else if (option.process / option.percent > 0.70) {
|
||
option.process += 0.75;
|
||
} else {
|
||
option.process += 1.0;
|
||
}
|
||
} else if (mode === "normal") {
|
||
option.process += 1.0;
|
||
} else if (mode === "fast") {
|
||
option.process += 2.5;
|
||
}
|
||
|
||
},
|
||
/**
|
||
* 初始化时获取canvas对象参数
|
||
*
|
||
* @param {object} selector
|
||
* @private
|
||
*/
|
||
_getCanvasOption: function (selector) {
|
||
this._extend(this.option, {
|
||
"backgroundCircle": {
|
||
"roundX": selector.width / 2,
|
||
"roundY": selector.height / 2,
|
||
"startAngle": Math.PI / 180 * 180,
|
||
"endAngle": Math.PI / 180 * 180 * 2
|
||
}
|
||
});
|
||
},
|
||
/**
|
||
* 合并对象
|
||
*
|
||
* @param {object} o
|
||
* @param {object} n
|
||
* @private
|
||
*/
|
||
_extend: function (o, n) {
|
||
for (var p in n) {
|
||
if (typeof n[p] === "object") {
|
||
this._extend(o[p], n[p]);
|
||
} else if (n.hasOwnProperty(p) && (!o.hasOwnProperty(p))) {
|
||
o[p] = n[p];
|
||
} else if (n.hasOwnProperty(p) && o.hasOwnProperty(p)) {
|
||
o[p] = n[p];
|
||
}
|
||
}
|
||
},
|
||
/**
|
||
*
|
||
* @returns {*}
|
||
* @private
|
||
*/
|
||
_getOption: function () {
|
||
var option = this.option;
|
||
option.angle = 180;
|
||
option.cMultiple = option.backgroundCircle.startAngle;
|
||
option.sMultiple = 180;
|
||
if (option.size === "complete") {
|
||
option.angle = 120;
|
||
option.cMultiple = option.backgroundCircle.startAngle * 2;
|
||
option.sMultiple = 360;
|
||
this._extend(this.option, {
|
||
"backgroundCircle": {
|
||
"startAngle": Math.PI / 180 * 120,
|
||
"endAngle": Math.PI / 180 * 120 * 4
|
||
}
|
||
});
|
||
} else if (option.size === "incomplete") {
|
||
option.angle = 120;
|
||
option.cMultiple = Math.PI * 5 / 3;
|
||
option.sMultiple = 300;
|
||
|
||
this._extend(this.option, {
|
||
"backgroundCircle": {
|
||
"startAngle": Math.PI / 180 * 120,
|
||
"endAngle": Math.PI / 180 * 420
|
||
}
|
||
});
|
||
}
|
||
},
|
||
_setOption: function (option) {
|
||
this._extend(this.option, option);
|
||
},
|
||
/**
|
||
* 初始参数配置
|
||
*
|
||
* @returns {{size: string, lineWidth: number, radius: number, position: string, percent: number, process: number, backgroundCircle: {show: boolean, color: string, roundX: number, roundY: number, startAngle: number, endAngle: number}, percentCircle: {show: boolean, color: string, speed: string}, startSmallCircle: {show: boolean, color: string, radius: number}, endSmallCircle: {show: boolean, color: string, radius: number}, gradient: {color: string}, processText: {show: boolean, fontSize: number, color: string, follow: boolean, textAlign: string, textBaseline: string}}}
|
||
* @private
|
||
*/
|
||
_option: function () {
|
||
return {
|
||
"size": "half", //complete,half,incomplete or todo-percent
|
||
"lineWidth": 5,
|
||
"radius": 100,
|
||
"percent": 80,
|
||
"process": 0.00,
|
||
"backgroundCircle": {
|
||
"show": true,
|
||
"color": "#eee",
|
||
"roundX": 0,
|
||
"roundY": 0,
|
||
"startAngle": 0,
|
||
"endAngle": 0
|
||
},
|
||
"percentCircle": {
|
||
"show": true,
|
||
"color": "#f00",
|
||
"speed": "gradient",//gradient normal fast
|
||
"gradientColorShow": false,
|
||
"gradientColor": "rgba(255.0.0,0.1)"
|
||
},
|
||
"startSmallCircle": {
|
||
"show": false,
|
||
"color": "#06a8f3",
|
||
"radius": 5
|
||
},
|
||
"endSmallCircle": {
|
||
"show": false,
|
||
"color": "#00f8bb",
|
||
"radius": 5
|
||
},
|
||
"gradient": {
|
||
"color": "rgba(255,0,0,0.1)",// todo 梯度颜色
|
||
"size": 4
|
||
},
|
||
"processText": {
|
||
"show": true,
|
||
"fontSize": 20,
|
||
"color": "#ccc",
|
||
"follow": false,//todo 是否跟随渐变而改变颜色
|
||
"textAlign": "center",
|
||
"textBaseline": "alphabetic"
|
||
}
|
||
};
|
||
}
|
||
|
||
};
|
||
|
||
CircleProcess.fn.init.prototype = CircleProcess.fn;
|
||
|
||
return CircleProcess;
|
||
})();
|