Qt圆形等待界面绘制-1

一、效果图如下

二、效果图拆解
根据效果图，实际就是以控件中心为圆心，计算周边12个小圆的坐标，然后在绘制透明度逐渐增加的小圆，最后添加定时器，重新绘制小圆即可。
三、准备工作
①初始化窗口类，类继承自QDialog，设置窗口大小，去掉标题栏，任务栏，窗口置顶等，代码如下所示：

setFixedSize(150,150);
//去掉标题栏 设置置顶 去掉任务栏图标
setWindowFlags(Qt::FramelessWindowHint|Qt::Tool|Qt::WindowCloseButtonHint|Qt::WindowStaysOnTopHint);

②很重要的一点，设置窗口背景透明，如果不设置这个，窗口运行起来就是有一个白色背景，设置代码如下：

//设置窗口背景透明
setAttribute(Qt::WA_TranslucentBackground, true);

四、详细绘制过程
①重载QWidget的绘图函数paintEvent。初始化绘图的QPainter对象，启用反锯齿，将绘制中心移动到控件中心，代码如下所示：

QPainter painter(this);
//启动反锯齿
painter.setRenderHint(QPainter::Antialiasing, true);
int width=this->width();
int height=this->height();
//画笔移动到中间
painter.translate(width >> 1, height>> 1);

②计算12个小圆的位置，并且绘制小圆，代码如下所示：

//计算偏移坐标
int offsetDest=(width-30)/2;
painter.setPen(Qt::NoPen);
//计算小圆坐标
for(int i=0;i<12;++i){
    QPoint point(0,0);
    painter.setBrush(QColor(73,124,255));
    point.setX(offsetDest*qSin((i)*M_PI/6));
    point.setY(offsetDest*qCos((i)*M_PI/6));
    painter.drawEllipse(point.x()-10, point.y()-10, 20, 20);
}

此时没有加入定时器，所以图像不会动，而且没有设置小圆的透明度，所以12个小圆颜色一样，效果图如下：

③设置小圆的颜色渐变，只需要修改painter.setBrush(QColor(73,124,255));中的透明度即可，代码如下所示：

 painter.setBrush(QColor(73,124,255,255-i*30));

效果图如下所示：

④添加定时器，让小圆动起来，代码如下：

//在构造函数中启动定时器
startTimer(150);
//重写timerEvent函数，定期执行更新操作
void RingWait1::timerEvent(QTimerEvent*)
{
	++offset;
    if(offset>11)
        offset=0;
	update();
}

其中offset是int类型的，在头文件中定义，初始化为0即可。
最后在修改paintEvent函数中的for循环，代码如下所示：

for(int i=0;i<12;++i){
    QPoint point(0,0);
    painter.setBrush(QColor(73,124,255,255-i*30));
    point.setX(offsetDest*qSin((-offset+i)*M_PI/6));
    point.setY(offsetDest*qCos((-offset+i)*M_PI/6));
    painter.drawEllipse(point.x()-10, point.y()-10, 20, 20);
}

五、最后总结
①上面描述的是绘制的整个过程，源码中，可以根据自身需要设置不同的圆大小，颜色，顺时针/逆时针等，实现不同的效果。

六、代码获取
从Git下载，地址为：https://github.com/youyicc/RingWait1.git