QT之GUI学习笔记(二十一)----渐变填充

渐变就是可以把几种颜色混合在一起，让它们能够自然地过渡，而不是一下子变成另一种颜色,Qt内置了渐变算法。
渐变一般是用在填充里面的，所以，渐变的设置就是在QBrush里面。

---

一 基本概念

qt提供三种渐变画刷。
线性渐变(QLinearGradient)、辐射渐变(QRadialGradient)、角度渐变(QConicalGradient)。
三种渐变形式如下所示

二 代码

1.paintedwidget.cpp中的paintEvent内容

  QPainter painter(this);

  painter.setRenderHint(QPainter::Antialiasing, true);
  QLinearGradient linearGradient(60, 50, 200, 200);
  linearGradient.setColorAt(0.2, Qt::white);
  linearGradient.setColorAt(0.6, Qt::green);
  linearGradient.setColorAt(1.0, Qt::black);
  painter.setBrush(QBrush(linearGradient));
  painter.drawEllipse(50, 50, 200, 150);

首先我们打开了反走样，然后创建一个QLinearGradient对象实例。
2.运行结果

三 代码解析

1.QLinearGradient
(1)函数签名:

QLinearGradient::QLinearGradient(const QPointF &start, const QPointF &finalStop)

QLinearGradient::QLinearGradient(qreal x1, qreal y1, qreal x2, qreal y2)

(2)

 QLinearGradient linearGradient(60, 50, 200, 200);

QLinearGradient构造函数有四个参数，分别是x1, y1, x2, y2，即渐变的起始点和终止点。在这里，我们从(60, 50)开始渐变，到(200, 200)止。
2.setColorAt

void QGradient::setColorAt ( qreal position, const QColor & color )

它的意思是把position位置的颜色设置成color。
其中，position是一个0 - 1区间的数字。也就是说，position是相对于我们建立渐变对象时做的那个起始点和终止点区间的。
比如这个线性渐变，就是说，在从(60, 50)到(200, 200)的线段上，在0.2，也就五分之一处设置成白色，在0.6也就是五分之三处设置成绿色，在1.0也就是终点处设置成黑色。
3.传入渐变填充

  painter.setBrush(QBrush(linearGradient));

在设置brush的时候, 将linearGradient传入即可
4.绘制颜色渐变的线段
在Qpen的函数签名中,可以看出Qpen可以使用brush作为传入参数。

QPen(const QBrush &brush, qreal width, Qt::PenStyle style = Qt::SolidLine, Qt::PenCapStyle cap = Qt::SquareCap, Qt::PenJoinStyle join = Qt::BevelJoin)

修改paintedwidget.cpp中的paint代码

QPainter painter(this); 

painter.setRenderHint(QPainter::Antialiasing, true); 
QLinearGradient linearGradient(60, 50, 200, 200); 
linearGradient.setColorAt(0.2, Qt::white); 
linearGradient.setColorAt(0.6, Qt::green); 
linearGradient.setColorAt(1.0, Qt::black); 
painter.setPen(QPen(QBrush(linearGradient), 5)); 
painter.drawLine(50, 50, 200, 200); 

结果如下: