Qt：玩转QPainter序列九(文本，文本框，填充)

前言

继续承接序列八

正文

在这里插入图片描述

1. `drawImage`系列函数绘制图像

inline void drawImage(const QPoint &p, const QImage &image);

作用: 在指定的点 p 上绘制 QImage 图像。图像的左上角将对齐到 p 点。

inline void drawImage(int x, int y, const QImage &image, int sx = 0, int sy = 0, int sw = -1, int sh = -1, Qt::ImageConversionFlags flags = Qt::AutoColor);

作用: 从 QImage 中的指定区域绘制图像。
参数:
- x, y: 图像绘制的起始位置。
- image: 要绘制的图像。
- sx, sy: 源图像中要绘制区域的起始点。
- sw, sh: 源图像中要绘制区域的宽度和高度。如果为负数，表示使用整个图像。
- flags: 图像转换标志（如颜色模式）。

Qt::ImageConversionFlags 的用途

格式转换: 当你绘制的图像格式与目标设备的显示格式不一致时，ImageConversionFlags 决定了图像转换的方式。例如，从彩色图像转换为单色图像时，可以指定是否使用抖动处理。
颜色模式: 可以选择只使用彩色部分、单色部分或者自动选择。例如：

Qt::AutoColor: 自动选择合适的颜色模式。
Qt::MonoOnly: 只显示单色部分。
Qt::ColorOnly: 只显示彩色部分。
抖动处理: 对于低色深的设备或者图像，可以通过 ImageConversionFlags 来选择不同的抖动处理方式（例如有序抖动、阈值抖动、扩散抖动等）。

示例

void PlayQPainter::initcboImageFlag()
{
    //添加所有的Qt::ImageConversionFlags
    ui->cboImageFlag->addItem("ColorMode_Mask",static_cast<int>(Qt::ColorMode_Mask));
    ui->cboImageFlag->addItem("AutoColor",static_cast<int>(Qt::AutoColor));
    ui->cboImageFlag->addItem("ColorOnly",static_cast<int>(Qt::ColorOnly));
    ui->cboImageFlag->addItem("MonoOnly",static_cast<int>(Qt::MonoOnly));
    ui->cboImageFlag->addItem("AlphaDither_Mask",static_cast<int>(Qt::AlphaDither_Mask));
    ui->cboImageFlag->addItem("ThresholdAlphaDither",static_cast<int>(Qt::ThresholdAlphaDither));
    ui->cboImageFlag->addItem("OrderedAlphaDither",static_cast<int>(Qt::OrderedAlphaDither));
    ui->cboImageFlag->addItem("DiffuseAlphaDither",static_cast<int>(Qt::DiffuseAlphaDither));
    ui->cboImageFlag->addItem("NoAlpha",static_cast<int>(Qt::NoAlpha));
    ui->cboImageFlag->addItem("Dither_Mask",static_cast<int>(Qt::Dither_Mask));
    ui->cboImageFlag->addItem("DiffuseDither",static_cast<int>(Qt::DiffuseDither));
    ui->cboImageFlag->addItem("OrderedDither",static_cast<int>(Qt::OrderedDither));
    ui->cboImageFlag->addItem("ThresholdDither",static_cast<int>(Qt::ThresholdDither));
    ui->cboImageFlag->addItem("DitherMode_Mask",static_cast<int>(Qt::DitherMode_Mask));
    ui->cboImageFlag->addItem("AutoDither",static_cast<int>(Qt::AutoDither));
    ui->cboImageFlag->addItem("PreferDither",static_cast<int>(Qt::PreferDither));
    ui->cboImageFlag->addItem("AvoidDither",static_cast<int>(Qt::AvoidDither));
    ui->cboImageFlag->addItem("NoOpaqueDetection",static_cast<int>(Qt::NoOpaqueDetection));
    ui->cboImageFlag->addItem("NoFormatConversion",static_cast<int>(Qt::NoFormatConversion));

    //连接信号与槽
    connect(ui->cboImageFlag,QOverload<int>::of(&QComboBox::currentIndexChanged), this, [this](){
        int index = ui->cboImageFlag->currentIndex();
        Qt::ImageConversionFlag style = (Qt::ImageConversionFlag)ui->cboImageFlag->itemData(index).toInt();
        ui->paintArea->setImageFlag(style);
    });
}

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

    QPainter painter(this);
    // 设置抗锯齿
    painter.setRenderHint(QPainter::Antialiasing, true);
    // 设置粗一点
    QPen pen;
    pen.setWidth(3);
    painter.setPen(pen);
    // 加载图像到 QPixmap,替换为你的图片路径
    QImage image("D:/all_the_code/qt_code/ts/playQPainter/t1.png");
    painter.drawImage(30,50,image,0,0,-1,-1,Qt::MonoOnly);
}

