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

Qt自定义控件(9)——径向渐变QRadialGradient、圆锥渐变QConicalGradient

news 2025/7/10 10:22:16

径向渐变QRadialGradient

QRadialGradient 是 Qt 框架中用于创建径向渐变的类，它能实现从中心点向外辐射的圆形渐变效果。径向渐变常用于模拟光源、创建立体感或设计现代 UI 元素。以下是其详细介绍与使用方法：

1. 基本概念

径向渐变以 中心点、焦点 和 半径 定义，颜色从焦点向圆周边缘平滑过渡。常见应用场景包括：

  • 模拟球体光照效果
  • 创建按钮、图标等 UI 元素的立体效果
  • 设计数据可视化中的强调点

2. 构造函数

// 标准构造函数（焦点与中心重合）
QRadialGradient(const QPointF &center, qreal radius);// 带焦点的构造函数（可创建偏移光源效果）
QRadialGradient(const QPointF &center, qreal radius, const QPointF &focalPoint);// 使用坐标值的构造函数
QRadialGradient(qreal cx, qreal cy, qreal radius, qreal fx, qreal fy);
  • 参数说明：
    • center：中心点坐标（渐变的圆心）
    • radius：半径（控制渐变的范围）
    • focalPoint：焦点（颜色起始点，通常用于模拟光源位置）

3. 核心方法

设置渐变颜色
void setColorAt(qreal position, const QColor &color);
  • position：范围 [0.0, 1.0]，表示从焦点（0.0）到圆周边缘（1.0）的位置
  • color：对应位置的颜色
设置渐变模式

控制超出半径范围的区域如何填充：

void setSpread(QGradient::Spread spread);
  • QGradient::PadSpread（默认）：超出部分用边缘颜色填充
  • QGradient::RepeatSpread：重复渐变图案
  • QGradient::ReflectSpread：镜像反射渐变图案
设置焦点位置
void setFocalPoint(const QPointF &focalPoint);
void setFocalPoint(qreal fx, qreal fy);

焦点决定了颜色的起始位置，常用于模拟光源偏移效果。

4. 使用示例

示例 1：标准径向渐变（焦点与中心重合）
QPainter painter(this);// 创建径向渐变（中心点(150,150)，半径100）
QRadialGradient gradient(150, 150, 100);
gradient.setColorAt(0.0, Qt::white);  // 中心点白色
gradient.setColorAt(1.0, Qt::blue);   // 边缘蓝色// 应用渐变到画刷
QBrush brush(gradient);
painter.setBrush(brush);// 绘制填充椭圆
painter.drawEllipse(50, 50, 200, 200);
示例 2：带焦点偏移的径向渐变（模拟光照）
// 创建偏移焦点的径向渐变
QRadialGradient gradient(150, 150, 100, 100, 100);  // 焦点位于(100,100)
gradient.setColorAt(0.0, Qt::white);  // 焦点处白色（模拟光源）
gradient.setColorAt(1.0, Qt::darkBlue);painter.setBrush(QBrush(gradient));
painter.drawEllipse(50, 50, 200, 200);  // 绘制球体效果
示例 3：多色径向渐变
QRadialGradient gradient(150, 350, 100);
gradient.setColorAt(0.0, Qt::red);
gradient.setColorAt(0.5, Qt::yellow);
gradient.setColorAt(1.0, Qt::green);painter.setBrush(QBrush(gradient));
painter.drawEllipse(50, 300, 200, 100);
示例 4：使用 ReflectSpread 模式
QRadialGradient gradient(150, 500, 50);
gradient.setColorAt(0.0, Qt::white);
gradient.setColorAt(1.0, Qt::black);
gradient.setSpread(QGradient::ReflectSpread);  // 镜像反射模式painter.setBrush(QBrush(gradient));
painter.drawRect(50, 450, 200, 100);  // 在矩形中应用渐变

5. 高级技巧

