一文搞懂Qt中的颜色渐变(QGradient Class)

一文搞懂Qt中的颜色渐变(QGradient Class)

1, 快速开始！

• Qt中与颜色渐变有关的类是QGradient
• 其中它又有三个子类：QLinearGradient、QRadialGradient、QConicalGradient分别对应三种具体的颜色渐变（后面挨个介绍）。
• 所以它们的关系是：
  
• Qt中颜色渐变是怎么用的？它作为一种填充(fill)方式使用，比如说之前我们可以用红色、绿色这些纯色填充一个矩形，现在我们可以用一个渐变颜色（更形象的称呼是色带）来填充，从而可以绘制出更有趣的控件！
• 先了解一下填充：有两个绕不开的东西——画笔（QPen）和画刷（QBrush)。下面来看一小段代码：
  
• 这里仅需要明确勾勒矩形线条时使用画笔，填充矩形内部时使用画刷。
• 因为画刷控制着填充，渐变颜色在Qt中以填充方式使用，所以需要有一种创建渐变颜色画刷的方法。QBrush有一个以QGradient为唯一参数的构造函数：

	QBrush(const QGradient &gradient)

• 所以想绘制一个有渐变效果的矩形可以这么写：
  
• 上面的例子中，我们保持画笔不变，使用QLinearGradient类型的颜色渐变创建了一个画刷。结果是一个很漂亮的线性颜色渐变，它从矩形左上角的白色过渡到矩形右下角的黑色。
• 让我们更进一步。。。

2, 颜色渐变

• 颜色渐变表示我们需要将一个渐变颜色集填充到一个区域中。
• 要获得一个渐变颜色集有一种简单的方式：Color1过渡到Color2过程中的所有颜色所构成的集合。上面的例子我们通过指定Color1为白色，Color2为黑色得到一个渐变颜色集：

    QLinearGradient linearGradient = ...
    linearGradient.setColorAt(0, Qt::white);	// Color1
    							 ^^^^^^^^^
    linearGradient.setColorAt(1, Qt::black);	// Color2
    							 ^^^^^^^^^

• 接下来的问题是当填充一个区域时我们还需要一个填充方向，比如是从上到下？从左到右？还是从点A到点B。
• 填充方向的指定方式不同产生了三种不同的颜色渐变类型：线性(QLinearGradient)，径向(QRadialGradient)和锥向(QConicalGradient)。

2。1, 线性颜色渐变(QLinearGradient Class)

• 如你所料，通过指定一个起点(start)和一个结束点(finalStop)来确定一个线性填充方向。

	//
	// QLinearGradient ctor
	QLinearGradient(qreal x1, qreal y1, qreal x2, qreal y2)
	QLinearGradient(const QPointF &start, const QPointF &finalStop)

• 上面的例子中就是以矩形的左上角(start)到矩形的右下角(finalStop)作为渐变填充方向。
• 所以如果我们想要从上到下填充一个矩形可以用下面这段代码：

   // 构造一个线性渐变(start, finalStop)
    QLinearGradient linearGradient(QPointF(0, -200), QPointF(0, 200));
    linearGradient.setColorAt(0, Qt::white);
    linearGradient.setColorAt(1, Qt::black);

	// 使用线性渐变创建一个画刷，用来填充
    QBrush brush(linearGradient);

    painter->setBrush(brush);
	
	// x, y, w, h
    painter->drawRect(-100, -200, 200, 400);
    
    //
    // axis
    QPen pen;
    pen.setColor(Qt::red);
    painter->setPen(pen);
    painter->drawLine(-20, 0, 20, 0);
    painter->drawLine(0, 20, 0, -20);

• 结果如下：
  

• 上图中左边为Qt程序的实际绘制，右边为示意。

• 需要注意的一点是，Qt程序的绘制坐标系的纵轴与数学上相反。

• 最后一点，我们在提供颜色的同时还提供了另一个参数：

	// setColorAt(qreal position, const QColor &color)
				  ~~~~~~~~~~~~~~
    linearGradient.setColorAt(0, Qt::white);
    						  ^
    linearGradient.setColorAt(1, Qt::black);
    					      ^

• 参数position的范围是[0,1]，前面已经知道start与finalStop确定出一条带方向的线段，而参数position相当于一个比例参数，它在这条线段上标定一个位置，表示在这个位置处达到后一个参数所代表的颜色值。

	达到该颜色的位置 = start + position * (finalStop - start)

• 上图是拿黑色达到的位置为例，白色到达(开始)的位置也是一样。
• 当position等于0或1时，达到颜色的位置分别位于两个端点处，所以上面两行代码的意思是：在start处为纯白，在finalStop处为纯黑。
• 这就是线性渐变的全部。
• 线性渐变用起来非常简单，但它所有的概念也都适用于后面要说的两种渐变，所以说了这么多。。。

2。2, 锥向颜色渐变(QConicalGradient Class)

• 锥向渐变几乎和线性渐变一样简单，所以把它作为第二个介绍。
• 锥向渐变通过一个中心点(center)和一个角度(angle)来确定填充方向。

	// QConicalGradient ctor
	QConicalGradient(qreal cx, qreal cy, qreal angle)
	QConicalGradient(const QPointF &center, qreal angle)

• 先看一个具体的例子：