index.vue
2.12 KB
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
<template>
<view>
<canvas :canvas-id="'progress'+id" :style="{width: sizeNum + 'px', height: sizeNum + 'px'}"></canvas>
<slot></slot>
</view>
</template>
<script>
export default {
props: {
id:{
type: String,
},
progressColor: { //进度颜色
type: String,
default: '#409EFF'
},
bgColor: { //轨道颜色
type: String,
default: '#F9FAFB'
},
size: { //整体大小
type: Number,
default: 100
},
strokeWidth: { //轨道宽度
type: Number,
default: 20
},
percent: { //进度百分比
type: Number,
default: 0
}
},
data(){
return{
sizeNum:this.size, //最终的整体尺寸
strokeWidthNum:this.strokeWidth, //最终的轨道宽度数值
}
},
mounted() {
this.drawProgress()
},
methods: {
drawProgress() {
//尺寸与轨道宽度自适应处理
const screenWidth = uni.getSystemInfoSync().screenWidth;
this.sizeNum=(this.size/750)*screenWidth
this.strokeWidthNum=(this.strokeWidth/750)*screenWidth
const ctx = uni.createCanvasContext(`progress${this.id}`, this)
const centerX = this.sizeNum / 2
const centerY = this.sizeNum / 2
const radius = (this.sizeNum - this.strokeWidthNum) / 2
const startAngle = -Math.PI / 2
const endAngle = startAngle + (this.percent / 100) * 2 * Math.PI
// 绘制背景圆
ctx.beginPath()
ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI)
ctx.setFillStyle('#FFFFFF')
ctx.fill()
// 绘制轨道圆环
ctx.beginPath()
ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI)
ctx.setLineWidth(this.strokeWidthNum)
ctx.setStrokeStyle(this.bgColor)
ctx.setLineCap('round')
ctx.stroke()
// 绘制进度圆环
ctx.beginPath()
ctx.arc(centerX, centerY, radius, startAngle, endAngle)
ctx.setLineWidth(this.strokeWidthNum)
ctx.setStrokeStyle(this.progressColor)
ctx.setLineCap('round')
ctx.stroke()
ctx.draw(true)
}
},
watch: {
percent() {
this.drawProgress()
}
}
}
</script>