一，前言

31.paint渐变色绘图--Apple的学习笔记，已经学习过了QT渐变色。可以做些小应用了。

二，需求

做一个透明色光圈渐变扫描的动画效果。

三，遇到的问题

1. 动画效果实现方法？
   答：用timeout周期刷屏吧，否则就要用QT的动画API了。
2. 如何绘图QT透明渐变色？
   答：做的渐变色colorAt中传入QColor的第4个参数就是透明度了。255是不透明的意思。

四，代码

#include "widget.h"
#include <QPainter>
Widget::Widget(QWidget *parent)
    : QWidget(parent),m_r(5)
{
    this->setAutoFillBackground(true);
    QPalette palette = this->palette();

    palette.setBrush(QPalette::Window,QBrush(QPixmap(":/res/img/bg.png")));
    this->setPalette(palette);
    resize(QPixmap(":/res/img/bg.png").size());
    //利用定时器固定时间内刷新页面，更新扫描线半径
    m_timer = new QTimer(this);
    m_timer->setSingleShot(false);
    connect(m_timer, &QTimer::timeout, this, [=](){
        if (this->isVisible())
        {
            //半径偏移量控制
            m_r += 1;
            if (m_r > 60)
            {
                m_r = 0;
            }
            this->update();
        }
    });
    m_timer->start(50);
}

Widget::~Widget()
{
}

void Widget::paintEvent(QPaintEvent *event)
{
    Q_UNUSED(event);
    QPainter painter4(this);
    drawBackGround(painter4);//绘制底色
    QPainter painter5(this);
    drawspreadline(painter5);//绘制扫描线
    QPainter painter6(this);
    drawobstacle(painter6);//绘制扫描线
}
void Widget::drawBackGround(QPainter &painter4)
{
    const int r =60;
    painter4.setRenderHint(QPainter::Antialiasing,true);
    painter4.translate(width()/2,height()/2);
    //painter4.translate(320,320);
    //原点+半径r+焦点为0,0
    QRadialGradient Radial(0,0,r,0,0);

    Radial.setColorAt(0, QColor(255, 223, 234, 20));
    Radial.setColorAt(1, QColor(255,100,100, 150));

    painter4.setPen(Qt::transparent);
    painter4.setBrush(Radial);
    painter4.drawEllipse(QPoint(0, 0),r,r);
}
void Widget::drawspreadline(QPainter &painter5)
{
    int r =m_r;
    painter5.setRenderHint(QPainter::Antialiasing,true);
    painter5.translate(width()/2,height()/2);
    //原点+半径r+焦点为0,0
    QRadialGradient Radial(0,0,r,0,0);

    Radial.setColorAt(0, QColor(255, 0, 0, 20));
    Radial.setColorAt(0.9, QColor(255, 0, 0, 20));
    Radial.setColorAt(1, QColor(240,90,95, 200));

    painter5.setPen(Qt::transparent);
    painter5.setBrush(Radial);
    painter5.drawEllipse(QPoint(0, 0),r,r);
}
void Widget::drawobstacle(QPainter &painter6)
{
    if(m_r > 10)
    {
        painter6.setBrush(Qt::green);
        painter6.setPen(Qt::transparent);
        painter6.drawRect(QRect(width()/2+10,height()/2, 5, 5));
    }
    if(m_r > 30)
    {
        painter6.setBrush(Qt::yellow);
        painter6.setPen(Qt::transparent);
        painter6.drawRect(QRect(width()/2+21,height()/2+21, 5, 5));
    }
}

五，效果

中间的圆形光圈扫描就是我添加了效果

image.png

光圈扫描.gif

六，小结

这个好玩，我得再想想有什么应用，再做一个玩玩。主要是在周末在家没事做，哈哈~