QML进阶-球形进度条(圆形进度条)

QML进阶-球形进度条(圆形进度条)

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

实现思路

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

实现代码

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;  // 点击屏幕的圆圈启动定时器,根据需要,在外侧启动定时器。
        }
    }
}

有疑问欢迎评论交流。

上一篇:web.xml配置文件中的async-supportedtrueasync-supported


下一篇:python小功能