Qt5 C++入门教程-第12章绘图(QPainter)

haoteby 2025-06-28 14:06 4 浏览

QPainter 类在 Qt5 中进行绘图时起着重要作用。绘图操作是通过 QPainter 类在响应 paintEvent 方法时完成的。

线条

在第一个示例中，我们在窗口的客户区绘制了一些线条。

lines.h

#pragma once

#include <QWidget>

class Lines : public QWidget {

  public:
    Lines(QWidget *parent = 0);

  protected:
    void paintEvent(QPaintEvent *event);
    void drawLines(QPainter *qp);
};

lines.cpp

#include <QPainter>
#include "lines.h"

Lines::Lines(QWidget *parent)
    : QWidget(parent)
{ }

void Lines::paintEvent(QPaintEvent *e) {
    
  Q_UNUSED(e);
  
  QPainter qp(this);
  drawLines(&qp);
}

void Lines::drawLines(QPainter *qp) {
  
  QPen pen(Qt::black, 2, Qt::SolidLine);  
  qp->setPen(pen);
  qp->drawLine(20, 40, 250, 40);

  pen.setStyle(Qt::DashLine);
  qp->setPen(pen);
  qp->drawLine(20, 80, 250, 80);

  pen.setStyle(Qt::DashDotLine);
  qp->setPen(pen);
  qp->drawLine(20, 120, 250, 120);

  pen.setStyle(Qt::DotLine);
  qp->setPen(pen);
  qp->drawLine(20, 160, 250, 160);

  pen.setStyle(Qt::DashDotDotLine);
  qp->setPen(pen);
  qp->drawLine(20, 200, 250, 200);

  QVector<qreal> dashes;
  qreal space = 4;

  dashes << 1 << space << 5 << space;

  pen.setStyle(Qt::CustomDashLine);
  pen.setDashPattern(dashes);
  
  qp->setPen(pen);
  qp->drawLine(20, 240, 250, 240);
}

我们在窗口上绘制了六条线；每条线都有不同的笔样式。

void Lines::paintEvent(QPaintEvent *e) {
    
  Q_UNUSED(e);
  
  QPainter qp(this);
  drawLines(&qp);
}

当窗口部件更新时，会调用 paintEvent。我们在这里创建 QPainter 对象并进行绘图。由于我们不使用 QPaintEvent 对象，所以使用 Q_UNUSED 宏来抑制编译器警告。实际的绘图工作委托给了 drawLines 方法。

QPen pen(Qt::black, 2, Qt::SolidLine);
qp->setPen(pen);

我们创建了一个 QPen 对象。这支笔是实心的，2 像素粗，黑色。这支笔用于绘制线条和形状的轮廓。通过 setPen 方法将笔设置到绘图对象上。

qp->drawLine(20, 40, 250, 40);

drawLine 方法绘制一条线。四个参数是窗口上两个点的坐标。

pen.setStyle(Qt::DashLine);

QPen 的 setStyle 方法设置笔的样式 —— 这里是 Qt::DashLine（虚线）。

main.cpp

#include <QApplication>
#include "lines.h"

int main(int argc, char *argv[]) {
    
  QApplication app(argc, argv);  
    
  Lines window;
  
  window.resize(280, 270);
  window.setWindowTitle("Lines");
  window.show();

  return app.exec();
}

颜色

颜色是一种表示红、绿、蓝（RGB）强度值组合的对象。有效的 RGB 值范围为 0 到 255。在下面的示例中，我们绘制了九个填充不同颜色的矩形。

colours.h

#pragma once 

#include <QWidget>

class Colours : public QWidget {
    
  public:
    Colours(QWidget *parent = 0);

  protected:
    void paintEvent(QPaintEvent *e);
    
  private:
    void doPainting();  // 执行绘图操作
};

colours.cpp

#include <QPainter>
#include "colours.h"

Colours::Colours(QWidget *parent)
    : QWidget(parent)
{ }

void Colours::paintEvent(QPaintEvent *e) {
    
  Q_UNUSED(e);  // 忽略未使用的事件对象
  
  doPainting();  // 调用绘图方法
}

