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();

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

### 创建具有渐变色效果的LED指示灯控件 为了在Qt中创建一个带有渐变色效果的LED指示灯控件,可以通过继承`QWidget`类并重写其`paintEvent()`方法来实现。下面是一个详细的例子说明如何完成这一目标。 #### 1. 定义 LEDIndicator 类 首先定义一个新的类 `LEDIndicator`, 继承自 `QWidget`. 这个类将会负责处理所有的绘画逻辑. ```cpp #include <QWidget> #include <QPainter> #include <QLinearGradient> class LEDIndicator : public QWidget { Q_OBJECT public: explicit LEDIndicator(QWidget *parent = nullptr); protected: void paintEvent(QPaintEvent *) override; }; ``` #### 2. 实现 paintEvent 方法 在这个方法内部,使用 QPainter 和 QLinearGradient 来绘制带渐变色彩的效果[^1]. ```cpp void LEDIndicator::paintEvent(QPaintEvent *) { QPainter painter(this); // 设置抗锯齿以获得更平滑的结果 painter.setRenderHint(QPainter::Antialiasing, true); int width = this->width(); int height = this->height(); // 创建线性渐变对象 QLinearGradient gradient(0, 0, width, height); // 添加颜色停靠点 (可以根据需求调整这些值) gradient.setColorAt(0, QColor("#FFAAAA")); // 起始颜色较浅 gradient.setColorAt(1, QColor("#AA0000")); // 结束颜色更深一些 // 建立画笔并将渐变应用上去 painter.setBrush(gradient); // 设定轮廓线条样式 QPen pen(Qt::black, 2); painter.setPen(pen); // 开始绘制椭圆作为LED形状 QRectF rect(-width / 2, -height / 2, width, height); painter.translate(width / 2., height / 2.); painter.drawEllipse(rect); } ``` 这段代码实现了基本的LED指示灯外观设计,并通过设置不同的起始和结束颜色来展示渐变效果。对于实际项目来说,可能还需要进一步扩展此功能,例如允许外部改变颜色、大小或者其他属性等特性[^3]。 #### 3. 构造函数初始化 最后,在构造器里面做一些必要的初始化工作: ```cpp LEDIndicator::LEDIndicator(QWidget *parent): QWidget(parent){ setFixedSize(50, 50); // 默认尺寸为50x50像素 } ``` 这样就完成了整个组件的设计过程。当然这只是一个简单的版本;如果希望增加更多交互性和灵活性,则可以在上述基础上继续改进和发展。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值