技巧 1：创建透明渐变（用于叠加效果）
QRadialGradient gradient(150, 150, 100);
gradient.setColorAt(0.0, QColor(255, 255, 255, 150));  // 半透明白色
gradient.setColorAt(1.0, QColor(255, 255, 255, 0));    // 完全透明painter.setBrush(QBrush(gradient));
painter.drawEllipse(50, 50, 200, 200);  // 创建光晕效果
技巧 2：与 QPainterPath 结合绘制复杂形状
QPainterPath path;
path.addRoundedRect(50, 300, 200, 100, 20, 20);QRadialGradient gradient(150, 350, 150);  // 半径大于矩形尺寸
gradient.setColorAt(0.0, Qt::cyan);
gradient.setColorAt(1.0, Qt::darkCyan);painter.setBrush(QBrush(gradient));
painter.drawPath(path);  // 圆角矩形应用径向渐变

6. 性能注意事项

  1. 避免过大半径：大范围的径向渐变会增加渲染开销
  2. 缓存频繁使用的渐变：对于固定的渐变效果，可预先创建并复用
  3. 谨慎使用透明度：半透明渐变需要额外的合成计算

7. 应用场景

  • UI设计：按钮、图标、滑块的高光效果
  • 游戏开发：模拟光源、爆炸特效
  • 数据可视化：强调重要数据点
  • 艺术创作：绘制球体、光晕等效果

通过 QRadialGradient，你可以轻松创建出具有深度感和立体感的视觉效果，为应用界面增添专业度和现代感。

圆锥渐变QConicalGradient

QConicalGradient 是 Qt 框架中用于创建圆锥渐变的类，它能实现围绕中心点旋转的环形渐变效果。圆锥渐变常用于创建仪表盘、加载指示器、色彩轮或需要360度颜色过渡的场景。以下是其详细介绍与使用方法：

1. 基本概念

圆锥渐变以 中心点 和 起始角度 为基准，颜色沿顺时针方向围绕中心点旋转分布。与线性渐变（直线过渡）和径向渐变（从中心向外辐射）不同，圆锥渐变的颜色变化是 环形的。

2. 构造函数

// 标准构造函数
QConicalGradient(const QPointF &center, qreal startAngle);// 使用坐标值的构造函数
QConicalGradient(qreal cx, qreal cy, qreal startAngle);
  • 参数说明：
    • center：中心点坐标（渐变的旋转中心）
    • startAngle：起始角度（单位：度），0度指向3点钟方向，正值表示逆时针旋转

3. 核心方法

设置渐变颜色
void setColorAt(qreal position, const QColor &color);
  • position：范围 [0.0, 1.0]，表示从起始角度开始的顺时针位置（0.0对应起始角度，1.0对应绕一圈后回到起始角度）
  • color：对应位置的颜色
设置渐变环绕模式

圆锥渐变不支持 Spread 模式，因为颜色会自然环绕一周。

调整起始角度
void setAngle(qreal angle);  // 重新设置起始角度

4. 使用示例

示例 1：基本色彩轮（彩虹色）
QPainter painter(this);// 创建圆锥渐变（中心点(150,150)，起始角度0度）
QConicalGradient gradient(150, 150, 0);// 设置彩虹色
gradient.setColorAt(0.0, Qt::red);
gradient.setColorAt(1.0/6.0, Qt::yellow);
gradient.setColorAt(2.0/6.0, Qt::green);
gradient.setColorAt(3.0/6.0, Qt::cyan);
gradient.setColorAt(4.0/6.0, Qt::blue);
gradient.setColorAt(5.0/6.0, Qt::magenta);
gradient.setColorAt(1.0, Qt::red);  // 闭合色彩环// 应用渐变到画刷
QBrush brush(gradient);
painter.setBrush(brush);// 绘制填充圆形
painter.drawEllipse(50, 50, 200, 200);
示例 2：双色渐变（创建加载指示器）
// 创建圆锥渐变（中心点(150,350)，起始角度90度）
QConicalGradient gradient(150, 350, 90);
gradient.setColorAt(0.0, Qt::black);
gradient.setColorAt(0.5, Qt::white);
gradient.setColorAt(1.0, Qt::black);painter.setBrush(QBrush(gradient));
painter.drawEllipse(50, 300, 200, 200);
示例 3：透明度渐变（创建旋转光晕）
// 创建半透明到不透明的圆锥渐变
QConicalGradient gradient(150, 550, 0);
gradient.setColorAt(0.0, QColor(0, 0, 0, 0));      // 完全透明
gradient.setColorAt(0.25, QColor(255, 255, 255, 255));  // 完全不透明
gradient.setColorAt(0.5, QColor(0, 0, 0, 0));      // 完全透明
gradient.setColorAt(0.75, QColor(255, 255, 255, 255));  // 完全不透明
gradient.setColorAt(1.0, QColor(0, 0, 0, 0));      // 完全透明painter.setBrush(QBrush(gradient));
painter.drawEllipse(50, 500, 200, 200);

