Qt自定义控件7:圆圈加载进度条

Qt自定义控件7:圆圈加载进度条

先看效果图：

思路：画一个占270度的圆弧，然后定义一个定时器，定时旋转坐标系，实现旋转的效果。圆弧需要使用渐变色，实现颜色越来越浅的效果

关键代码：CMProcessBar1.cpp

CMProcessBar1::CMProcessBar1(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::CMProcessBar1)
{
     
    ui->setupUi(this);
    QTimer *timer = new QTimer;
    connect(timer,QTimer::timeout,this,updaterRotation);// 定时旋转坐标系
    timer->start(3);//定时3毫秒
}

CMProcessBar1::~CMProcessBar1()
{
     
    delete ui;
}

void CMProcessBar1::updaterRotation(){
      //循环360度旋转坐标系
    rotation++;
    if(rotation == 360){
     
        rotation = 0;
    }
    update();
}

void CMProcessBar1::paintEvent(QPaintEvent *event){
     //根据QPaintPath画出渐变色的圆弧
    int width = this->width();
    int height = this->height();
    int side = qMin(width, height);

    QPainter painter(this);
    painter.setRenderHints(QPainter::Antialiasing | QPainter::TextAntialiasing);
    painter.translate(width / 2, height / 2);
    painter.scale(side / 200.0, side / 200.0);

    QConicalGradient gra(QPoint(0,0),0);
    gra.setColorAt(0,QColor("#3BB6FE"));
    gra.setColorAt(1,QColor("#FFFFFF"));
    QBrush brush(gra);

    int radis = 40;
    int sider = 5;
    QRect rect(-radis,-radis,radis*2,radis*2);
    QPainterPath path;
    path.arcTo(rect,0, 270);

    QPainterPath subPath;
    subPath.addEllipse(rect.adjusted(sider, sider, -sider, -sider));

    path = path-subPath;
    painter.setBrush(brush);//QColor("#66CFFF")
    painter.setPen(Qt::NoPen);
    painter.rotate(rotation);
    painter.drawPath(path);


}