void Colours::doPainting() {
    
  QPainter painter(this);  // 创建绘图对象，指定父组件为当前窗口
  painter.setPen(QColor("#d4d4d4"));  // 设置画笔颜色为浅灰色（矩形边框）

  // 绘制第一行矩形
  painter.setBrush(QBrush("#c56c00"));  // 设置画刷颜色（橙色）
  painter.drawRect(10, 15, 90, 60);      // 绘制矩形（左上角坐标、宽度、高度）

  painter.setBrush(QBrush("#1ac500"));  // 绿色
  painter.drawRect(130, 15, 90, 60);

  painter.setBrush(QBrush("#539e47"));  // 深绿色
  painter.drawRect(250, 15, 90, 60);

  // 绘制第二行矩形
  painter.setBrush(QBrush("#004fc5"));  // 蓝色
  painter.drawRect(10, 105, 90, 60);

  painter.setBrush(QBrush("#c50024"));  // 红色
  painter.drawRect(130, 105, 90, 60);

  painter.setBrush(QBrush("#9e4757"));  // 紫红色
  painter.drawRect(250, 105, 90, 60);

  // 绘制第三行矩形
  painter.setBrush(QBrush("#5f3b00"));  // 棕黄色
  painter.drawRect(10, 195, 90, 60);

  painter.setBrush(QBrush("#4c4c4c"));  // 深灰色
  painter.drawRect(130, 195, 90, 60);

  painter.setBrush(QBrush("#785f36"));  // 棕褐色
  painter.drawRect(250, 195, 90, 60);
}

我们绘制了九个填充不同颜色的矩形，矩形的轮廓为灰色。

painter.setBrush(QBrush("#c56c00"));
painter.drawRect(10, 15, 90, 60);

QBrush 类定义了 QPainter 绘制形状的填充模式。drawRect 方法用于绘制矩形，参数分别为矩形左上角的 x/y 坐标、宽度和高度。我们使用十六进制符号来指定颜色值。

main.cpp

#include <QApplication>
#include "colours.h"

