import Circle from "./Circle";
|
class PeakValueCircle extends Circle {
|
constructor(el) {
|
super(el);
|
this.startState = false;
|
this.startAngle = Math.PI * 5 / 4;
|
this.stepAngle = Math.PI * 1 / 180;
|
}
|
draw() {
|
let ctx = this.context;
|
// 绘制外轮廓
|
let radius1 = this.radius * 3 / 5;
|
this.strokeCircle(radius1, Math.PI * 37 / 36, Math.PI * 71 / 36, "#00FFFF", 6);
|
this.strokeCircle(radius1, Math.PI * 1 / 36, Math.PI * 35 / 36, "#00FFFF", 6);
|
// 绘制圆环边框
|
let radius2 = radius1 - 10;
|
this.strokeCircle(radius2, 0, Math.PI * 2, "#FEF000", 1);
|
// 设置内层的圆环
|
let angle1 = this.startAngle;
|
let angle2 = this.getAngle(angle1);
|
let angle3 = this.getAngle(angle2);
|
let angle4 = this.getAngle(angle3);
|
this.strokeCircle(radius2 - 3, angle1, angle2, "#FEF000", 6);
|
this.strokeCircle(radius2 - 3, angle3, angle4, "#FEF000", 6);
|
// 绘制内层的实心圆
|
let radius3 = radius2 - 8;
|
let grd = ctx.createLinearGradient(0, 0, 0, radius3 * 3);
|
grd.addColorStop(0, "#FDDA99");
|
grd.addColorStop(1, "#fe7a2c");
|
this.fillCircle(radius3, 0, Math.PI * 2, grd);
|
}
|
start(start) {
|
if (start) {
|
console.log('已经启动持续更新');
|
this.startState = true;
|
}
|
// 停止更新
|
if (!this.startState) {
|
return;
|
}
|
this.clear();
|
// 启动动画
|
this.startAngle = this.getAngle(this.startAngle, this.stepAngle);
|
this.draw();
|
// 持续更新函数
|
let self = this;
|
requestAnimationFrame(function () {
|
self.start();
|
});
|
}
|
stop() {
|
this.startState = false;
|
console.log('已经停止持续更新');
|
}
|
}
|
export default PeakValueCircle;
|
