Qt 渐变（四） 径向渐变的使用

---

前言

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

光照效果：当照射在有光泽的物体上时出现在这个物体上的明亮的光斑。

---

一、径向渐变实现光照效果

光照效果很重要，可以提供对一个物体形状的强烈视觉感受。

1.1 焦点在圆内部，简单径向渐变

纯黑色背景	焦点在内部中心位置

代码如下（示例）：

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

    //     纯黑色背景
    painter.setPen(Qt::NoPen);
    painter.setBrush(Qt::black);
    painter.drawRect(0,0,width(),height());

    QRadialGradient g;

    // 焦点在内部中心位置
    g = QRadialGradient(centerX,centerY ,radial,centerX,centerY ,radial*0.5);
    g.setColorAt(0,QColor(0,245,50,255*0));
    g.setColorAt(0.2,QColor(0,245,50,255*0));
    g.setColorAt(0.21,QColor(0,245,50,255*0.1));
    g.setColorAt(0.6,QColor(0,245,50,255*1));
    g.setColorAt(0.8,QColor(0,245,50,255*0.8));
    g.setColorAt(0.99,QColor(0,245,50,255*0.99));
    g.setColorAt(1,QColor(0,245,50,255*0));
    painter.fillRect(0,0,width(),height(),g);
}

---

1.2 、焦点在圆外，简单径向渐变

• 图示

纯黑色背景	焦点在圆外的简单径向

• 代码如下（示例）：

    // 焦点在中心圆外部位置,简单径向
    g = QRadialGradient(centerX,centerY ,radial*0.5,0,0);

---

1.3 、焦点在圆外，扩展径向渐变

• 图示，效果就是在焦点圆与中心圆之间进行渐变工作

纯黑色背景	焦点在圆外的扩展径向

• 代码如下（构造函数多了最后一个参数：焦点圆半径，就变成了扩展径向渐变）：

    // 焦点在中心圆外部位置,扩展径向
    g = QRadialGradient(centerX,centerY,radial*0.5, 0,0, 0);

---

二、径向渐变实现球体

径向渐变类可以提供一个物体形状的强烈 视觉感受。它们最常用于创建球体的图像。照亮的球体仍然是当前 图形设计中的另一个趋势。下图演示了使用高光区如何用于绘制球体。注意对球体底部的径向渐变的实施变换的实现方式，使得圆形渐变实际上变成了一个椭圆形的渐变区域

• 图示
  

• 代码

#include "Widget.h"
#include <QPainter>
Widget::Widget(QWidget *parent)
    : QWidget(parent)
{
    resize(180,180);
    setWindowFlags(Qt::WindowCloseButtonHint);
    setWindowTitle("RG");
}

void Widget::paintEvent(QPaintEvent *)
{
    QPainter painter(this);
    painter.setRenderHints(QPainter::Antialiasing);
    int size = qMin(width(),height())-1;
    painter.setPen(Qt::NoPen);

    // 用纯蓝色填充圆
    painter.setBrush(QColor(0x0153CC));  //99,165,247
    painter.drawEllipse(0,0,size,size);

    //在顶部添加阴影
    QLinearGradient gl = QLinearGradient(0,0,0,height());
    gl.setColorAt(0,QColor(0,0,0,255*0.4));
    gl.setColorAt(1,QColor(0,0,0,255*0.0));
    painter.setBrush(gl);
    painter.drawEllipse(0,0,size,size);

    //在底部添加高光
    gl = QLinearGradient(0,0,0,height());
    gl.setColorAt(0,QColor(255,255,255,255*0));
    gl.setColorAt(1,QColor(255,255,255,255*0.4));
    painter.setBrush(gl);
    painter.drawEllipse(0,0,size,size);

    // 创建深色边缘以获得3D效果
    QRadialGradient gr = QRadialGradient(size/2,size/2,size/2);
    gr.setColorAt(0,QColor(6,76,160,127));
    gr.setColorAt(1,QColor(0,0,0,0.8*255));
    painter.setBrush(gr);
    painter.drawEllipse(0,0,size,size);

    //添加椭圆形内的底部高光
    gr = QRadialGradient(size/2.0,size*1.5,size/2.3,size/2.0,size*1.75+6);
    gr.setColorAt(0,QColor(64,142,203,255));
    gr.setColorAt(0.8,QColor(64,142,203,0));
    painter.setPen(Qt::black);
    QBrush brush = QBrush(gr);
    brush.setTransform(QTransform::fromScale(1,0.5));
    painter.setBrush(brush);
    painter.drawEllipse(0,0,size,size);

    //在左上角增加椭圆高光
    gr = QRadialGradient(size/2.0,size/2,size/1.4,size/8,size/9);
    gr.setColorAt(0,QColor(255,255,255,255*0.5));
    gr.setColorAt(0.5,QColor(64,142,203,0));
    painter.setPen(Qt::black);
    brush = QBrush(gr);
    painter.setBrush(brush);
    painter.drawEllipse(0,0,size,size);
}

总结

径向渐变分为两种：简单径向渐变 和 扩展径向渐变。用是否有焦点圆的半径参数来决定。