int main(int argc, char *argv[]) {
    
  QApplication app(argc, argv);  // 创建应用程序对象  
    
  Colours window;  // 创建窗口对象
  
  window.resize(360, 280);  // 设置窗口大小
  window.setWindowTitle("Colours");  // 设置窗口标题
  window.show();  // 显示窗口
  
  return app.exec();  // 进入应用程序事件循环

图案填充

下面的代码示例与前一个类似，但这次我们使用 Qt 预定义的图案填充矩形。

patterns.h

#pragma once

#include <QWidget>

class Patterns : public QWidget {
    
  public:
    Patterns(QWidget *parent = 0);

  protected:
    void paintEvent(QPaintEvent *e);

  private:
    void doPainting();
};

patterns.cpp

#include <QApplication>
#include <QPainter>
#include "patterns.h"

Patterns::Patterns(QWidget *parent)
    : QWidget(parent)
{ }

void Patterns::paintEvent(QPaintEvent *e) {
    
  Q_UNUSED(e);  
  
  doPainting();
}

void Patterns::doPainting() {
    
  QPainter painter(this);
  painter.setPen(Qt::NoPen);  // 不绘制边框

  // 第一行：水平、垂直、交叉线图案
  painter.setBrush(Qt::HorPattern);  // 水平线条
  painter.drawRect(10, 15, 90, 60);

  painter.setBrush(Qt::VerPattern);  // 垂直线条
  painter.drawRect(130, 15, 90, 60);

  painter.setBrush(Qt::CrossPattern);  // 交叉线条
  painter.drawRect(250, 15, 90, 60);
  
  // 第二行：不同密度的点阵图案
  painter.setBrush(Qt::Dense7Pattern);  // 最密集的图案
  painter.drawRect(10, 105, 90, 60);

  painter.setBrush(Qt::Dense6Pattern);  // 次密集图案
  painter.drawRect(130, 105, 90, 60);

  painter.setBrush(Qt::Dense5Pattern);  // 中等密度图案
  painter.drawRect(250, 105, 90, 60);

  // 第三行：对角线图案
  painter.setBrush(Qt::BDiagPattern);  // 左上到右下对角线
  painter.drawRect(10, 195, 90, 60);

  painter.setBrush(Qt::FDiagPattern);  // 右上到左下对角线
  painter.drawRect(130, 195, 90, 60);

  painter.setBrush(Qt::DiagCrossPattern);  // 交叉对角线
  painter.drawRect(250, 195, 90, 60);
}

我们绘制了九个使用不同画刷图案填充的矩形。

painter.setBrush(Qt::HorPattern);
painter.drawRect(10, 15, 90, 60);

这里绘制了一个使用特定图案填充的矩形。Qt::HorPattern 是一个常量，用于创建水平线条图案。

main.cpp

#include <QDesktopWidget>
#include <QApplication>
#include "patterns.h"

int main(int argc, char *argv[]) {
    
  QApplication app(argc, argv);  
    
  Patterns window;
  
  window.resize(350, 280);
  window.setWindowTitle("Patterns");
  window.show();

  return app.exec();
}

关键概念解释：

图案填充：
通过 QPainter::setBrush() 方法设置不同的 Qt::BrushStyle 常量，可以使用预定义图案填充形状。
常用图案样式：Qt::HorPattern：水平线条Qt::VerPattern：垂直线条Qt::CrossPattern：交叉线条Qt::Dense1Pattern 到 Qt::Dense7Pattern：不同密度的点阵Qt::BDiagPattern 和 Qt::FDiagPattern：对角线图案
无边框绘制：
painter.setPen(Qt::NoPen) 用于取消形状的边框，只显示填充图案。

透明矩形

透明度是指能够透视材料的属性。理解透明度最简单的方法是想象一块玻璃或水。从技术上讲，光线可以穿过玻璃，这样我们就能看到玻璃后面的物体。

在计算机图形学中，我们可以使用 Alpha 合成来实现透明效果。Alpha 合成是将图像与背景结合以创建部分透明外观的过程。合成过程使用 Alpha 通道。

transparent_rectangles.h

#pragma once

#include <QWidget>

class TransparentRectangles : public QWidget {

  public:
    TransparentRectangles(QWidget *parent = 0);

  protected:
    void paintEvent(QPaintEvent *event);
    void doPainting();
};

transparent_rectangles.cpp

#include <QApplication>
#include <QPainter>
#include <QPainterPath>
#include "transparent_rectangles.h"

TransparentRectangles::TransparentRectangles(QWidget *parent)
    : QWidget(parent)
{ }

void TransparentRectangles::paintEvent(QPaintEvent *e) {
    
  Q_UNUSED(e);
  
  doPainting();
}

void TransparentRectangles::doPainting() {
    
  QPainter painter(this);
  
  for (int i=1; i<=11; i++) {
    painter.setOpacity(i*0.1);
    painter.fillRect(50*i, 20, 40, 40, Qt::darkGray);
  }    
}

这个示例绘制了十个具有不同透明度级别的矩形。

painter.setOpacity(i*0.1);

setOpacity 方法设置绘图的不透明度。该值应在 0.0 到 1.0 的范围内，其中 0.0 表示完全透明，1.0 表示完全不透明。

main.cpp

#include <QDesktopWidget>
#include <QApplication>
#include "transparent_rectangles.h"

int main(int argc, char *argv[]) {
    
  QApplication app(argc, argv);  
    
  TransparentRectangles window;

  window.resize(630, 90);  
  window.setWindowTitle("Transparent rectangles");
  window.show();

  return app.exec();
}

关键概念解释：

透明度控制：
通过QPainter::setOpacity()方法设置绘图的透明度，值范围从 0.0（完全透明）到 1.0（完全不透明）。
Alpha 合成：
透明度效果基于 Alpha 通道实现，每个像素的 Alpha 值决定了它与背景的混合程度。
示例说明：
循环绘制 11 个矩形，每个矩形的透明度从 0.1 递增到 1.0，直观展示透明度变化效果。

图形绘制

Qt5 的绘图 API 可以绘制各种图形。下面的代码示例展示了其中一些图形。

shapes.h

#pragma once

#include <QWidget>

class Shapes : public QWidget {
    
  public:
    Shapes(QWidget *parent = 0);

  protected:
    void paintEvent(QPaintEvent *e);

  private:
    void doPainting();
};

shapes.cpp

#include <QApplication>
#include <QPainter>
#include <QPainterPath>
#include "shapes.h"

Shapes::Shapes(QWidget *parent)
    : QWidget(parent)
{ }

void Shapes::paintEvent(QPaintEvent *e) {
    
  Q_UNUSED(e);  // 忽略未使用的事件对象

  doPainting();  // 调用绘图方法
}

void Shapes::doPainting() {
  
  QPainter painter(this);  // 创建绘图对象，指定父组件为当前窗口

  painter.setRenderHint(QPainter::Antialiasing);  // 启用抗锯齿，提升图形质量
  painter.setPen(QPen(QBrush("#888"), 1));        // 设置画笔：深灰色，1像素粗细
  painter.setBrush(QBrush(QColor("#888")));        // 设置画刷：深灰色

  QPainterPath path1;  // 创建路径对象，用于组合复杂图形

  // 绘制贝塞尔曲线构成的闭合图形
  path1.moveTo(5, 5);                // 将起点移动到 (5, 5)
  path1.cubicTo(40, 5, 50, 50, 99, 99);  // 绘制三次贝塞尔曲线（控制点1，控制点2，终点）
  path1.cubicTo(5, 99, 50, 50, 5, 5);    // 绘制闭合曲线，形成对称图形
  painter.drawPath(path1);  // 绘制路径

  // 绘制扇形、弦和圆角矩形
  painter.drawPie(130, 20, 90, 60, 30*16, 120*16);  
  // 扇形参数：外接矩形左上角坐标 (130,20)，宽90高60；起始角度30°（×16为API要求的1/16度单位），跨度120°
  painter.drawChord(240, 30, 90, 60, 0, 16*180);    
  // 弦参数：外接矩形左上角坐标 (240,30)，宽90高60；起始角度0°，跨度180°
  painter.drawRoundRect(20, 120, 80, 50);            
  // 圆角矩形参数：左上角坐标 (20,120)，宽80高50（默认圆角为宽高的1/4）

  // 绘制多边形（五点星形）
  QPolygon polygon({QPoint(130, 140), QPoint(180, 170), QPoint(180, 140),
                    QPoint(220, 110), QPoint(140, 100)});  // 定义多边形顶点坐标
  painter.drawPolygon(polygon);  // 绘制多边形

  // 绘制普通矩形
  painter.drawRect(250, 110, 60, 60);  // 矩形参数：左上角坐标 (250,110)，宽60高60

  // 基于字体创建路径并绘制字符轮廓
  QPointF baseline(20, 250);  // 文本基线坐标
  QFont font("Georgia", 55);   // 创建字体：字号55
  QPainterPath path2;          // 创建路径对象
  path2.addText(baseline, font, "Q");  // 向路径添加文本，生成字符轮廓路径
  painter.drawPath(path2);     // 绘制字符轮廓

  // 绘制椭圆（含圆形）
  painter.drawEllipse(140, 200, 60, 60);  // 圆形：外接矩形宽高相等（60×60）
  painter.drawEllipse(240, 200, 90, 60);  // 椭圆：外接矩形宽90高60
}

我们在示例中绘制了九种不同的图形。

main.cpp

#include <QDesktopWidget>
#include <QApplication>
#include "shapes.h"

int main(int argc, char *argv[]) {
    
  QApplication app(argc, argv);  // 创建应用程序对象  
    
  Shapes window;  // 创建图形窗口对象

  window.resize(350, 280);  // 设置窗口大小
  window.setWindowTitle("Shapes");  // 设置窗口标题
  window.show();  // 显示窗口

  return app.exec();  // 进入事件循环，等待用户操作
}

渐变

在计算机图形学中，渐变是指从亮到暗或从一种颜色到另一种颜色的平滑过渡。在 2D 绘图程序和绘画软件中，渐变常用于创建彩色背景、特殊效果以及模拟光影和阴影。

下面的代码示例展示了如何创建线性渐变。

linear_gradients.h

#pragma once

#include <QWidget>

class LinearGradients : public QWidget {

  public:
    LinearGradients(QWidget *parent = 0);

  protected:
    void paintEvent(QPaintEvent *e);
    
  private:
    void doPainting();  // 执行绘图操作
};

linear_gradients.cpp

#include <QApplication>
#include <QPainter>
#include "linear_gradients.h"

LinearGradients::LinearGradients(QWidget *parent)
    : QWidget(parent)
{ }

void LinearGradients::paintEvent(QPaintEvent *e) {
    
  Q_UNUSED(e);  // 忽略未使用的事件对象
  
  doPainting();  // 调用绘图方法
}  

void LinearGradients::doPainting() {
         
  QPainter painter(this);  // 创建绘图对象，指定父组件为当前窗口
  
  // 创建第一个线性渐变（垂直方向）
  QLinearGradient grad1(0, 20, 0, 110);  
  // 渐变起始点(0,20)，结束点(0,110)，形成垂直方向的渐变区域

  grad1.setColorAt(0.1, Qt::black);    // 在位置0.1处设置黑色
  grad1.setColorAt(0.5, Qt::yellow);   // 在位置0.5处设置黄色
  grad1.setColorAt(0.9, Qt::black);    // 在位置0.9处设置黑色

  painter.fillRect(20, 20, 300, 90, grad1);  
  // 用grad1渐变填充矩形（左上角坐标(20,20)，宽300，高90）

  // 创建第二个线性渐变（对角线方向）
  QLinearGradient grad2(0, 55, 250, 0);  
  // 渐变起始点(0,55)，结束点(250,0)，形成从左下到右上的对角线渐变

  grad2.setColorAt(0.2, Qt::black);    // 位置0.2处设置黑色
  grad2.setColorAt(0.5, Qt::red);      // 位置0.5处设置红色
  grad2.setColorAt(0.8, Qt::black);    // 位置0.8处设置黑色

  painter.fillRect(20, 140, 300, 100, grad2);  
  // 用grad2渐变填充矩形（左上角坐标(20,140)，宽300，高100）
}

在这个代码示例中，我们绘制了两个矩形并使用线性渐变填充它们。

QLinearGradient grad1(0, 20, 0, 110);

QLinearGradient 通过两个参数点构建线性渐变，这两个点定义了渐变的插值区域。

grad1.setColorAt(0.1, Qt::black);
grad1.setColorAt(0.5, Qt::yellow);
grad1.setColorAt(0.9, Qt::black);

渐变中的颜色通过停止点（stop point）定义。setColorAt 方法在给定位置（0.0 到 1.0 之间）设置对应的颜色。

painter.fillRect(20, 20, 300, 90, grad1);

我们使用渐变对象填充矩形，使颜色在指定区域内平滑过渡。

main.cpp

#include <QApplication>
#include "linear_gradients.h"

int main(int argc, char *argv[]) {
    
  QApplication app(argc, argv);  // 创建应用程序对象  
    
  LinearGradients window;  // 创建窗口对象

  window.resize(350, 260);  // 设置窗口大小
  window.setWindowTitle("Linear gradients");  // 设置窗口标题
  window.show();  // 显示窗口

  return app.exec();  // 进入应用程序事件循环
}

关键概念解释：

线性渐变（QLinearGradient）由两个点定义渐变方向，颜色在两点之间的区域内插值过渡。停止点位置值（如 0.1、0.5）表示相对于渐变方向的比例（0.0 为起点，1.0 为终点）。
颜色插值相邻停止点之间的颜色会自动生成过渡效果，示例中第一个渐变从黑色→黄色→黑色，形成垂直方向的对称渐变。第二个渐变通过对角线方向和红黑配色，展示了任意角度的渐变效果。
填充区域fillRect 方法不仅可以用纯色填充，还能接受渐变对象（QBrush 的子类），实现复杂的色彩过渡效果。

径向渐变

径向渐变是指两种颜色或同一颜色的不同深浅在两个同心圆之间的平滑过渡。

radial_gradient.h

#pragma once

#include <QWidget>

class RadialGradient : public QWidget {

  public:
    RadialGradient(QWidget *parent = 0);

  protected:
    void paintEvent(QPaintEvent *e);
    
  private:
    void doPainting();  
};

radial_gradient.cpp

#include <QApplication>
#include <QPainter>
#include "radial_gradient.h"

RadialGradient::RadialGradient(QWidget *parent)
    : QWidget(parent)
{ }

void RadialGradient::paintEvent(QPaintEvent *e) {
    
  Q_UNUSED(e);
  
  doPainting();
}

void RadialGradient::doPainting() {
  
  QPainter painter(this);
  
  int h = height();  // 获取窗口高度
  int w = width();   // 获取窗口宽度

  // 创建径向渐变对象，中心点位于窗口中心，半径为80像素
  QRadialGradient grad1(w/2, h/2, 80);

  // 设置渐变颜色：从中心向外
  grad1.setColorAt(0, QColor("#032E91"));    // 中心点：深蓝色
  grad1.setColorAt(0.3, Qt::white);          // 30%半径处：白色
  grad1.setColorAt(1, QColor("#032E91"));    // 边缘：深蓝色

  // 用径向渐变填充整个窗口
  painter.fillRect(0, 0, w, h, grad1);
}

这个示例创建了一个从窗口中心向外扩散的径向渐变。

QRadialGradient grad1(w/2, h/2, 80);

QRadialGradient 类创建一个径向渐变，它在焦点和围绕它的圆周上的端点之间进行颜色插值。参数分别是圆心坐标和半径，焦点默认位于圆心。

grad1.setColorAt(0, QColor("#032E91"));
grad1.setColorAt(0.3, Qt::white);
grad1.setColorAt(1, QColor("#032E91"));

setColorAt 方法定义渐变中的颜色断点。参数 0 表示圆心，1 表示圆周边缘。

painter.fillRect(0, 0, w, h, grad1);

整个窗口区域都被径向渐变填充。

main.cpp

#include <QApplication>
#include "radial_gradient.h"

int main(int argc, char *argv[]) {
    
  QApplication app(argc, argv);  
    
  RadialGradient window;

  window.resize(300, 250);  
  window.setWindowTitle("Radial gradient");
  window.show();

  return app.exec();
}

关键概念解析：

径向渐变原理从中心点（焦点）向周围圆形区域扩散的渐变效果通过QRadialGradient(centerX, centerY, radius)创建颜色在焦点和圆周之间平滑过渡
颜色断点设置setColorAt(position, color)方法定义渐变中的颜色变化点position 范围从 0.0（圆心）到 1.0（圆周边缘）
应用场景创建按钮、图标等元素的立体效果设计背景图案、视觉焦点模拟灯光、光晕等效果

在本 Qt5 C++ 教程章节的最后一个示例中，我们将创建一个 “淡入淡出” 效果。该示例展示了一个从中心逐渐放大并从某一时刻开始逐渐淡出的文本。这是一种非常常见的效果，你可以在网页的 Flash 动画中经常看到。

puff.h

#pragma once

#include <QWidget>

class Puff : public QWidget {

  public:
    Puff(QWidget *parent = 0);

  protected:
    void paintEvent(QPaintEvent *event);  // 绘图事件处理函数
    void timerEvent(QTimerEvent *event);   // 定时器事件处理函数

  private:
    int x;              // 字体大小
    qreal opacity;      // 透明度（0.0完全透明，1.0完全不透明）
    int timerId;        // 定时器ID
    
    void doPainting();  // 执行绘图操作
};

在头文件中，我们定义了两个事件处理函数：绘图事件处理函数和定时器事件处理函数。

puff.cpp

#include <QPainter>
#include <QTimer>
#include <QTextStream>
#include "puff.h"

Puff::Puff(QWidget *parent)
    : QWidget(parent) {
        
  x = 1;                  // 初始字体大小为1
  opacity = 1.0;          // 初始透明度为完全不透明
  timerId = startTimer(15);  // 启动定时器，每15毫秒触发一次
}

void Puff::paintEvent(QPaintEvent *e) {
    
  Q_UNUSED(e);  // 忽略未使用的事件对象
  
  doPainting();  // 调用绘图方法
}

void Puff::doPainting() {
  
  QPainter painter(this);  // 创建绘图对象
  QTextStream out(stdout); // 用于输出日志的文本流

  QString text = "ZetCode";  // 要显示的文本

  painter.setPen(QPen(QBrush("#575555"), 1));  // 设置画笔：深灰色，1像素粗细

  QFont font("Courier", x, QFont::DemiBold);  // 创建字体对象（字体名、大小、加粗）
  QFontMetrics fm(font);  // 获取字体度量（用于计算文本宽度）
  int textWidth = fm.width(text);  // 计算文本宽度

  painter.setFont(font);  // 设置绘图字体

  if (x > 10) {  // 当字体大小超过10时，开始降低透明度
    opacity -= 0.01;  // 每次减少0.01透明度
    painter.setOpacity(opacity);  // 应用透明度
  }

  if (opacity <= 0) {  // 当透明度降至0时
    killTimer(timerId);  // 停止定时器
    out << "timer stopped" << endl;  // 输出日志
  }

  int h = height();  // 获取窗口高度
  int w = width();   // 获取窗口宽度

  painter.translate(QPoint(w/2, h/2));  // 将坐标系原点移至窗口中心
  painter.drawText(-textWidth/2, 0, text);  // 在中心位置绘制文本
}

void Puff::timerEvent(QTimerEvent *e) {
    
  Q_UNUSED(e);  // 忽略未使用的事件对象
  
  x += 1;  // 字体大小每次增加1
  repaint();  // 触发重绘（自动调用paintEvent）
}

这是 puff.cpp 文件的实现。

main.cpp

#include <QApplication>
#include "puff.h"

int main(int argc, char *argv[]) {
    
  QApplication app(argc, argv);  // 创建应用程序对象  
    
  Puff window;  // 创建窗口对象

  window.resize(350, 280);  // 设置窗口大小
  window.setWindowTitle("Puff");  // 设置窗口标题
  window.show();  // 显示窗口

  return app.exec();  // 进入事件循环
}

效果说明：

放大阶段：文本从字体大小 1 开始，每秒约 66 次（15ms 间隔）逐渐放大，直到大小超过 10。
淡出阶段：字体大小超过 10 后，透明度开始每秒约 66 次递减（每次 - 0.01），文本逐渐透明。
结束阶段：当透明度降至 0 时，定时器停止，效果结束。

此示例综合运用了 定时器动画、字体变换 和 透明度控制，展示了 Qt 在图形动画中的灵活性。

透明flash动画素材

上一篇：文创测评︱《如意琳琅图籍》:本土原创解谜书的胜利?
下一篇：Android 开发中文引导-动画和图形概述

Qt5 C++入门教程-第12章绘图(QPainter)

线条

颜色

图案填充

关键概念解释：

透明矩形

关键概念解释：

图形绘制

渐变

关键概念解释：

径向渐变

关键概念解析：

效果说明：

相关推荐

开源的人脸识别框架（人脸识别开源sdk源码）

图像算法应用6:半小时快速完成人脸检测及人脸识别

基于OpenCV的视频人脸识别java考勤jsp源代码Mysql

科幻小说《情绪指针》:如果我们失去一切情绪

DeepSeek+Photoshop，一键生成PS脚本的保姆级教程与深度体验!

探索Python中的人脸识别:深入pyfacelib库

Linux服务器程序规范 - 系统资源限制和改变工作目录和根目录

数学模型和数学建模介绍数学模型是

中考数学33个模型全梳理中考数学36个模型

2021年中考数学33个专题模型 42个中考数学模型讲解

Qt5 C++入门教程-第12章 绘图(QPainter)

线条

颜色

图案填充

关键概念解释：

透明矩形

关键概念解释：

图形绘制

渐变

关键概念解释：

径向渐变

关键概念解析：

效果说明：

相关推荐

开源的人脸识别框架（人脸识别开源sdk源码）

图像算法应用6:半小时快速完成人脸检测及人脸识别

基于OpenCV的视频人脸识别java考勤jsp源代码Mysql

科幻小说《情绪指针》:如果我们失去一切情绪

DeepSeek+Photoshop，一键生成PS脚本的保姆级教程与深度体验!

探索Python中的人脸识别:深入pyfacelib库

Linux服务器程序规范 - 系统资源限制和改变工作目录和根目录

数学模型和数学建模介绍 数学模型是

中考数学33个模型全梳理 中考数学36个模型

2021年中考数学33个专题模型 42个中考数学模型讲解

Qt5 C++入门教程-第12章绘图(QPainter)

数学模型和数学建模介绍数学模型是

中考数学33个模型全梳理中考数学36个模型