Qt时钟绘制

很多学Qt的伙伴都知道，学习Qt不会不知道QPainter这个函数类是拿来画图的，因此今天就画一个时钟图

步骤：

1.设计无窗口无边框时钟界面

2.设计时钟的显示区域

3.QPainter，Qtimer，QMouseEvent等类的使用

1.设计无窗口无边框时钟界面

这里使用重写鼠标事件的函数，不懂的可以参考我之前写的鼠标事件怎么去做(http://blog.csdn.net/psr1999/article/details/52843327),现在

使用到的鼠标事件更加先进一步，重写mouseMoveEvent(QMouseEvent *)和mousePressEvent(QMouseEvent *)即可。由于本人希望在以后的工程中

依然可以用到这个改写的类，那么现在使用继承的方法另写这两个函数。

新建鼠标事件的独立头文件 QMouseMove.h，代码如下

#define QMOUSEMOVE_H#include <QWidget>#include <QMouseEvent>class QMouseMove : public QWidget{    Q_OBJECTpublic:    explicit QMouseMove(QWidget *parent = 0);protected:    void mouseMoveEvent(QMouseEvent *);    void mousePressEvent(QMouseEvent *);private:    QPoint currectPos;};#endif // QMOUSEMOVE_H</span></strong>

QMouseMove.cpp代码如下：

#include "qmousemove.h"QMouseMove::QMouseMove(QWidget *parent) : QWidget(parent){}void QMouseMove::mouseMoveEvent(QMouseEvent *event){    if (event->buttons() == Qt::LeftButton)    {        move(event->globalPos() - currectPos);        event->accept();    }}void QMouseMove::mousePressEvent(QMouseEvent *event){    if (event->button() == Qt::LeftButton)    {        currectPos = event->globalPos() - frameGeometry().topLeft();        event->accept();    }    if (event->button() == Qt::RightButton)    {        close();    }}</span></strong>

2.由于进行描绘事件，必须使用到paintEvent函数，这是继承QWidget类的一个虚函数，因此必须在项目中记性覆写(overwrite)

另外，继承上述的鼠标事件的改写类，在第3步的代码中大家是可以看见继承的是QMouseMove类，这是本人上述自己改写的鼠标事件类。

同时，由于在本项目中使用到的描绘之间QPainter类，因此需要设置

  a. 描绘的原点坐标

b. 描绘的图像颜色

c. 描绘的伸缩

d. 描绘的反锯齿化等

3.继承这个类到主界面上（我的主界面项目名称为clockPro，类名为ClockTimer）

ClockTimer.h如下

#ifndef COLORTIMER_H#define COLORTIMER_H#include <QWidget>#include "qmousemove.h"QT_BEGIN_NAMESPACEclass QPaintEvent;class QPainter;class Timer;class Time;class QMouseEvent;QT_END_NAMESPACEnamespace Ui {class ColorTimer;}class ColorTimer : public QMouseMove{    Q_OBJECTpublic:    explicit ColorTimer(QWidget *parent = 0);    ~ColorTimer();protected:    void paintEvent(QPaintEvent *);private:    Ui::ColorTimer *ui;};#endif // COLORTIMER_H</span></strong>

相对应的ClockTimer.cpp如下

#include "colortimer.h"#include "ui_colortimer.h"#include <QTimer>#include <QPainter>#include <QTime>#include <QMouseEvent>ColorTimer::ColorTimer(QWidget *parent) :    QMouseMove(parent),    ui(new Ui::ColorTimer){    ui->setupUi(this);    QTimer *timer = new QTimer(this);    connect(timer,SIGNAL(timeout()),this,SLOT(update()));    timer->start(1);    this->setWindowTitle(tr("Color"));    this->resize(600,600);    this->setWindowFlags(Qt::FramelessWindowHint);    // 无边框    this->setAttribute(Qt::WA_TranslucentBackground); //背景透明}ColorTimer::~ColorTimer(){    delete ui;}void ColorTimer::paintEvent(QPaintEvent *event){    Q_UNUSED(event);    static const QPoint hourHand[3] =   /* 时分秒所描绘不规则形状和长度 */    {        QPoint(7,8),        QPoint(-7,8),        QPoint(0,-40)    };    static const QPoint minuteHand[3] =    {        QPoint(7,8),        QPoint(-7,8),        QPoint(0,-70)    };    static const QPoint secondHand[3] =    {        QPoint(7,8),        QPoint(-7,8),        QPoint(0,-80)    };    QColor hourColor(127,0,127);      /* 时分秒描绘的颜色 */    QColor minuteColor(0,127,127,191);    QColor secondColor(0,0,127);    int side = qMin(this->width(),this->height());    QTime time = QTime::currentTime();   //当前系统时间    QPainter painter(this);    painter.translate(this->width()/2,this->height()/2);  //原点    painter.setRenderHint(QPainter::Antialiasing);   // 反锯齿，好看点    painter.scale(side/300.0,side/300.0); //伸缩    /******************** 时钟 ********************/    painter.setPen(Qt::NoPen);    painter.setBrush(hourColor);    painter.save();    painter.rotate(30.0 * (time.hour() + time.minute() / 60.0));  //角度转换30度    painter.drawConvexPolygon(hourHand,3); //描画的形状    painter.restore();    painter.setPen(hourColor);    for(int i = 0;i < 12;i++)  //描画刻度    {        painter.rotate(30.0);        painter.drawLine(80,0,90,0);        painter.drawText(-20, -82, 40, 40,                         Qt::AlignHCenter | Qt::AlignTop,                         QString::number(i+1));    }    /******************** 分钟 ********************/    painter.setPen(Qt::NoPen);    painter.setBrush(minuteColor);    painter.save();    painter.rotate(6.0 * (time.minute() + time.second() / 60.0));    painter.drawConvexPolygon(minuteHand,3);    painter.restore();    painter.setPen(minuteColor);    for(int i = 0; i<60;i++)    {        if(i % 5)            painter.drawLine(82,0,87,0);        painter.rotate(6.0);    }    /******************** 秒钟 ********************/    painter.setPen(Qt::NoPen);    painter.setBrush(secondColor);    painter.save();    painter.rotate(6.0 * time.second());    painter.drawConvexPolygon(secondHand,3);    painter.restore();}

上述的设置结束之后，运行就可以得到以下的结果：

打开之后，因为鼠标事件中我已经设置好右击既可以关闭窗口，不需要再次设置QPushButton类来进行关闭