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_OBJECTpublic:    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的值，稍作改动之后，让文本有跳动效果，自己尝试吧！