在这里插入图片描述

2.文本布局函数

void setLayoutDirection(Qt::LayoutDirection direction);

作用: 设置绘制文本的布局方向（如从左到右或从右到左）。
参数:
- direction：布局方向，有LeftToRight(左到右), RightToLeft(右到左), LayoutDirectionAuto(自动)

Qt::LayoutDirection layoutDirection() const;

作用: 返回当前的布局方向。

3. 绘制字形序列

void drawGlyphRun(const QPointF &position, const QGlyphRun &glyphRun);

作用: 绘制一个 QGlyphRun，这是一个用于在高级文本排版中表示字形序列的类。
参数:
- position: 绘制字形的起始位置。
- glyphRun: 包含字形序列的 QGlyphRun 对象。

例子

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

    QPainter painter(this);
    // 设置抗锯齿
    painter.setRenderHint(QPainter::Antialiasing, true);
    // 设置字体
     QFont font("Times New Roman", 36);
     QRawFont rawFont = QRawFont::fromFont(font);

     // 创建 QGlyphRun 对象
     QGlyphRun glyphRun;
     glyphRun.setRawFont(rawFont);

     // 需要绘制的文本
     QString text = "Qt GlyphRun Test";

     // 生成字形索引和位置
     QVector<quint32> glyphIndexes;
     QVector<QPointF> positions;
     double x = 0;

     for (QChar ch : text) {
         // 获取每个字符的字形索引
         glyphIndexes.append(rawFont.glyphIndexesForString(QString(ch)).at(0));

         // 计算每个字形的位置
         positions.append(QPointF(x, 0));

         // 获取字形的横向进位，并更新 x 坐标偏移
         QVector<QPointF> advances = rawFont.advancesForGlyphIndexes(glyphIndexes);
         x += advances.last().x();
     }

     glyphRun.setGlyphIndexes(glyphIndexes);
     glyphRun.setPositions(positions);

     // 绘制位置，指定基线位置
     QPointF position(50, 100);

     // 使用 drawGlyphRun 绘制字形
     painter.drawGlyphRun(position, glyphRun);
}

在这里插入图片描述

4.`drawStaticText`系列函数绘制静态文本

drawStaticText 函数用于绘制静态文本，静态文本在绘制时不会重新进行布局或重绘。因此，它适用于那些文本内容不会频繁变化且需要高效绘制的场景。

void drawStaticText(const QPointF &topLeftPosition, const QStaticText &staticText);
- 作用: 在指定的浮点坐标 topLeftPosition 处绘制 QStaticText 对象。
- 参数:
  - topLeftPosition: 绘制起点的浮点坐标。
  - staticText: 要绘制的静态文本对象，类型为 QStaticText。
inline void drawStaticText(const QPoint &topLeftPosition, const QStaticText &staticText);
- 作用: 在指定的整数坐标 topLeftPosition 处绘制 QStaticText 对象。
inline void drawStaticText(int left, int top, const QStaticText &staticText);
- 作用: 在指定的 (left, top) 坐标处绘制 QStaticText 对象。

3. 区别

性能:
- drawStaticText 的性能比 drawText 更高，因为它假设文本不会改变，因此可以缓存布局结果，避免每次绘制时重新计算布局。
- drawText 每次绘制时都会重新计算文本的布局，适合文本内容动态变化的场景。
用途:
- drawStaticText 适用于绘制不经常变化的文本，如静态标签、标题等，特别是在需要反复绘制相同文本时，它的性能优势更明显。
- drawText 则适合绘制内容可能频繁变化的文本，如用户输入的文字、实时数据显示等。
文本类型:
- drawStaticText 使用的是 QStaticText 类型，这个类型设计用于静态文本，并为静态文本的高效绘制做了优化。
- drawText 使用的是 QString 类型，适用于一般的文本绘制。

例子

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

    QPainter painter(this);
    // 设置抗锯齿
    painter.setRenderHint(QPainter::Antialiasing, true);
    // 设置字体
    QFont font("Arial", 14);
    painter.setFont(font);

    // 定义 QStaticText 对象
    QStaticText staticText("Hello, QStaticText!");

    // 使用 QPoint 指定的整数坐标 (50, 50) 处绘制文本
    QPoint topLeftPosition(50, 50);
    painter.drawStaticText(topLeftPosition, staticText);

    // 使用整数值指定的 (200, 100) 处绘制文本
    painter.drawStaticText(200, 100, staticText);
}

在这里插入图片描述

