QML进阶-球形进度条（圆形进度条）

先上图，确认一下是否是你需要的图片。

实现思路

1、利用canvas画图工具画出圆形circle1（外围的大圆）
2、画出内部的小圆区域，利用clip函数裁剪。裁剪后，只有圆内的图像才可以显示，圆外的不显示。clip裁剪的功能如果你不懂，可以[看这里](https://www.w3school.com.cn/tags/canvas_clip.asp)
3、裁剪后利用percent绑定填充区域的上边界，进行颜色填充，填充的时候，我们采用矩形填充即可，如下图，因为clip已经限定了只能在圆内显示。
4、设置一个定时器，来自动的更显percent的值。

不添加clip()图像如下:

添加clip()的图像如下：

实现代码

CircleProcBar.qml

import QtQml 2.12
import QtQuick 2.12
import QtQuick.Controls 2.12

Rectangle {
    
    
    width: 220
    height: 220

    property int percent: 0
    Canvas {
    
        
        id:canvas
        anchors.fill: parent
        onPaint: {
    
    
            var ctx = getContext("2d");

            ctx.clearRect(0, 0, width, height); // 清除一块矩形区域
            ctx.beginPath(); // 开始画图
            ctx.lineWidth =3 // 设置边线粗为3
            ctx.strokeStyle = '#148113'; // 设置颜色
            ctx.arc(width / 2, height / 2, width / 2 - 5, 0, 2*Math.PI);  // arc函数画大圆
            ctx.stroke(); // 设置大圆圈颜色

            ctx.beginPath();
            ctx.arc(width / 2, height / 2, width / 2 - 10, 0, 2*Math.PI);  // 绘制第二个小圆区域
            ctx.clip(); // 进行裁剪
            ctx.save(); // 保存当前状态，压入栈内

            ctx.beginPath();
            ctx.lineTo(0, height -10 - percent * (width - 20) / 100); // 绘制填充矩形左上角[0,height - bottomMargin - 填充高度]，圆圈距离矩形框上下左右四个边的距离都是10个像素
            ctx.lineTo(width, height -10 - percent * (height - 20) / 100); // 绘制填充矩形右上角，[width,height - bottomMargin - 填充高度]
            ctx.lineTo(width, height -10); // 绘制填充矩形左下角
            ctx.lineTo(0, height -10) // 绘制填充矩形右下角
            ctx.lineTo(0, height -10 - percent * (width - 20) / 100); // 回到起点，形成一个矩形
            ctx.fillStyle = '#148014'; 
            ctx.fill();  // 对区域进行填充
            ctx.restore(); // 回退栈
        }

    }
    Timer {
    
    
        id: runTimer
        running: false  // 定时器默认为false，不启动
        repeat: true // 循环定时器
        interval: 100 //时间间隔为 100毫秒
        onTriggered: {
    
    
            percent += 1;  // 每次percent+1
            canvas.requestPaint(); // 重新绘制
            if (percent == 100) {
    
     // 如果percent==100，则停止定时器
                running = false;
            }
        }
    }

    Text {
    
    
        width: 30
        height: 100
        anchors.centerIn: parent
        text: String("%1%").arg(percent)  // 中间显示当前的进度
        horizontalAlignment: Text.AlignHCenter
        verticalAlignment: Text.AlignVCenter
        color: "black"
        font.pixelSize: 30
    }

    MouseArea {
    
    
        anchors.fill: parent
        onClicked: {
    
    
            runTimer.running = true;  // 点击屏幕的圆圈启动定时器，根据需要，在外侧启动定时器。
        }
    }
}

有疑问欢迎评论交流。