1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
| const x = 750;
| const y = 750;
| const r = 615;
| const lineWidth = 250;
| var lastTime = 0;
| var arc;
| Component({
| mixins: [],
| data: { percent: '0%', width: '', height: '' },
| props: {
| percent: 0,
| width: '',
| height: ''
| },
| didMount() { },
| didUpdate() {
| console.log("didUpdate");
| console.log(this.props)
| this.start();
| },
| didUnmount() { },
| methods: {
| drawBg() {
| var ctx = this.ctxbg;
| //画背景圆
| ctx.setLineWidth(lineWidth - 10);
| ctx.setLineCap('round');
| ctx.arc(x, y, r, 0, Math.PI * 2, true);
| ctx.setStrokeStyle("#EAEAEA");
| ctx.stroke();
| ctx.draw(false);
| },
| draw() {
| console.log("画图");
| var ctx = this.ctx;
| //画背景圆
| ctx.setLineWidth(lineWidth);
| ctx.setLineCap('round');
| const gx1 = x + r;
| const gy1 = y;
|
| const gx2 = x + r * Math.cos(Math.PI * 2 - arc);
| const gy2 = y + r * Math.sin(Math.PI * 2 - arc);
|
| const grd = this.ctx.createLinearGradient(gx1, gy1, gx2, gy2);
|
| // grd.addColorStop(0, '#DC51FF');
| // grd.addColorStop(1, '#6FBDFF');
| // ctx.setStrokeStyle(grd);
|
| ctx.setStrokeStyle("#0080FF");
|
| ctx.beginPath();
|
| if (arc > 0) {
| if (Math.PI * 2 == arc) {
| ctx.arc(x, y, r, 0, Math.PI * 2);
| } else {
| ctx.arc(x, y, r, 0, Math.PI * 2 - arc, true);
| }
| } else {
|
| }
| ctx.stroke();
| ctx.draw(false);
| },
| start() {
| if (new Date().getTime() - lastTime < 500)
| return;
| lastTime = new Date().getTime();
|
| console.log("start");
| //设置角度
| arc = this.props.percent * Math.PI * 2 / 100;
|
| this.setData({
| percent: this.props.percent + "%",
| width: this.props.width,
| height: this.props.height
| });
| this.ctxbg = my.createCanvasContext('canvas-bg');
| this.ctx = my.createCanvasContext('canvas');
|
| this.ctxbg.clearRect(0, 0, r * 2, r * 2)
| this.ctx.clearRect(0, 0, r * 2, r * 2)
|
|
| this.drawBg();
| this.draw();
| }
| },
|
| onInit() {
| console.log("控件初始化");
| console.log(this.props)
| // this.start();
| },
| });
|
|