5. `drawText`系列函数绘制文本

drawText 函数用于绘制普通文本，但是绘制时每次都会进行文本的布局计算。这使得它适合绘制内容可能频繁变化的动态文本。

void drawText(const QPointF &p, const QString &s);
- 作用: 在指定的点 p 上绘制文本 s。
- 参数:
  - p: 文本绘制的起始位置。
  - s: 要绘制的字符串。
inline void drawText(const QPoint &p, const QString &s);
- 作用: 在指定的点 p 上绘制文本 s。
inline void drawText(int x, int y, const QString &s);
- 作用: 在指定的点 （x, y） 上绘制文本 s。
void drawText(const QPointF &p, const QString &str, int tf, int justificationPadding);
- 作用：在指定的点 p 绘制字符串 str，并且可以使用文本标志 tf 和对齐填充 justificationPadding 来控制文本的对齐和填充效果。 justificationPadding 表示两个字符串之间的举例，它越大，两个单词之间距离越大。
void drawText(const QRectF &r, int flags, const QString &text, QRectF *br = nullptr);
- 作用：在矩形区域 r 内绘制字符串 text，文本的对齐方式由 flags 参数指定。可以选择性地返回文本的实际边界矩形 br。
void drawText(const QRect &r, int flags, const QString &text, QRect *br = nullptr);
- 作用：与上一个函数类似，只是使用了整数类型的 QRect 代替浮
inline void drawText(int x, int y, int w, int h, int flags, const QString &text, QRect *br = nullptr);
- 作用：在指定的矩形区域 (x, y, w, h) 内绘制字符串 text，并根据 flags 参数控制文本的对齐方式。可以选择性地返回文本的实际边界矩形 br。
void drawText(const QRectF &r, const QString &text, const QTextOption &o = QTextOption());
- 作用：在矩形区域 r 内绘制字符串 text，文本的格式由 QTextOption 对象 o 指定。QTextOption 提供了更细粒度的文本格式控制选项，例如文本对齐、换行模式、方向等。
- 参数：
  - QRectF &r：文本绘制的矩形区域。
  - QString &text：要绘制的文本内容。
  - QTextOption &o：文本选项，控制文本的格式和行为。

例子

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

    QPainter painter(this);
    // 设置抗锯齿
    painter.setRenderHint(QPainter::Antialiasing, true);
    // 设置字体
    QFont font("Arial", 14);
    painter.setFont(font);

    // 测试 drawText(const QPointF &p, const QString &str, int tf, int justificationPadding)
    // justificationPadding越大，两个单词之间间距越大
    QPointF point1(20, 30);
    painter.drawText(point1, "QPointF drawText", Qt::AlignLeft, 30);

    // 测试 drawText(const QRect &r, int flags, const QString &text, QRect *br = nullptr)
    QRect rect1(20, 50, 200, 40);
    painter.drawRect(rect1); // 画出矩形边框
    painter.drawText(rect1, Qt::AlignCenter | Qt::TextWordWrap, "QRect drawText");

    // 测试 inline void drawText(int x, int y, int w, int h, int flags, const QString &text, QRect *br = nullptr)
    painter.drawText(20, 100, 200, 40, Qt::AlignRight | Qt::AlignVCenter, "x, y, w, h drawText");

    // 测试 drawText(const QRectF &r, const QString &text, const QTextOption &o = QTextOption())
    QRectF rectF1(20, 150, 200, 100);
    QTextOption option;
    option.setAlignment(Qt::AlignLeft);
    option.setWrapMode(QTextOption::WordWrap);
    painter.drawText(rectF1, "QRectF drawText with QTextOption", option);
}

在这里插入图片描述

6.`boundingRect`系列函数计算绘制文本所需要的边界矩形

在 QPainter 类中，boundingRect 函数用于计算绘制文本所需的边界矩形。

QRectF boundingRect(const QRectF &rect, int flags, const QString &text);

作用: 计算在给定的矩形 rect 内，绘制文本 text 所需的边界矩形。
参数:
- rect: 用于计算文本边界矩形的矩形区域。这个矩形定义了文本绘制的区域。
- flags: 用于指定文本布局的标志，通常为 Qt::TextFlags，例如 Qt::AlignLeft、Qt::AlignRight、Qt::AlignCenter 等，用于控制文本的对齐方式。
- text: 要绘制的文本字符串。
返回: 返回一个 QRectF 对象，表示文本绘制所需的边界矩形。

QRect boundingRect(const QRect &rect, int flags, const QString &text);

作用: 计算在给定的矩形 rect 内，绘制文本 text 所需的边界矩形。

inline QRect boundingRect(int x, int y, int w, int h, int flags, const QString &text);

