当前位置：首页 > news >正文

QT：QLinearGradient、QRadialGradient、QConicalGradient

news 来源：原创 2025/9/15 16:21:20

QLinearGradient

QLinearGradient 是 Qt 框架中用于创建线性渐变的类，它允许在图形绘制中实现颜色沿着一条直线的平滑过渡效果。以下是关于 QLinearGradient 的详细介绍：
基本概念：线性渐变是指颜色从一个点（起始点）沿着一条直线逐渐变化到另一个点（结束点），在这个过程中可以设置多个颜色停止点，从而实现多种颜色的渐变过渡。
头文件包含：使用 QLinearGradient 时，需要包含相应的头文件。

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

x1、y1 是起始点的坐标，x2、y2 是结束点的坐标。例如，QLinearGradient gradient(0, 0, 100, 100); 表示从点 (0, 0) 到点 (100, 100) 的线性渐变。

设置颜色停止点

设置颜色停止点：可以使用 setColorAt() 函数来设置渐变过程中的颜色停止点。该函数接受两个参数，第一个参数是一个介于 0.0 到 1.0 之间的浮点数，表示颜色停止点在渐变直线上的位置（0.0 表示起始点，1.0 表示结束点）；第二个参数是 QColor 类型，表示在该位置的颜色。

main.cpp

#include <QApplication>
#include <QWidget>
#include <QPainter>
#include <QLinearGradient>class GradientWidget : public QWidget {
public:GradientWidget(QWidget *parent = nullptr) : QWidget(parent) {}protected:void paintEvent(QPaintEvent *event) override {Q_UNUSED(event);QPainter painter(this);// 创建一个线性渐变对象// 起始点为 (0, 0)，结束点为 (width(), 0)，表示水平方向的渐变QLinearGradient gradient(0, 0, width(), 0);// 设置渐变的颜色停止点// 在起始位置（0.0）设置颜色为红色gradient.setColorAt(0.0, Qt::red);// 在中间位置（0.5）设置颜色为绿色gradient.setColorAt(0.5, Qt::green);// 在结束位置（1.0）设置颜色为蓝色gradient.setColorAt(1.0, Qt::blue);// 设置画笔颜色为透明，这样就不会有边框painter.setPen(Qt::NoPen);// 设置画刷为渐变对象，用于填充图形painter.setBrush(gradient);// 绘制一个矩形，填充渐变颜色painter.drawRect(0, 0, width(), height());}
};int main(int argc, char *argv[]) {QApplication app(argc, argv);GradientWidget widget;widget.setWindowTitle("QLineGradient Example");widget.resize(400, 200);widget.show();return app.exec();
}

先创建了一个水平方向的线性渐变，然后设置了三个颜色停止点，接着将该渐变设置为画刷，最后使用 QPainter 绘制一个矩形，矩形将被填充为设置的线性渐变颜色。
在这里插入图片描述

QRadialGradient

QRadialGradient 是 Qt 框架中用于创建径向渐变的类。径向渐变是一种颜色从中心点开始，沿着半径方向向外辐射状过渡的渐变效果。

基本概念

径向渐变通常由一个中心点、一个焦点和一个半径来定义。中心点决定了渐变的中心位置，焦点用于控制渐变颜色的起始位置，半径则决定了渐变的范围。颜色从焦点位置开始，沿着半径方向向四周辐射，逐渐过渡到边缘的颜色。

QRadialGradient::QRadialGradient(qreal cx, qreal cy, qreal radius, qreal fx, qreal fy);

cx、cy：中心点的坐标，即渐变的中心位置。
radius：渐变的半径，决定了渐变的范围。
fx、fy：焦点的坐标，颜色从焦点位置开始渐变。

#include <QApplication>
#include <QWidget>
#include <QPainter>
#include <QRadialGradient>class RadialGradientWidget : public QWidget {
public:RadialGradientWidget(QWidget *parent = nullptr) : QWidget(parent) {}protected:void paintEvent(QPaintEvent *event) override {Q_UNUSED(event);QPainter painter(this);// 获取窗口的中心作为径向渐变的中心int centerX = width() / 2;int centerY = height() / 2;// 以窗口宽度的一半作为渐变的半径int radius = qMin(width(), height()) / 2;// 创建一个径向渐变对象// 参数分别为中心 x 坐标、中心 y 坐标、半径、焦点 x 坐标、焦点 y 坐标QRadialGradient gradient(centerX, centerY, radius, centerX, centerY);// 设置渐变的颜色停止点// 在中心位置（0.0）设置颜色为黄色gradient.setColorAt(0.0, Qt::yellow);// 在边缘位置（1.0）设置颜色为蓝色gradient.setColorAt(1.0, Qt::blue);// 设置画笔颜色为透明，这样就不会有边框painter.setPen(Qt::NoPen);// 设置画刷为渐变对象，用于填充图形painter.setBrush(gradient);// 绘制一个与窗口大小相同的圆形，填充渐变颜色painter.drawEllipse(rect());}
};int main(int argc, char *argv[]) {QApplication app(argc, argv);RadialGradientWidget widget;widget.setWindowTitle("QRadialGradient Example");widget.resize(400, 400);widget.show();return app.exec();
}

在这里插入图片描述

