溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

Qt繪制時(shí)鐘的代碼解析

發(fā)布時(shí)間：2020-07-20 15:59:16 來(lái)源：億速云 閱讀：283 作者：小豬 欄目：編程語(yǔ)言

這篇文章主要講解了Qt繪制時(shí)鐘的代碼解析，內(nèi)容清晰明了，對(duì)此有興趣的小伙伴可以學(xué)習(xí)一下，相信大家閱讀完之后會(huì)有幫助。

簡(jiǎn)述

QPainter 提供了 2D 繪圖的常用操作，QTimer 提供了定時(shí)器功能，將兩者相結(jié)合，可以做出很多的自定義特效繪制。

下面，來(lái)實(shí)現(xiàn)一個(gè)每天都要接觸的東西 - 時(shí)鐘。包含了常見(jiàn)的所有功能：時(shí)針、分針、秒針。

實(shí)現(xiàn)方式

由于時(shí)鐘是妙級(jí)更新的，所以我們需要定時(shí)刷新，時(shí)鐘本身則使用之前講過(guò)的 QPainter 來(lái)進(jìn)行繪制。

使用 QTimer 定時(shí)刷新，設(shè)置超時(shí)時(shí)間為 1000 毫秒（1 秒）。
繪制時(shí)鐘，通過(guò) paintEvent() 實(shí)現(xiàn)，包括：時(shí)針、分針、秒針、及面板、表盤等。
繪制小時(shí)對(duì)應(yīng)的文本，文本區(qū)域通過(guò) textRectF() 計(jì)算。

示例

效果

Qt繪制時(shí)鐘的代碼解析

源碼

首先，我們構(gòu)造一個(gè)定時(shí)器 QTimer，連接其超時(shí)信號(hào) timeout() 到槽函數(shù) update()，當(dāng)調(diào)用 update() 時(shí)，系統(tǒng)會(huì)自動(dòng)通知當(dāng)前界面進(jìn)行重繪（paintEvent()）。

ClockWidget::ClockWidget(QWidget *parent)
  : QWidget(parent)
{
  ...
 
  // 構(gòu)造定時(shí)器，設(shè)置超時(shí)為 1 秒
  QTimer *timer = new QTimer(this);
  connect(timer, SIGNAL(timeout()), this, SLOT(update()));
  timer->start(1000);
  ...
}

實(shí)現(xiàn)一個(gè)用于獲取文本區(qū)域的接口：

QRectF ClockWidget::textRectF(double radius, int pointSize, double angle)
{
  QRectF rectF;
  rectF.setX(radius*qCos(angle*M_PI/180.0) - pointSize*2);
  rectF.setY(radius*qSin(angle*M_PI/180.0) - pointSize/2.0);
  rectF.setWidth(pointSize*4);
  rectF.setHeight(pointSize);
  return rectF;
}

注意：這里，textRectF() 主要用于獲取小時(shí)對(duì)應(yīng)的文本區(qū)域。

重寫 paintEvent()，用于繪制時(shí)鐘。

void ClockWidget::paintEvent(QPaintEvent *event)
{
  Q_UNUSED(event);
 
  // 時(shí)針、分針、秒針位置 - 多邊形
  static const QPoint hourHand[3] = {
    QPoint(7, 8),
    QPoint(-7, 8),
    QPoint(0, -30)
  };
  static const QPoint minuteHand[3] = {
    QPoint(7, 8),
    QPoint(-7, 8),
    QPoint(0, -65)
  };
 
  static const QPoint secondHand[3] = {
    QPoint(7, 8),
    QPoint(-7, 8),
    QPoint(0, -80)
  };
 
  // 時(shí)針、分針、秒針顏色
  QColor hourColor(200, 100, 0, 200);
  QColor minuteColor(0, 127, 127, 150);
  QColor secondColor(0, 160, 230, 150);
 
  int side = qMin(width(), height());
  QTime time = QTime::currentTime();
 
  QPainter painter(this);
  painter.setRenderHint(QPainter::Antialiasing);
  // 平移坐標(biāo)系原點(diǎn)至中心點(diǎn)
  painter.translate(width() / 2, height() / 2);
  // 縮放
  painter.scale(side / 200.0, side / 200.0);
 
  // 繪制時(shí)針
  painter.setPen(Qt::NoPen);
  painter.setBrush(hourColor);
 
  painter.save();
  // 每圈360° = 12h 即：旋轉(zhuǎn)角度 = 小時(shí)數(shù) * 30°
  painter.rotate(30.0 * ((time.hour() + time.minute() / 60.0)));
  painter.drawConvexPolygon(hourHand, 3);
  painter.restore();
 
  painter.setPen(hourColor);
 
  // 繪制小時(shí)線 （360度 / 12 = 30度）
  for (int i = 0; i < 12; ++i) {
    painter.drawLine(88, 0, 96, 0);
    painter.rotate(30.0);
  }
 
  int radius = 100;
  QFont font = painter.font();
  font.setBold(true);
  painter.setFont(font);
  int pointSize = font.pointSize();
 
  // 繪制小時(shí)文本
  int nHour = 0;
  for (int i = 0; i < 12; ++i) {
    nHour = i + 3;
    if (nHour > 12)
      nHour -= 12;
    painter.drawText(textRectF(radius*0.8, pointSize, i * 30), Qt::AlignCenter, QString::number(nHour));
  }
 
  // 繪制分針
  painter.setPen(Qt::NoPen);
  painter.setBrush(minuteColor);
 
  painter.save();
  // 每圈360° = 60m 即：旋轉(zhuǎn)角度 = 分鐘數(shù) * 6°
  painter.rotate(6.0 * (time.minute() + time.second() / 60.0));
  painter.drawConvexPolygon(minuteHand, 3);
  painter.restore();
 
  painter.setPen(minuteColor);
 
  // 繪制分鐘線 （360度 / 60 = 6度）
  for (int j = 0; j < 60; ++j) {
    if ((j % 5) != 0)
      painter.drawLine(92, 0, 96, 0);
    painter.rotate(6.0);
  }
 
  // 繪制秒針
  painter.setPen(Qt::NoPen);
  painter.setBrush(secondColor);
 
  painter.save();
  // 每圈360° = 60s 即：旋轉(zhuǎn)角度 = 秒數(shù) * 6°
  painter.rotate(6.0 * time.second());
  painter.drawConvexPolygon(secondHand, 3);
  painter.restore();
}

好了，注釋寫的很清楚了，就不多做講解了，如果要做一個(gè)應(yīng)用，可以自己實(shí)現(xiàn)一些設(shè)置指針、表盤樣式外觀的一些接口。

注意：網(wǎng)上很多文本都是在旋轉(zhuǎn)之后繪制上去的，效果并不好（6 顯示的是 9），所以請(qǐng)避免這一點(diǎn)！

看完上述內(nèi)容，是不是對(duì)Qt繪制時(shí)鐘的代碼解析有進(jìn)一步的了解，如果還想學(xué)習(xí)更多內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

qt
AI
助
手