本系列所有文章可以在這里查看[http://blog.csdn.net/cloud_castle/article/category/2123873](http://blog.csdn.net/cloud_castle/article/category/2123873) 接上文[Qt5官方demo解析集35——Music Player](http://blog.csdn.net/cloud_castle/article/details/43672509) 今天同樣帶來一個有趣的小例子，如下圖所示，我們輸入的文字將在中央窗口顯示并以正弦波形浮動。 這個例子中涉及到 Qt 定時器族中的?QBasicTimer?類以及十分實用的?QFontMetrics?類。  當我們將應用部署在移動設備上時，Qt 將為該應用添加 "-small-screen" 的命令行參數。因此，通過判斷該參數是否存在，我們就可以為這個應用選擇不同的顯示模式，如同該 demo 中 main() 函數所示： ~~~ #include <QApplication> #include "dialog.h" int main(int argc, char *argv[]) { QApplication app(argc, argv); bool smallScreen = QApplication::arguments().contains("-small-screen"); Dialog dialog(0, smallScreen); if (!smallScreen) // 如果不是smallScreen直接顯示，否則全屏顯示 dialog.show(); else dialog.showFullScreen(); return app.exec(); } ~~~ Dialog 類繼承自 QDialog，使用垂直布局添加了中心窗口以及輸入框，并將輸入框的 textChanged(QString) 信號連接到中心窗口的 setText(QString) 槽函數上。 接著看看我們的wigglywidget.h: ~~~ #include <QBasicTimer> #include <QWidget> //! [0] class WigglyWidget : public QWidget { Q_OBJECT public: WigglyWidget(QWidget *parent = 0); public slots: void setText(const QString &newText) { text = newText; } // 當輸入框中文字變換該槽函數被執行，由于窗口每60毫秒刷新一次，因此無需調用update() protected: void paintEvent(QPaintEvent *event); void timerEvent(QTimerEvent *event); private: QBasicTimer timer; QString text; int step; }; ~~~ QBasicTimer 是一個快速、輕量級的定時器類，適合在嵌入式系統等對性能要求較高的環境下使用。 它不像 QTimer 一樣繼承自 QObject，因此不具有使用信號槽的能力， 但我們可以使用它為 QObject 及其派生類對象重復發送 QTimerEvent 事件，通過重載 timerEvent(QTimerEvent*) 以捕獲該事件。 wigglywidget.cpp: ~~~ #include <QtWidgets> #include "wigglywidget.h" //! [0] WigglyWidget::WigglyWidget(QWidget *parent) : QWidget(parent) { setBackgroundRole(QPalette::Midlight); // 設置背景色為亮白 setAutoFillBackground(true); // 記得設置該屬性為true QFont newFont = font(); // 然后獲取該窗口的字體對象 newFont.setPointSize(newFont.pointSize() + 20); // 增大20號 setFont(newFont); step = 0; timer.start(60, this); // 開啟定時器，間隔60毫秒 } //! [0] //! [1] void WigglyWidget::paintEvent(QPaintEvent * /* event */) //! [1] //! [2] { static const int sineTable[16] = { // 正弦波形的 y 值抽樣數組 0, 38, 71, 92, 100, 92, 71, 38, 0, -38, -71, -92, -100, -92, -71, -38 }; QFontMetrics metrics(font()); // 使用當前窗體的字體初始化QFontMetrics int x = (width() - metrics.width(text)) / 2; // 通過metrics得到顯示文本的信息，使文本居中顯示 int y = (height() + metrics.ascent() - metrics.descent()) / 2; // 關于ascent 與 descent，我們在下面解釋 QColor color; //! [2] //! [3] QPainter painter(this); //! [3] //! [4] for (int i = 0; i < text.size(); ++i) { // 獲取text中字符個數并循環 int index = (step + i) % 16; color.setHsv((15 - index) * 16, 255, 191); // 使用HSV設置每個字符的顏色值，三個參數分別代表色調，飽和度，亮度 painter.setPen(color); painter.drawText(x, y - ((sineTable[index] * metrics.height()) / 400), // 400用來控制正弦波形的幅度，數值越大波動越小 QString(text[i])); x += metrics.width(text[i]); // 以當前字符寬度增加 x 的值 } } //! [4] //! [5] void WigglyWidget::timerEvent(QTimerEvent *event) //! [5] //! [6] { if (event->timerId() == timer.timerId()) { // 我們通過timerId來判斷這個timerEvent是不是由我們定義的定時器觸發 ++step; update(); // 刷新顯示 } else { QWidget::timerEvent(event); // 如果不是則將該事件繼續下發 } //! [6] } ~~~ 大家一定記得當我們使用Qt繪制圖形時，類似drawRect()什么的，我們輸入的位置坐標即是該圖像左上角所在的位置，簡直是指哪打哪~ 但使用drawText()時呢，又好像不是這樣了。似乎文本的原點變成了左下角，但是還是感覺差點意思？如果你對這點有些疑惑的話，可以看看下面這張圖，沒錯，圖中的Origin才是我們真正的文本原點。它是Baseline與文本左側的交匯處。  有了這張圖，Ascent與Descent也就很明顯了，它們分別是文本最上方和最下方與Baseline之間的距離。 ~~~ int y = (height() + metrics.ascent() - metrics.descent()) / 2; ~~~ 那么這行代碼也就很明顯了，它得到的正是我們**縱向居中顯示文本時Baseline在窗口上的y軸坐標。** 如果將這個算式轉換成這樣，可能就更一目了然了： int y = metrics.ascent() + ( height() - metrics.ascent() - metrics.descent() ) / 2; 可能我們使用QFontMetrics時會更多的使用它的一些便利函數例如height()之類， 而實際上height()正是等于ascent()+descent()+1，最后的1即是Baseline的寬度。 好了，伴隨著跳動的字符，就先到這里吧O(∩_∩)O~