Qt浅谈之二：钟表(时分秒针)

1. Clock::Clock(QWidget *parent)
2. : QWidget(parent)
3. {
4. QTimer *timer = new QTimer(this);   //声明一个定时器
5. //update()会自动产生重绘消息，调用paintEvent()
6. connect(timer, SIGNAL(timeout()), this, SLOT(update()));  //连接信号槽，定时器超时触发窗体更新
7. timer->start(1000);   //启动定时器
8. setWindowTitle(tr("My Clock"));  //设置窗体名称
9. resize(300, 300);  //设置窗体大小
10. }

1. void Clock::paintEvent(QPaintEvent *event)
2. {
3. //下面三个数组用来定义表针的三个顶点，以便后面的填充
4. static const QPoint hourHand[3] = {
5. QPoint(3, 8),
6. QPoint(-3, 8),
7. QPoint(0, -40)
8. };
9. static const QPoint minuteHand[3] = {
10. QPoint(3, 8),
11. QPoint(-3, 8),
12. QPoint(0, -70)
13. };
14. static const QPoint secondHand[3] = {
15. QPoint(3, 8),
16. QPoint(-3, 8),
17. QPoint(0, -90)
18. };//秒针
19. //填充表针的颜色
20. QColor hourColor(127, 0, 127);  //分针颜色(第四个表示不透明度)
21. QColor minuteColor(0, 127, 127, 191);
22. QColor secondColor(127, 127, 0, 127);
23. //...
24. }

1. {
2. int side = qMin(width(), height());  //绘制的范围(宽、高中最小值)
3. QTime time = QTime::currentTime();   //获取当前的时间
4. QPainter painter(this);              //声明用来绘图用的painter
5. painter.setRenderHint(QPainter::Antialiasing);//绘制的图像反锯齿
6. painter.translate(width() / 2, height() / 2);//重新定位坐标起始点，把坐标原点放到窗体的中央
7. painter.scale(side / 300.0, side / 300.0);//设定画布的边界,用窗体宽高的最小值来计算时钟的大小，防止窗体拉伸导致的时钟变形以及显示不全
8. }

1. {
2. painter.setPen(Qt::red);   //填充时针，不需要边线所以NoPen
3. QString timeStr= QTime::currentTime().toString();     //绘制当前的时间
4. painter.drawText(-40,30,80,30,Qt::AlignHCenter | Qt::AlignTop, timeStr);
5. }

1. {
2. //...
3. painter.setPen(Qt::NoPen);   //填充时针，不需要边线所以NoPen
4. painter.setBrush(hourColor);  //画刷颜色设定
5. painter.save();  //保存painter的状态，保存的是当前的坐标状态，如果不保存，画完之后坐标以改变不方便画下一个
6. painter.rotate(30.0 * ((time.hour() + time.minute() / 60.0))); //将painter（的”视角“）根据时间参数转移(30° * (小时 + 分钟 / 60))
7. painter.drawConvexPolygon(hourHand, 3);  //填充时针的区域
8. painter.restore();
9. //后面的跟前面的类似，分别绘制了分针和秒针，及相应的刻度
10. painter.setPen(Qt::NoPen);
11. painter.setBrush(minuteColor);
12. painter.save();
13. painter.rotate(6.0 * (time.minute() + time.second() / 60.0));  //设旋转(角度 = 6° * (分钟 + 秒 / 60))
14. painter.drawConvexPolygon(minuteHand, 3);  //填充分针部分
15. painter.restore();
16. painter.setPen(Qt::NoPen);
17. painter.setBrush(secondColor);
18. painter.save();
19. painter.rotate(6.0 * time.second());  //设置旋转(6° * 秒)
20. painter.drawConvexPolygon(secondHand, 3);  //设置填充
21. painter.restore();
22. //...
23. }

1. {   //...
2. painter.setPen(minuteColor);
3. for (int j = 0; j < 60; ++j) {  //循环60次，绘制表盘（其实可以从1开始，到59，提高一点效率）
4. if ((j % 5) != 0)           //判断是否能被5整除(能被5整除表示是正点刻度，暂不绘制)
5. painter.drawLine(0, -92, 0, -96);  //不是正点刻度，绘制长4个像素的直线
6. painter.rotate(6.0);   //循环60次，每次旋转6度，所以不用save和restore
7. }
8. painter.setPen(hourColor);    //下面画表示小时的刻度，此时要用到画笔（因为要划线）
9. for (int i = 0; i < 12; ++i) {
10. painter.drawLine(0, -88, 0, -96);     //写上刻度数字
11. if (i == 0)  painter.drawText(-10,-88,20,20,Qt::AlignHCenter | Qt::AlignTop,QString::number(12));
12. else  painter.drawText(-10,-88,20,20,Qt::AlignHCenter | Qt::AlignTop,QString::number(i));
13. painter.rotate(30.0);
14. }
15. }

1. {
2. //...
3. painter.setPen(Qt::NoPen);
4. painter.setBrush(secondColor);
5. painter.save();
6. painter.rotate(6.0 * time.second());  //设置旋转(6° * 秒)
7. painter.drawConvexPolygon(secondHand, 3);  //设置填充
8. painter.restore();
9. painter.setBrush(Qt::black);
10. painter.drawEllipse(QPoint(0,0),2,2);
11. painter.setBrush(Qt::NoBrush);
12. painter.setPen(Qt::black);
13. painter.drawEllipse(QPoint(0,0),97,97);
14. //...
15. }

1. static const QPoint hourHand[4]   ={QPoint(0,10),QPoint(-1,-30),QPoint(0,-60),QPoint(1,-30)};
2. static const QPoint minuteHand[4] ={QPoint(0,10),QPoint(-1,-40),QPoint(0,-70),QPoint(1,-40)};
3. static const QPoint secondHand[4] ={QPoint(0,10),QPoint(-1,-60),QPoint(0,-90),QPoint(1,-60)};
4. QColor hourColor(255,0,0);
5. QColor minuteColor(0,127,127);
6. QColor secondColor(0,0,255);

实现效果如下图5所示：（无外边框）