Qt之图形(渐变填充)

简介: 简述QGradient 可以和 QBrush 组合使用,来指定渐变填充。Qt 目前支持三种类型的渐变填充:QLinearGradient:显示从起点到终点的渐变QRadialGradient:以圆心为中心显示渐变QConicalGradient:围绕一个中心点显示渐变渐变类型可以使用 type() 函数来检索,类型中的每一个都是 QGradient 的子

简述

QGradient 可以和 QBrush 组合使用,来指定渐变填充。

Qt 目前支持三种类型的渐变填充:

  • QLinearGradient:显示从起点到终点的渐变
  • QRadialGradient:以圆心为中心显示渐变
  • QConicalGradient:围绕一个中心点显示渐变

渐变类型可以使用 type() 函数来检索,类型中的每一个都是 QGradient 的子类。

渐变类型

QLinearGradient QRadialGradient QConicalGradient
这里写图片描述 这里写图片描述 这里写图片描述

使用 QGradientStop 类来描述渐变中过渡点的位置和颜色。例如:一个位置和一个颜色。使用 setColorAt() 函数来定义一个过渡点。或者,使用 setStops() 函数来一次定义多个过渡点。需要注意的是,后者的功能将替换当前设置的过渡点。

这是渐变的一套完整的过渡点(通过 stops() 来访问)描述渐变区域如何被填充。如果没有指定任何过渡点,那么将会从 0 点(黑色)渐变为 1 点(白色)。

QLinearGradient

QLinearGradient 显示从起点到终点的渐变。

QGradient::PadSpread QGradient::RepeatSpread QGradient::ReflectSpread
这里写图片描述 这里写图片描述 这里写图片描述
void MainWindow::paintEvent(QPaintEvent *event)
{
    Q_UNUSED(event);

    QPainter painter(this);

    // 反走样
    painter.setRenderHint(QPainter::Antialiasing, true);

    // 设置渐变色
    QLinearGradient linear(QPointF(80, 80), QPointF(150, 150));
    linear.setColorAt(0, Qt::black);
    linear.setColorAt(1, Qt::white);

    // 设置显示模式
    linear.setSpread(QGradient::PadSpread);

    // 设置画笔颜色、宽度
    painter.setPen(QPen(QColor(0, 160, 230), 2));

    // 设置画刷填充
    painter.setBrush(linear);

    // 绘制椭圆
    painter.drawRect(QRect(40, 40, 180, 180));
}

QLinearGradient 构造函数的第一个参数指定起点,第二个参数指定终点,然后显示渐变。函数setColorAt() 用于设置起点和终点之间要显示的颜色,setSpread() 可以设置起点和终点区域之外的显示模式。

QRadialGradient

QRadialGradient 类以圆心为中心显示渐变。(cx, cy) 是中点,半径(radius)是以中点为圆心的圆的半径,(fx, fy) 是渐变的起点。

QGradient::PadSpread QGradient::RepeatSpread QGradient::ReflectSpread
这里写图片描述 这里写图片描述 这里写图片描述
void MainWindow::paintEvent(QPaintEvent *event)
{
    Q_UNUSED(event);

    QPainter painter(this);

    // 反走样
    painter.setRenderHint(QPainter::Antialiasing, true);

    // 设置渐变色
    QRadialGradient radial(110, 110, 50, 130, 130);
    radial.setColorAt(0, Qt::black);
    radial.setColorAt(1, Qt::white);

    // 设置显示模式
    radial.setSpread(QGradient::ReflectSpread );

    // 设置画笔颜色、宽度
    painter.setPen(QPen(QColor(0, 160, 230), 2));

    // 设置画刷填充
    painter.setBrush(radial);

    // 绘制椭圆
    painter.drawRect(QRect(40, 40, 180, 180));
}

QRadialGradient 构造函数的第一个参数和第二个参数是 (cx, cy) 坐标,第三个参数是半径,第四个和第五个参数是 (fx, fy) 坐标。

QConicalGradient

QConicalGradient 在 (cx, cy) 坐标上以角度 (angle) 为中心显示渐变。

这里写图片描述

void MainWindow::paintEvent(QPaintEvent *event)
{
    Q_UNUSED(event);

    QPainter painter(this);

    // 反走样
    painter.setRenderHint(QPainter::Antialiasing, true);

    // 设置渐变色
    QConicalGradient conical(110, 110, 45);
    conical.setColorAt(0, Qt::black);
    conical.setColorAt(1, Qt::white);

    // 设置画笔颜色、宽度
    painter.setPen(QPen(QColor(0, 160, 230), 2));

    // 设置画刷填充
    painter.setBrush(conical);

    // 绘制椭圆
    painter.drawRect(QRect(40, 40, 180, 180));
}
目录
相关文章
|
5月前
|
存储
QT图形视图框架绘制曲线图和Smith图
QT图形视图框架绘制曲线图和Smith图
95 0
|
5月前
|
数据可视化 图形学 开发者
【Qt 底层机制之图形渲染引擎】深入理解 Qt 的 渲染机制:从基础渲染到高级图形
【Qt 底层机制之图形渲染引擎】深入理解 Qt 的 渲染机制:从基础渲染到高级图形
876 4
|
2月前
|
XML Linux C++
【Qt】图形化和纯代码实现Hello world的比较
【Qt】图形化和纯代码实现Hello world的比较
|
11月前
|
C++
《QT从基础到进阶·二十六》绘制多个图形项(QGraphicsRectItem,QGraphicsLineItem,QGraphicsPolygonItem)
《QT从基础到进阶·二十六》绘制多个图形项(QGraphicsRectItem,QGraphicsLineItem,QGraphicsPolygonItem)
215 0
|
5月前
|
编解码 供应链 开发工具
英飞凌采用Qt图形解决方案增强Traveo T2G MCU系列,实现智能渲染技术
在竞争激烈的全球半导体市场,制造商一直在努力缩短产品上市时间。同时,他们对流畅、高分辨率图形显示器的需求也在日益增长。
|
5月前
|
数据可视化 计算机视觉
QT基础教程(图形处理)
QT基础教程(图形处理)
77 0
|
5月前
|
存储 数据可视化 测试技术
[Qt5] QGraphics图形视图框架概述(Item、Scene和View)
[Qt5] QGraphics图形视图框架概述(Item、Scene和View)
949 0
|
11月前
|
缓存
《QT从基础到进阶·二十二》QGraphicsView显示大量图形项item导致界面卡顿的解决办法
《QT从基础到进阶·二十二》QGraphicsView显示大量图形项item导致界面卡顿的解决办法
528 0
QT图形视图系统 - 使用一个项目来学习QT的图形视图框架 - 终篇
接上一篇,我们需要继续完成以下的效果; 先上个效果图:
121 0
|
图形学 容器
QT5图形视图框架
GraphicsView (图形视图)框架结构取代了之前版本中的QCanvas模块,它提 供基于图元的模型/视图编程,类似于QtlnterView的模型/视图结构,只是这里的数据是图形。
131 0