Qt之绘制闪烁文本

简述

根据之前的二位绘图，我们可以很轻松的进行文本的绘制，如果需要一些特效，比如：文本闪烁。我们就必须借助其它辅助类来完成。

• 简述
• 原理
• 实现
  • 效果
  • 源码

原理

主要涉及两个辅助类：

• QFontMetrics
  
  用于获取文本字体的像素高度与宽度

• QBasicTimer
  
  定时器，用于更新文本绘制。

原理：

• 利用QBasicTimer进行定时刷新。

• 文本绘制时，使用QColor来设置色调（H）、饱和度（S）、亮度（V），然后计算每一个字符的绘制坐标，进行单个绘制。

实现

效果

源码

头文件BannerWidget.h

#ifndef PARA_BANNER_H
#define PARA_BANNER_H

#include <QWidget>
#include <QBasicTimer>

class BannerWidget : public QWidget
{
    Q_OBJECT
public:
    explicit BannerWidget(QWidget *parent = 0);
    ~BannerWidget();

public slots:
    void setText(const QString &text);

protected:
    // 绘制文本
    void paintEvent(QPaintEvent *event);
    // 定时刷新
    void timerEvent(QTimerEvent *event);

private:
    QBasicTimer m_timer;
    QString m_strText;
    int m_nStep;
};

#endif

源文件BannerWidget.cpp

#include <QPainter>
#include <QTimerEvent>
#include <QFont>
#include "BannerWidget.h"

BannerWidget::BannerWidget(QWidget *parent)
    : QWidget(parent),
      m_nStep(0),
      m_strText(QString::fromLocal8Bit("一去丶二三里"))
{
    setAutoFillBackground(true);

    // 设置文字大小
    QFont newFont = font();
    newFont.setPointSize(newFont.pointSize() + 20);
    setFont(newFont);

    m_timer.start(100, this);
}

BannerWidget::~BannerWidget()
{
    m_timer.stop();
}

void BannerWidget::setText(const QString &text)
{
    m_strText = text;
}

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

    // 计算文本绘制的起始坐标
    QFontMetrics metrics(font());
    int x = (width() - metrics.width(m_strText)) / 2;
    int y = (height() + metrics.ascent() - metrics.descent()) / 2;

    QColor color;
    QPainter painter(this);
    for (int i = 0; i < m_strText.size(); ++i)
    {
        // 设置色调（H）、饱和度（S）、亮度（V）
        int nIndex = (m_nStep + i) % 16;
        color.setHsv((15 - nIndex) * 16, 255, 191);
        painter.setPen(color);

        // 单个字符绘制
        painter.drawText(x, y, QString(m_strText[i]));

        // 计算下一个字符的x坐标起始点
        x += metrics.width(m_strText[i]);
    }
}

void BannerWidget::timerEvent(QTimerEvent *event)
{
    Q_UNUSED(event);

    if (event->timerId() == m_timer.timerId())
    {
        ++m_nStep;
        update();
    }
    else
    {
        QWidget::timerEvent(event);
    }
}

当然，我们也可以修改起始坐标x、y的值，稍作改动之后，让文本有跳动效果，自己尝试吧！