Qt绘图:时钟

效果展示

我们需要实现如下效果:时间就是当前的系统时间

代码

widget.h

#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>
#include <QPaintEvent>	//绘图事件
#include <QDebug>		//测试
#include <QPainter>	//画家
#include <QPen>	//笔
#include <QBrush>	//画刷
#include <QPoint>	//点
#include <QTime>	//能系统时间
#include <QTimer>	//定时器
namespace Ui {
class Widget;
}

class Widget : public QWidget
{
    Q_OBJECT

public:
    explicit Widget(QWidget *parent = 0);
    ~Widget();

private:
    Ui::Widget *ui;

protected:
    void paintEvent(QPaintEvent *event);
};

#endif // WIDGET_H

widget.cpp

#include "widget.h"
#include "ui_widget.h"

Widget::Widget(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::Widget)
{
    ui->setupUi(this);
    //初始化定义
    QTimer *timer = new QTimer(this);
    connect(timer,SIGNAL(timeout()),this,SLOT(update()));
    timer->start(1000);
}

Widget::~Widget()
{
    delete ui;
}
void Widget::paintEvent(QPaintEvent *event){
    QPainter painter(this); //画家
    QPen pen(QColor(Qt::black));
    QBrush brush(QColor(Qt::white));       //画刷
    pen.setWidth(5);   //笔大小
    //画家拿笔和刷子
    painter.setPen(pen);
    painter.setBrush(brush);
    //反锯齿 让指针更加平滑
    painter.setRenderHint(QPainter::Antialiasing);
    //把中心点移到0 0 因为旋转是要围绕坐标(0,0)旋转
    painter.translate(width()/2, height()/2);

    painter.drawEllipse(QPoint(0,0),160,160);  //半径160px的圆
    painter.drawPoint(0,0);     //中心点

    //画刻度
    painter.drawLine(0,-160,0,-140);
    int line_h;
    for(int i=1; i<=60; i++){
        line_h = -150;  //短刻度
        painter.save();
        painter.rotate(i*6);
        if(i % 5 == 0){
            line_h = -140;  //长刻度
            //qDebug()<<i;
            painter.drawText(-5,-125,tr("%1").arg(i/5)); //画 文本
        }
        painter.drawLine(0,-160,0,line_h);
        painter.restore();
    }
    //获取时间
    QTime time = QTime::currentTime();
    //qDebug()<<time.hour()<<":"<<time.minute()<<":"<<time.second();
    //画秒针
    painter.save();     //先保存之前的操作
    painter.rotate(6.0*time.second());
    pen.setWidth(2);    //设置笔粗细
    painter.setPen(pen);    //画家再次拿笔
    painter.drawLine(0,0,0,-100);   //(0,0)开始 到坐标(0,100)
    painter.restore();  //恢复
    //画 分针
    painter.save();
    painter.rotate(6.0*time.minute()+6.0*time.second()/60);
    pen.setWidth(4);
    painter.setPen(pen);
    painter.drawLine(0,0,0,-80);
    painter.restore();
    //画 时针
    painter.save();
    painter.rotate(30*time.hour()+6.0*time.minute()/60);
    pen.setWidth(6);
    painter.setPen(pen);
    painter.drawLine(0,0,0,-40);
    painter.restore();
}

重点解析

1.画一个静态圆
2.画刻度，怎么让它旋转
3.如何让时针 分针 秒针旋转
4.如何获取系统时间

获取系统时间

    //获取时间
    QTime time = QTime::currentTime();
    //qDebug()<<time.hour()<<":"<<time.minute()<<":"<<time.second();

设置定时器

    //初始化的时候定义
    QTimer *timer = new QTimer(this);
    connect(timer,SIGNAL(timeout()),this,SLOT(update()));
    timer->start(1000);

使用绘图事件画钟表

void Widget::paintEvent(QPaintEvent *event){
    QPainter painter(this); //画家
    QPen pen(QColor(Qt::black));
    QBrush brush(QColor(Qt::white));       //画刷
    pen.setWidth(5);   //笔大小
    //画家拿笔和刷子
    painter.setPen(pen);
    painter.setBrush(brush);
    //反锯齿 让指针更加平滑
    painter.setRenderHint(QPainter::Antialiasing);
    //把中心点移到0 0 因为旋转是要围绕坐标(0,0)旋转
    painter.translate(width()/2, height()/2);

    painter.drawEllipse(QPoint(0,0),160,160);  //半径160px的圆
    painter.drawPoint(0,0);     //中心点

    //画刻度
    painter.drawLine(0,-160,0,-140);
    int line_h;
    for(int i=1; i<=60; i++){
        line_h = -150;  //短刻度
        painter.save();
        painter.rotate(i*6);
        if(i % 5 == 0){
            line_h = -140;  //长刻度
            //qDebug()<<i;
            painter.drawText(-5,-125,tr("%1").arg(i/5)); //画 文本
        }
        painter.drawLine(0,-160,0,line_h);
        painter.restore();
    }
}

坐标系统 旋转

    //画秒针
    painter.save();     //先保存之前的操作
    painter.rotate(6.0*time.second());
    pen.setWidth(2);    //设置笔粗细
    painter.setPen(pen);    //画家再次拿笔
    painter.drawLine(0,0,0,-100);   //(0,0)开始 到坐标(0,100)
    painter.restore();  //恢复