Qt 提供了三种渐变:线性渐变(QLinearGradient)、辐射渐变(QRadialGradient)和角度渐变(QConicalGradient)。我们可以在 Qt API 手册中看到这几种渐变的区别:

    线性渐变:

    辐射渐变:QRadialGradient 示例

    角度渐变:

    具体细节可以参考文档。下面我们通过一个示例看看如何使用渐变进行填充:

      这个函数的作用是,把 position 位置的颜色设置成 color。其中,position 是一个 [0, 1] 闭区间的数字。也就是说,position 是相对于我们建立渐变对象时做的那个起始点和终止点区间的一个比例。以这个线性渐变为例,在从 (60, 50) 到 (200, 200) 的线段上,在 0.2,也就五分之一处设置成白色,在 0.6 也就是五分之三处设置成绿色,在 1.0 也就是终点处设置成黑色。创建QBrush对象时,把这个渐变对象传递进去,然后就可以运行了:

      线性渐变示例

      下面我们开始一个更复杂,也更实用一些的例子:绘制一个色轮(color wheel)。所谓色轮,其实就是一个带有颜色的圆盘(或许你没听说过这个名字,但是你肯定见过这个东西),下面是色轮的运行结果:

      我们来看看它的代码:

      1. QConicalGradient::QConicalGradient ( qreal cx, qreal cy, qreal angle )

      前两个参数 cx 和 cy 组成角度渐变的中心点,第三个参数是渐变的起始角度。在我们的例子中,我们将渐变中心点设置为 (0, 0),起始角度为 0。类似线性渐变,角度渐变的setColorAt()函数同样接受两个参数,第一个是角度比例,第二个是颜色。例如,

      将 0 度角设置为红色;

      1. conicalGradient.setColorAt(60.0/360.0, Qt::yellow);

      将 60 度角设置为黄色。由于一个圆周是 360 度,所以 60.0/360.0 即是这个角度的比例。其余代码以此类推。最后一句,我们将 1.0 处设置为红色,也就是重新回到起始处。至于颜色的分布,这是由颜色空间定义的,有兴趣的朋友可以查阅有关颜色模型的理论。

      这是我们唯一不熟悉的函数。函数意思是,将坐标系的原点设置到 (x, y) 点。原本坐标系原点位于左上角,我们使用translate(r, r),将坐标原点设置为 (r, r)。这么一来,左上角的点的坐标就应该是 (-r, -r)。

      最后,我们使用drawEllipse()函数绘制圆盘。注意,由于我们已经把坐标原点设置为 (r, r),因此,在绘制时,圆心应该是新的坐标 (0, 0),而不是原来的 (r, r)。

      1. void ColorWheel::paintEvent(QPaintEvent *)
      2. {
      3. QPainter painter(this);
      4. painter.setRenderHint(QPainter::Antialiasing);
      5.  
      6. QConicalGradient conicalGradient(r, r, 0);
      7.  
      8. conicalGradient.setColorAt(0.0, Qt::red);
      9. conicalGradient.setColorAt(60.0/360.0, Qt::yellow);
      10. conicalGradient.setColorAt(120.0/360.0, Qt::green);
      11. conicalGradient.setColorAt(180.0/360.0, Qt::cyan);
      12. conicalGradient.setColorAt(240.0/360.0, Qt::blue);
      13. conicalGradient.setColorAt(1.0, Qt::red);
      14.  
      15. QBrush brush(conicalGradient);
      16. painter.setPen(Qt::NoPen);
      17. painter.setBrush(brush);
      18. painter.drawEllipse(QPoint(r, r), r, r);
      19. }

      不仅我们需要修改最后的绘制语句,还需要注意修改定义时传入的中心点的坐标。