4. Canvas绘制环形进度条_canvas画环形图设置最小值

1. 效果展示：

2. 实现步骤：

新建一个.qml文件，注意qml文件的首字母应该大写，否则使用时会出错。文件命名为 CircleProgress.qml，代码如下：
（代码段的各个含义请看内部的注释，比较详细…）

import QtQuick 2.15

Item {
    id:root
    width: 200
    height: 200

    property real minValue: 0 //最小值
    property real maxValue: Math.PI * 2 //最大值
    property real currentValue: 0 //当前值
    property real percent: (currentValue-minValue)/(maxValue-minValue) //百分比[0,1]

    property real endValueAngle:Math.PI/2+Math.PI*2*percent
    property real stepValue: 0.1

    property int canvasWidth:root.width < root.height ? root.width : root.height    //画布宽度
    property int progressCenter:canvasWidth/2   //绘制中心
    property int radius:canvasWidth/3           //半径

    property int mLineWidth:canvasWidth/10  //描边宽度
    property int mFontSize:mLineWidth * 2    //字体大小

    //角度变化时，让画布重新绘制
    onEndValueAngleChanged: {
        canvas.requestPaint()
    }

    property color bgColor:"#E6E6E6"    //背景框颜色
    property color valueColor:"#050505" //进度条颜色
    property int changeSpeed:30        //进度条速度
    property int warningValue:75       //警告提醒上限值
    property bool isStart:true         //是否启动进度条更新(默认启动)

    Canvas{
        id:canvas
        anchors.fill: parent

        onPaint: {
            var ctx = getContext("2d")
            ctx.lineWidth = root.mLineWidth
            ctx.strokeStyle = root.bgColor
            ctx.lineCap = "round"   //设置线端样式为圆形

            //绘制背景槽
            ctx.save()
            ctx.beginPath()
            ctx.arc(root.progressCenter,root.progressCenter,root.radius,0,Math.PI*2,false)
            ctx.stroke()
            ctx.restore()
            //绘制进度条
            ctx.save()
            ctx.strokeStyle = root.valueColor
            ctx.lineWidth = root.mLineWidth - 2
            ctx.beginPath()
            ctx.arc(root.progressCenter,root.progressCenter,root.radius,Math.PI/2,endValueAngle,false)
            ctx.stroke()
            ctx.restore()
        }
        Text{
            anchors.centerIn: parent
            font.family: "Microsoft YaHei"
            font.pixelSize: root.mFontSize
            font.bold: true
            color: Number(text.slice(0,2)) < warningValue ? "black":"red"
            text:qsTr("%1 %").arg(root.percent.toFixed(2)*100)
        }
    }
    //使用定时器更新当前数值 currrentValue
    Timer {
        id:speedTimer
        running: root.isStart
        repeat: true
        interval: changeSpeed
        onTriggered:{
            if(root.percent.toFixed(2)*100 > root.warningValue){
                root.changeSpeed = 100
            }else{
                root.changeSpeed = 30
            }
            root.currentValue += root.stepValue
            root.currentValue %= Math.PI * 2  //转换成弧度制
        }
    }
}
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

持续更新中，请大家多多关注…