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

最新推荐文章于 2022-05-22 16:40:56 发布

原创

最新推荐文章于 2022-05-22 16:40:56 发布 · 1.9k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#qml #canvas

本文介绍使用QML实现圆形进度条的方法，包括利用canvas绘制圆形、应用clip裁剪技术及通过矩形填充来更新进度条的状态。同时，还提供了一个完整的CircleProcBar.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