Qt 渐变色Gradient

线性渐变 QLinearGradient
弧度渐变 QConicalGradient
辐射渐变 QRadialGradient

    QPainter painter(this);
    //线性渐变
    QLinearGradient linearGradient(0,0,150,150);
    linearGradient.setColorAt(0.2,Qt::white);
    linearGradient.setColorAt(0.6,Qt::blue);
    linearGradient.setColorAt(1.0,Qt::yellow);
    painter.setBrush(QBrush(linearGradient));
    painter.drawEllipse(0,0,200,150);
    //保存当前的painter 放到堆中 save()函数必须有对应的restore()函数
    //restore()函数 恢复painter的状态(从堆中取出来)
    painter.save();

这里写图片描述

    painter.translate(200,0);   //以原坐标的(200,0)为新的坐标系坐标原点(0,0)
    const int r = 100;
    painter.setRenderHint(QPainter::Antialiasing,true);
    //弧度渐变
    //弧度渐变由圆心(xc,yc)和一个角度a定义。颜色从圆心开始像表的秒针一样扩散。
    //QConicalGradient(qreal cx, qreal cy, qreal angle)  圆心在坐标原点(0,0)角度从60度开始
    QConicalGradient conicalGradient(0,0,60);
    conicalGradient.setColorAt(0.0,Qt::red);
//    conicalGradient.setColorAt(60.0/360.0,Qt::yellow);
//    conicalGradient.setColorAt(120.0/360.0,Qt::green);
//    conicalGradient.setColorAt(180.0/360.0,Qt::cyan);
//    conicalGradient.setColorAt(240.0/360.0,Qt::blue);
//    conicalGradient.setColorAt(300.0/360.0,Qt::magenta);
    conicalGradient.setColorAt(1.0,Qt::yellow);

    //translate(r,r)  以原坐标的(r,r)为新的坐标系坐标原点(0,0)cx,cy  即相对于窗口(300,100)
    painter.translate(r,r);
    //QBrush brush(brush Style);
    QBrush brush(conicalGradient);
    painter.setPen(Qt::NoPen);
    painter.setBrush(brush);
    painter.drawEllipse(QPoint(0,0),r,r);
    painter.save();

这里写图片描述
这里写图片描述

//辐射渐变
    //圆心(0,0)cx,cy 角度0 radius 焦点(30,30)fx,fy开始向外扩散
    painter.translate(0,200);
    QRadialGradient radialGradient(0,0,100,50,50);
    radialGradient.setColorAt(0,Qt::green);
    radialGradient.setColorAt(0.8,Qt::red);
    painter.translate(r,r);
    painter.setBrush(QBrush(radialGradient));
    painter.drawEllipse(QPoint(0,0),r,r);
    painter.save();

    //辐射渐变
    //QRadialGradient radialGradient(310,110,100,330,130);
    ////创建了一个QRadialGradient对象实例,参数分别为中心坐标,半径长度和焦点坐标,如果需要对称那么中心坐标和焦点坐标要一致
    //radialGradient.setColorAt(0,Qt::green);
    ////radialGradient.setColorAt(0.2,Qt::white);
    //radialGradient.setColorAt(0.4,Qt::blue);
    ////radialGradient.setColorAt(0.6,Qt::red);
    //radialGradient.setColorAt(1.0,Qt::yellow);
    //painter.setBrush(QBrush(radialGradient));
    //painter.drawEllipse(210,10,200,200);//在相应的坐标画出来
    painter.restore();

这里写图片描述
这里写图片描述

### 创建渐变色动画 为了在 Qt 中创建带有渐变色效果的动画,可以结合 `QPropertyAnimation` 和 `QGradient` 来实现动态变化的颜色过渡。下面是一个具体的例子,展示如何通过编程方式设置并启动一个从一种颜色平滑过渡到另一种颜色的动画。 #### 实现方案 定义一个新的类继承自 QPushButton 并重写 paintEvent 函数,在其中绘制具有线性或径向渐变背景的按钮。接着利用 QPropertyAnimation 对象改变该控件的一个属性值(比如这里的 color),从而触发重新绘制事件达到视觉上的色彩变换效果[^4]。 ```cpp // mainwindow.h 文件中的声明部分增加如下代码片段 private slots: void animateGradient(); protected: virtual void paintEvent(QPaintEvent *event); private: QColor m_startColor; QColor m_endColor; double m_ratio; public: explicit MainWindow(QWidget *parent = nullptr); }; class GradientButton : public QPushButton { Q_OBJECT signals: public: explicit GradientButton(const QString &text, QWidget *parent = nullptr); protected: void paintEvent(QPaintEvent *) override; private: QColor currentColor() const; }; ``` ```cpp // mainwindow.cpp 的具体实现细节 #include "mainwindow.h" #include <QVBoxLayout> #include <QPropertyAnimation> MainWindow::MainWindow(QWidget *parent) : QMainWindow(parent), ui(new Ui::MainWindowClass()) { // 初始化 UI 组件... auto layout = new QVBoxLayout(this); setLayout(layout); for (int i = 0; i < 8; ++i) { auto button = new GradientButton(tr("按钮 %1").arg(i)); connect(button, SIGNAL(clicked()), this, SLOT(animateGradient())); layout->addWidget(button); } } void MainWindow::animateGradient(){ QObject* senderObj = sender(); if(auto* btn = qobject_cast<GradientButton*>(senderObj)){ QPropertyAnimation *animation = new QPropertyAnimation(btn,"ratio"); animation->setStartValue(0.0f); animation->setEndValue(1.0f); animation->setDuration(2000); // 设置持续时间为两秒 animation->start(); } } ``` 对于上述提到的 GradientButton 类,则需进一步完善其内部逻辑: ```cpp GradientButton::GradientButton(const QString& text, QWidget* parent):QPushButton(text,parent){ m_ratio=0.0; m_startColor=Qt::red; m_endColor=Qt::blue; } void GradientButton::paintEvent(QPaintEvent*) { QPainter painter(this); QRect rect=this->rect(); QLinearGradient gradient(rect.topLeft(),rect.bottomRight()); gradient.setColorAt(m_ratio,m_startColor); gradient.setColorAt((m_ratio+0.5)/2,QColor().fromRgbF( static_cast<float>(qRed(m_startColor.rgb()))/255, static_cast<float>(qGreen(m_startColor.rgb()))/255, static_cast<float>(qBlue(m_startColor.rgb()))/255,(1-(m_ratio)))); gradient.setColorAt(1-m_ratio,m_endColor); painter.fillRect(rect,gradient); painter.drawText(rect,Qt::AlignCenter,this->text()); } QColor GradientButton::currentColor()const{ return m_startColor*m_ratio+m_endColor*(1-m_ratio); } ``` 此段程序展示了怎样基于用户交互操作触发动画过程,并且每次点击都会让指定按钮经历一次完整的由红色至蓝色之间的色调转变周期。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值