[Qt]动态时钟实现

介绍

用Qt实现一个与系统事件同步的可视化时钟,效果如下:

1. 涉及知识

1. painterEvent
2. 一个设备只能有一个QPainter
3. save()保存当前painter状态,restore()将状态恢复至save()处所存状态,二者成对出现(否则会产生警告)
4. 可以通过改变坐标系实现图形的移动与旋转

2. 效果展示

3. 实现过程

1. 绘制背景

QPainter painter(this);
painter.drawPixmap(0, 0, this->width(), this->height(),\ QPixmap(":/img/background.jpg"));

2. 绘制表盘

//设置画笔
QPen pen;
pen.setWidth(2);
pen.setColor(Qt::white);
pen.setStyle(Qt::DashLine);

//设置画刷
QBrush brush;
brush.setColor(QColor(255, 255, 255, 120));
brush.setStyle(Qt::SolidPattern);
painter.setPen(pen);
painter.setBrush(brush);
painter.drawEllipse(QPoint(200, 200), 150, 150);

//绘制圆形
painter.drawEllipse(QPoint(200, 200), 150, 150);

2. 刻度

//painter移动
painter.translate(200, 200); //painter移动
//刻钟线
pen.setStyle(Qt::SolidLine);
pen.setWidth(3);
painter.setPen(pen);
for(int i=0;i<4;i++){
painter.drawLine(130, 0, 150, 0);
painter.rotate(90); //旋转坐标系
}
//小时线
pen.setWidth(2);
for(int i=0;i<12;i++){
painter.drawLine(140, 0, 150, 0);
painter.rotate(30); //旋转坐标系
}

3. 指针

//秒针
painter.setBrush(QColor(150, 150, 150, 100));
painter.setPen(Qt::NoPen);
//先变换坐标系,再绘图,否则图不会刷新变化
painter.rotate(6*time.second());
static const QPoint handsec[4] = {QPoint(-5, 0), QPoint(0, -120), QPoint(5, 0), QPoint(0, 15)};
painter.drawConvexPolygon(handsec, 4);

4. 动态刷新
   tips: 通过转动坐标系实现指针旋转

//创建计时器
QTimer *timer = new QTimer(this);
timer->start(10); //计时器时间间隔为1s
connect(timer, SIGNAL(timeout()), this, SLOT(update())); //每秒刷新
QTime time = QTime::currentTime(); //获取当前系统时间
//秒针转动
painter.save(); //状态保存
painter.setBrush(QColor(150, 150, 150, 100));
painter.setPen(Qt::NoPen);
//计算秒针每秒旋转的角度先变换坐标系,再绘图,否则图不会刷新变化
painter.rotate(6*time.second());
static const QPoint handsec[4] = {QPoint(-5, 0), QPoint(0, -120), QPoint(5, 0), QPoint(0, 15)};
painter.drawConvexPolygon(handsec, 4);
painter.restore(); //恢复坐标系,确保下次绘制角度计算正确