作用: 计算在给定的矩形区域内，绘制文本 text 所需的边界矩形。
参数:
- x, y: 矩形区域的左上角坐标。
- w, h: 矩形区域的宽度和高度。
- flags: 文本布局标志。
- text: 要绘制的文本字符串。
返回: 返回一个 QRect 对象，表示文本绘制所需的边界矩形。

QRectF boundingRect(const QRectF &rect, const QString &text, const QTextOption &o = QTextOption());

作用: 计算在给定的矩形 rect 内，绘制文本 text 所需的边界矩形，并考虑文本选项。
参数:
- rect: 用于计算文本边界矩形的矩形区域，类型为 QRectF。
- text: 要绘制的文本字符串。
- o: QTextOption 对象，用于设置文本的格式选项，例如对齐方式、换行策略等。如果未提供，则使用默认选项。
返回: 返回一个 QRectF 对象，表示文本绘制所需的边界矩形。

例子

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

    QPainter painter(this);
    // 设置抗锯齿
    painter.setRenderHint(QPainter::Antialiasing, true);
    // 设置字体
    QFont font("Arial", 14);
    painter.setFont(font);

    // 文本和标志
    QString text = "Hello, boundingRect!";
    int flags = Qt::AlignLeft | Qt::AlignTop; // 文本对齐方式

    // 第一个重载函数: 使用 QRect 参数
    QRect rect(50, 50, 200, 50);
    QRect boundingRect1 = painter.boundingRect(rect, flags, text);
    painter.drawRect(boundingRect1);
    painter.drawText(rect, flags, text);

    // 第二个重载函数: 使用 (x, y, w, h) 参数
    QRect boundingRect2 = painter.boundingRect(300, 50, 200, 50, flags, text);
    painter.drawRect(boundingRect2);
    painter.drawText(boundingRect2, flags, text);

    // 第三个重载函数: 使用 QRectF 和 QTextOption 参数
    QRectF rectF(50, 150, 200, 50);
    QTextOption textOption(Qt::AlignLeft);
    QRectF boundingRect3 = painter.boundingRect(rectF, text, textOption);
    painter.drawRect(boundingRect3.toRect());
    painter.drawText(boundingRect3, text);
}

在这里插入图片描述

7.`drawTextItem`系列函数

QPainter 类中的 drawTextItem 函数用于绘制 QTextItem 对象。QTextItem 是一个文本项，包含了文本的布局信息和渲染信息。

void drawTextItem(const QPointF &p, const QTextItem &ti);

作用: 使用 QTextItem 对象在指定的位置绘制文本项。

inline void drawTextItem(int x, int y, const QTextItem &ti);

作用: 使用 QTextItem 对象在指定的坐标位置绘制文本项。

inline void drawTextItem(const QPoint &p, const QTextItem &ti);

作用: 使用 QTextItem 对象在指定的 QPoint 位置绘制文本项。

例子

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

    QPainter painter(this);
    // 设置抗锯齿
    painter.setRenderHint(QPainter::Antialiasing, true);
    // 设置字体和文本内容
    QFont font("Arial", 24);
    QString text = "Hello, Qt!";

    // 创建 QTextLayout 并设置其文本和字体
    QTextLayout textLayout(text, font);
    textLayout.beginLayout();

    // 创建一个 QTextLine
    QTextLine line = textLayout.createLine();
    line.setPosition(QPointF(0, 0));

    // 完成布局
    textLayout.endLayout();

    // 使用 QTextItem 绘制文本项
    for (int i = 0; i < textLayout.lineCount(); ++i) {
        QTextLine line = textLayout.lineAt(i);

        // 计算绘制位置
         QPointF position(50, 100 + i * line.height());

         // 在指定的位置绘制该行的文本
         line.draw(&painter, position);
    }
}

在这里插入图片描述

8. `fillRect`系列函数填充矩形

void fillRect(const QRectF &rect, const QBrush &brush):
- 作用: 使用 QBrush 对象填充指定的矩形区域 rect。QRectF 是一个浮点矩形，表示矩形区域可以有小数值坐标。
inline void fillRect(int x, int y, int w, int h, const QBrush &brush):
- 作用: 使用 QBrush 对象填充从 (x, y) 开始的宽度为 w，高度为 h 的矩形区域。
void fillRect(const QRect &rect, const QBrush &brush):
- 作用: 使用 QBrush 对象填充整数坐标矩形 rect。
void fillRect(const QRectF &rect, const QColor &color):
- 作用: 使用 QColor 对象指定的颜色填充浮点矩形区域 rect。
inline void fillRect(int x, int y, int w, int h, const QColor &color):
- 作用: 使用 QColor 对象指定的颜色填充从 (x, y) 开始的宽度为 w，高度为 h 的矩形区域。
void fillRect(const QRect &rect, const QColor &color):
- 作用: 使用 QColor 对象指定的颜色填充整数坐标矩形 rect。
inline void fillRect(int x, int y, int w, int h, Qt::GlobalColor c):
- 作用: 使用 Qt 的预定义颜色 Qt::GlobalColor 填充从 (x, y) 开始的宽度为 w，高度为 h 的矩形区域。
inline void fillRect(const QRect &r, Qt::GlobalColor c):
- 作用: 使用 Qt 的预定义颜色 Qt::GlobalColor 填充整数坐标矩形 r。
inline void fillRect(const QRectF &r, Qt::GlobalColor c):
- 作用: 使用 Qt 的预定义颜色 Qt::GlobalColor 填充浮点矩形 r。
inline void fillRect(int x, int y, int w, int h, Qt::BrushStyle style):
- 作用: 使用 Qt::BrushStyle 枚举指定的样式填充从 (x, y) 开始的宽度为 w，高度为 h 的矩形区域。
inline void fillRect(const QRect &r, Qt::BrushStyle style):
- 作用: 使用 Qt::BrushStyle 枚举指定的样式填充整数坐标矩形 r。
inline void fillRect(const QRectF &r, Qt::BrushStyle style):
- 作用: 使用 Qt::BrushStyle 枚举指定的样式填充浮点矩形 r。
inline void fillRect(int x, int y, int w, int h, QGradient::Preset preset):
- 作用: 使用 QGradient::Preset 预设的渐变填充从 (x, y) 开始的宽度为 w，高度为 h 的矩形区域。
inline void fillRect(const QRect &r, QGradient::Preset preset):
- 作用: 使用 QGradient::Preset 预设的渐变填充整数坐标矩形 r。
inline void fillRect(const QRectF &r, QGradient::Preset preset):
- 作用: 使用 QGradient::Preset 预设的渐变填充浮点矩形 r。

例子

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

    QPainter painter(this);
    // 设置抗锯齿
    painter.setRenderHint(QPainter::Antialiasing, true);
    // 使用 QBrush 填充矩形
    QBrush brush(Qt::DiagCrossPattern);
    QRect rect1(10, 10, 100, 50);
    painter.fillRect(rect1, brush);

    // 使用 QColor 填充矩形
    QColor color(Qt::blue);
    QRect rect2(120, 10, 100, 50);
    painter.fillRect(rect2, color);

    // 使用 Qt::GlobalColor 填充矩形
    QRect rect3(230, 10, 100, 50);
    painter.fillRect(rect3, Qt::red);

    // 使用 QGradient::Preset 填充矩形
    QRect rect4(10, 70, 100, 50);
    painter.fillRect(rect4, QGradient::RadialGradient);

    // 使用 Qt::BrushStyle 填充矩形
    QRect rect5(120, 70, 100, 50);
    painter.fillRect(rect5, Qt::Dense7Pattern);
}

在这里插入图片描述

9.`eraseRect`系列函数

QPainter 类中的 eraseRect 函数用于擦除矩形区域的内容。具体来说，这些函数会将指定区域的绘图内容清除，通常将其填充为背景色或透明。以下是每个 eraseRect 函数的详细解释：

void eraseRect(const QRectF &rect);

作用: 擦除 QRectF 类型的矩形区域。
参数:
- rect: QRectF 类型，指定要擦除的矩形区域。QRectF 支持浮点坐标，因此可以用于更高精度的绘图区域。

inline void eraseRect(int x, int y, int w, int h);

作用: 擦除指定位置和尺寸的矩形区域。参数为整数值。

inline void eraseRect(const QRect &rect);

作用: 擦除 QRect 类型的矩形区域。

例子

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

    QPainter painter(this);
    // 设置抗锯齿
    painter.setRenderHint(QPainter::Antialiasing, true);
    // 设置背景为白色
    painter.fillRect(rect(), Qt::white);

    // 绘制一个蓝色的矩形
    painter.fillRect(20, 20, 200, 100, Qt::blue);

    // 使用 eraseRect 擦除指定区域
    // 擦除 (50, 40) 开始的宽度为 80，高度为 50 的矩形区域
    painter.eraseRect(50, 40, 80, 50);

    // 绘制一个红色的矩形
    painter.fillRect(250, 20, 200, 100, Qt::red);

    // 使用 eraseRect 擦除 QRect 类型的矩形区域
    QRect rect(280, 40, 80, 50);
    painter.eraseRect(rect);
}