Qt設計時鐘效果

作為一位Qt的初學者，也是一位程式設計的小白，我今天想教大家如何使用Qt來設計一個時鐘。

首先，我們要學習如何繪圖――QPainter類

QPainter通常在一個視窗的重繪事件（paint event）的處理函式paintEvent中進行繪製。QPainter類常用的功能有以下幾類：

1）設定繪圖工具。包括設定畫筆（setPen），設定畫刷（setBrush），設定字型（setFont）以及設定背景（setBackgroundMode）。
 

2）繪製圖形和文字，如圖：

QPainter部分畫圖函式的例項：

  //(1)繪製線段  painter->drawLine(20,20,100,120);  //畫一條(20,20)到(100,120)的線段    //(2)繪製圓或者橢圓  painter->drawEllipse(20,20,210,160);  //第一二個引數表示橢圓外切矩形左上角的座標，第三四個引數表示外切矩形的寬度和高度    //(3)繪製矩形  painter->drawReact(20,20,210,160);  //第一二個引數表示橢圓外切矩形左上角的座標，第三四個引數表示矩形的寬度和高度

開始畫時鐘

1）新建基於MainWindow類的應用程式。
 2）在.h檔案中新增變數和函式宣告

  float radious;//時鐘半徑    int xSecond,ySecond,xHour,yHour,xMinute,yMinute;  int xCenter,yCenter;// 時鐘中心座標  int second,minute,hour;//時分秒的實際數字  void CalcPostion();//計算指標座標的函式  void timerEvent(QTimerEvent*);  void paintEvent(QPaintEvent*event);  void drawClockDial(QPainter *painter);

3）在.cpp檔案中新增所需的標頭檔案，巨集定義以及計算三種指標針尖座標的函式

  #include "mainwindow.h"  #include#include#define PI 3.14159265

  void MainWindow::CalcPostion()  {   double minuteHandLen,secondHandLen,hourHandLen;   secondHandLen=radious*0.8;   minuteHandLen=radious*0.65;   hourHandLen=radious*0.5;//時分秒針的長度   //秒針的位置   xSecond=xCenter+secondHandLen*cos(second*PI/30-PI/2);   ySecond=yCenter+secondHandLen*sin(second*PI/30-PI/2);   //分針的位置   xMinute=xCenter+minuteHandLen*cos(minute*PI/30-PI/2);   yMinute=xCenter+minuteHandLen*sin(minute*PI/30-PI/2);   //時針的位置   xHour=xCenter+hourHandLen*cos((hour+1.0*minute/60)*PI/6-PI/2);   yHour=yCenter+hourHandLen*sin((hour+1.0*minute/60)*PI/6-PI/2);  }

4）在.cpp中的建構函式中新增初始化程式碼

  MainWindow::MainWindow(QWidget *parent)   : QMainWindow(parent)  {   radious=200;//半徑200   xCenter=200;   yCenter=200;//圓心(200,200)   hour=3,minute=56,second=35;//初試時間3:56:35   CalcPostion();   startTimer(100);//方便觀察，加速10倍   resize(400,400);//視窗大小400*400  }

5）在.cpp檔案中新增錶盤，指標，以及進位函式

  void MainWindow::timerEvent(QTimerEvent *event)  {   CalcPostion();//計算位置   second++;   if(second==60)   {    second=0;    minute++;   }//分增加   if (minute==60)   {    minute=0;    hour++;   }//時增加   update();  }  void MainWindow::paintEvent(QPaintEvent *event)  {   QPainter painter(this);   QPixmap map("://res/01.jpg");//加入錶盤   QRect q(0,0,400,400);   painter.drawPixmap(q,map,q);   QPen pen;   painter.drawEllipse(QPointF(200.0,200.0),radious,radious);//畫圓   painter.drawLine(xCenter,yCenter,xSecond,ySecond);//秒針   pen.setWidth(2);   painter.setPen(pen);   painter.drawLine(xCenter,yCenter,xMinute,yMinute);//分針   pen.setWidth(4);   painter.setPen(pen);   painter.drawLine(xCenter,yCenter,xHour,yHour);//時針  }  MainWindow::~MainWindow()  {   delete ui;  }

6）main檔案：

  #include "mainwindow.h"    #includeint main(int argc, char *argv[])  {   QApplication a(argc, argv);   MainWindow w;   w.show();   return a.exec();  }

至此，時鐘就完成了，效果圖：

總結：

1）製作時鐘就是簡單地二維畫圖和定時器的結合，難度不高，易上手，可以多嘗試。
 2）在計算針尖的座標時，注意Qt的座標X軸橫向向右為正，Y軸垂直向下為正，順時針度數增加，不然很容易算錯。
 3）新增錶盤（新增圖片）在我上一個部落格有詳細講解，不會的同學可以去翻翻。

文中一些理論知識選自 清華大學出版社 仇國巍 《Qt圖形介面程式設計入門》

最後，作為一名萌新，如果有大佬發現文章中有不正確的地方可以及時提出，也可以提出你們寶貴的建議，大家共同成長。