Qt 渐变（三） 径向渐变的定义和构造函数的详解

---

前言

不同于线性渐变，径向渐变比较复杂，先从基础的部分开始。

---

一、径向渐变是什么？

径向渐变类型：如果构造函数中 无焦点圆的半径，那就是简单径向，否则就是扩展径向渐变，扩展径向中焦点圆的半径可以设置为0 。

径向渐变的说明：

• 简单的径向渐变会在焦点和围绕它的圆上的端点之间插入颜色。
• 扩展的径向渐变可在焦点圆和中心圆之间插入颜色。 由两个圆定义的圆锥外的点将是透明的。
• 一般来说，对于简单的径向渐变，将焦点调整为位于中心圆内，而在扩展的径向渐变中，焦点可以位于任何位置。
• 在范围之外，将根据当前设置的扩展方法填充，反射或重复渐变：

这是最基础的说明，看的真是云里雾里，配上图就能清晰起来。径向渐变的定义是由两个圆组成的，所以径向渐变也有圆形渐变的说法，另外翻译成辐射渐变也是挺奇怪的，知道这些名词就行。

• 绿色的圆，绿色的圆心，绿色的半径 组成了中心圆，就是径向渐变的范围圆
• 红色的圆，红色的圆心，红色的半径 组成了焦点圆
• 径向渐变就是在红圈与绿圈之间进行颜色的插值
• 黑色的部分，也就是范围圆外的部分，会受到 渐变扩展方式的影响。QGradient::setSpread（）方法可以用来设置不同的方式。
• 整个黑色的矩形，是一次绘制操作的范围 painter.fillRect(centerX-radial, centerY-radial, 2 * radial, 2 * radial, g);颜色不会延伸到该次绘制操作的范围之外。

了解了这几个概念，就能弄懂径向渐变中最复杂的扩展径向渐变的构造函数了：

QRadialGradient(const QPointF &center, qreal centerRadius, const QPointF &focalPoint, qreal focalRadius)

其他的构造函数可以认为是该函数的变体或者重载。

• QRadialGradient(const QPointF &center, qreal radius) 简单径向，焦点圆和中心圆重合
• QRadialGradient(const QPointF &center, qreal radius, const QPointF &focalPoint) 简单径向，焦点和中心点不重合，焦点圆半径为0
• 其他构造函数略过

二、示例代码

代码如下（示例）：

#include "Widget.h"

#include <QPainter>
#include <QRadialGradient>

Widget::Widget(QWidget *parent)
    : QWidget(parent)
{
//    resize(200,200);
    setWindowFlags(Qt::WindowCloseButtonHint);
}

void Widget::paintEvent(QPaintEvent *)
{
    QPainter painter(this);
    int centerX = width()/2;
    int centerY = height() / 2;
    int radial = qMin(centerX,centerY)*0.8;
    painter.setRenderHints(QPainter::Antialiasing);


    QRadialGradient g = QRadialGradient(centerX,centerY,radial,
                        centerX+radial/8,centerY+radial/8,radial/2);
    g.setColorAt(0,Qt::white);
    g.setColorAt(1,Qt::black);
    painter.fillRect(centerX-radial,centerY-radial,2*radial,2*radial,g);

    painter.setPen(Qt::green);
    painter.drawEllipse(centerX-radial,centerY-radial,2*radial,2*radial);
    painter.setBrush(Qt::green);
    painter.drawEllipse(centerX-1,centerY-1,2,2);

    painter.setBrush(Qt::NoBrush);
    painter.setPen(Qt::red);
    painter.drawEllipse(centerX+radial/8 - radial/2,centerY+radial/8- radial/2,radial,radial);
    painter.setBrush(Qt::red);
    painter.drawEllipse(centerX+radial/8-1,centerY+radial/8-1,2,2);
}

---

总结

本文仅仅简单介绍了QRadialGradient的构造函数和简单的使用。使用不同中心圆与焦点就可以实现不同的焦点效果。