5. 高级技巧

技巧 1：动态更新起始角度（创建旋转效果）

在动画中不断调整起始角度，可实现旋转效果：

// 在定时器事件中更新起始角度
void MyWidget::timerEvent(QTimerEvent *event) {static qreal angle = 0;angle += 5;  // 每次增加5度if (angle >= 360) angle -= 360;QConicalGradient gradient(150, 150, angle);// 设置渐变颜色...update();  // 触发重绘
}
技巧 2：与 QPainterPath 结合绘制不规则形状
QPainterPath path;
path.moveTo(150, 50);
path.lineTo(250, 200);
path.lineTo(150, 350);
path.lineTo(50, 200);
path.closeSubpath();QConicalGradient gradient(150, 200, 0);
gradient.setColorAt(0.0, Qt::red);
gradient.setColorAt(0.5, Qt::blue);
gradient.setColorAt(1.0, Qt::red);painter.setBrush(QBrush(gradient));
painter.drawPath(path);  // 在菱形中应用圆锥渐变

6. 性能注意事项

  1. 避免过度复杂的颜色分布：过多的颜色停止点会增加渲染负担
  2. 缓存频繁使用的渐变：对于固定的圆锥渐变，可预先创建并复用
  3. 谨慎使用透明度：半透明渐变需要额外的合成计算

7. 应用场景

  • UI设计：色彩选择器、音量控制旋钮、加载指示器
  • 游戏开发：角色状态光环、技能冷却指示器
  • 数据可视化：方向传感器数据展示、环形图表
  • 艺术创作：创建抽象图案、视觉特效

通过 QConicalGradient，你可以轻松实现各种环形渐变效果，为应用界面增添动感和专业性。

http://www.dtcms.com/a/270597.html

相关文章：

  • 华为OD机试_2025 B卷_观看文艺汇演问题（Python，100分）（附详细解题思路）
  • Amazon S3 对象存储服务深度解析：存储原理、应用场景与实战指南
  • Hexo + Butterfly + Vercel 完整个人Blog部署指南
  • 量子化学计算GPU化：ORCA与Gaussian的CUDA加速对比（电子积分计算中的Warpshuffle指令实战应用）
  • 如何给网页增加滚动到顶部的功能
  • 【具身智能】本地实时语音识别kaldi在正点原子RK3588上部署
  • Python标准库：时间与随机数全解析
  • python 异步编程事件循环的共享问题
  • 达梦：指定数据文件还原的路径
  • 【Linux | 网络】socket编程 - 使用TCP实现服务端向客户端提供简单的服务
  • Ragas的Prompt Object
  • 大数据在UI前端的应用深化：用户行为模式的挖掘与预测性分析
  • 网络信息安全学习笔记1----------网络信息安全概述
  • 2025年新材料与清洁能源国际会议（IACNMCE 2025）
  • 计算机网络实验——访问H3C网络设备
  • 题解：P13017 [GESP202506 七级] 线图
  • 【机器学习】BeamSearch算法
  • BEV感知2
  • python学习打卡：DAY 24 元组和OS模块
  • 5202年安装TensorFlow纪实
  • 【LeetCode207.课程表】以及变式
  • 暑假算法日记第五天
  • [2025CVPR]Mr. DETR：检测Transformer的多路由指导训练解析
  • Mysql组合索引的update在多种情况下的间隙锁的范围(简单来说)
  • 141-CEEMDAN-VMD-Transformer-BiLSTM-ABKDE多变量区间预测模型！
  • [数学基础] 矩阵的秩及其应用
  • El-Select组件实现模糊查询与失焦赋值
  • 第6章应用题
  • 学术绘图（各种神经网络）
  • 5.注册中心横向对比：Nacos vs Eureka vs Consul —— 深度解析与科学选型指南