Qt繪制時(shí)鐘效果

更新時(shí)間：2020年05月30日 09:07:11 作者：weixin_33695450

這篇文章主要為大家詳細(xì)介紹了Qt繪制時(shí)鐘效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

簡(jiǎn)述

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

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

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

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

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

示例

效果

源碼

首先，我們構(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)！

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: