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