#include <QApplication>
#include <QWidget>
#include <QPainter>
#include <QRadialGradient>class GradientWidget : public QWidget {
public:GradientWidget(QWidget *parent = nullptr) : QWidget(parent) {}protected:void paintEvent(QPaintEvent *event) override {Q_UNUSED(event);QPainter painter(this);// 绘制 PadSpread 模式的径向渐变QRadialGradient padGradient(width() / 4, height() / 2, 50);padGradient.setColorAt(0.0, Qt::red);padGradient.setColorAt(1.0, Qt::blue);padGradient.setSpread(QGradient::PadSpread);painter.setPen(Qt::NoPen);painter.setBrush(padGradient);painter.drawRect(0, 0, width() / 3, height());// 绘制 RepeatSpread 模式的径向渐变QRadialGradient repeatGradient(width() * 2 / 4, height() / 2, 50);repeatGradient.setColorAt(0.0, Qt::red);repeatGradient.setColorAt(1.0, Qt::blue);repeatGradient.setSpread(QGradient::RepeatSpread);painter.setBrush(repeatGradient);painter.drawRect(width() / 3, 0, width() / 3, height());// 绘制 ReflectSpread 模式的径向渐变QRadialGradient reflectGradient(width() * 3 / 4, height() / 2, 50);reflectGradient.setColorAt(0.0, Qt::red);reflectGradient.setColorAt(1.0, Qt::blue);reflectGradient.setSpread(QGradient::ReflectSpread);painter.setBrush(reflectGradient);painter.drawRect(width() * 2 / 3, 0, width() / 3, height());}
};int main(int argc, char *argv[]) {QApplication app(argc, argv);GradientWidget widget;widget.setWindowTitle("QRadialGradient Spread Modes Example");widget.resize(600, 400);widget.show();return app.exec();
}

绘制不同扩展模式的径向渐变：

QGradient::PadSpread：

创建一个径向渐变对象 padGradient，设置中心点、半径和颜色停止点。
使用 setSpread(QGradient::PadSpread) 设置扩展模式为 PadSpread。
将渐变设置为画刷，绘制一个矩形，超出渐变半径的区域将使用渐变边缘的颜色填充。

QGradient::RepeatSpread：

创建一个径向渐变对象 repeatGradient，设置中心点、半径和颜色停止点。
使用 setSpread(QGradient::RepeatSpread) 设置扩展模式为 RepeatSpread。
将渐变设置为画刷，绘制一个矩形，超出渐变半径的区域将重复渐变图案进行填充。

QGradient::ReflectSpread：

创建一个径向渐变对象 reflectGradient，设置中心点、半径和颜色停止点。
使用 setSpread(QGradient::ReflectSpread) 设置扩展模式为 ReflectSpread。
将渐变设置为画刷，绘制一个矩形，超出渐变半径的区域将反射渐变图案进行填充。
在这里插入图片描述

QConicalGradient

QConicalGradient 是 Qt 库中用于创建锥形渐变的类。锥形渐变是一种颜色围绕一个中心点呈圆周方向进行渐变的效果，就像从一个中心点向外以角度的方式展开颜色变化。
关键要素
中心点：确定渐变围绕的中心位置。
起始角度：指定渐变开始的角度，以度为单位，通常 0 度代表 3 点钟方向。
颜色停止点：定义在特定角度上的颜色，这些点之间的颜色会平滑过渡。

#include <QApplication>
#include <QWidget>
#include <QPainter>
#include <QConicalGradient>class ConicalGradientWidget : public QWidget {
public:ConicalGradientWidget(QWidget *parent = nullptr) : QWidget(parent) {}protected:void paintEvent(QPaintEvent *event) override {Q_UNUSED(event);QPainter painter(this);// 获取窗口中心作为渐变的中心点int centerX = width() / 2;int centerY = height() / 2;// 创建一个锥形渐变对象，起始角度为 0 度QConicalGradient gradient(centerX, centerY, 0);// 设置颜色停止点gradient.setColorAt(0.0, Qt::red);gradient.setColorAt(0.25, Qt::green);gradient.setColorAt(0.5, Qt::blue);gradient.setColorAt(0.75, Qt::yellow);gradient.setColorAt(1.0, Qt::red); // 回到红色以形成循环// 设置画笔颜色为透明，避免绘制边框painter.setPen(Qt::NoPen);// 设置画刷为锥形渐变painter.setBrush(gradient);// 绘制一个填充锥形渐变的圆形painter.drawEllipse(10, 10, width() - 20, height() - 20);}
};int main(int argc, char *argv[]) {QApplication app(argc, argv);ConicalGradientWidget widget;widget.setWindowTitle("QConicalGradient Example");widget.resize(400, 400);widget.show();return app.exec();
}

看到一个圆形，其颜色围绕中心呈圆周方向从红色开始，依次过渡到绿色、蓝色、黄色，最后又回到红色，形成一个锥形渐变效果。
在这里插入图片描述
头文件包含：
QApplication：用于管理 Qt 应用程序的资源和事件循环。
QWidget：作为窗口的基类，用于创建一个可显示的窗口。
QPainter：负责在窗口上进行绘图操作。
QConicalGradient：用于创建锥形渐变对象。
自定义窗口类 ConicalGradientWidget：
继承自 QWidget，并重写 paintEvent 函数，在该函数中实现绘图逻辑。
paintEvent 函数：
获取中心点：通过 width() 和 height() 方法获取窗口的中心坐标。
创建 QConicalGradient 对象：指定中心点和起始角度（这里是 0 度）。
设置颜色停止点：使用 setColorAt() 方法在不同的相对位置（范围从 0.0 到 1.0）设置不同的颜色。
设置画笔和画刷：将画笔颜色设为透明，避免绘制边框；将画刷设置为锥形渐变对象。
绘制圆形：使用 drawEllipse() 方法绘制一个填充了锥形渐变的圆形。