标签：qt开发 绘图实例-钟表

QT开发（十六）——QT绘图实例-钟表

一、钟表实现原理

    钟表的实现需要设置定时器，定时器每隔一秒发送timeout()信号到QWidget::update()槽函数，update()槽函数将会重绘一次窗口，重写重绘事件函数paintEvent(QPaintEvent *event)，根据获取的当前系统时间的时钟、分钟、秒钟重绘钟表的时针、分针、秒针。

    QTimer *timer = new QTimer(this);

    timer->start(1000);//一秒钟

    connect(timer,SIGNAL(timeout()),this,SLOT(update()));

    setWindowTitle("The Clock");

二、钟表的界面绘制

    钟表由时针、分针、秒针、刻度盘组成，绘制时针、分针、秒针、刻度盘刻度线需要翻转坐标系，因此在绘制前需要先保存当前的坐标系状态，对坐标系进行翻转需要的角度后绘制图形，绘制完成后需要恢复坐标系的状态。

1、时针绘制

    确定组成时针的四个点，使用drawConvexPolygon函数绘制出四边形时针。

    const QPoint Clock::hourHand[4] = {

        QPoint(3, 5),

        QPoint(0, 13),

        QPoint(-3, 5),

        QPoint(0, -40)

        };

    QPainter painter(this);

    painter.setBrush(Qt::black);

    painter.setPen(Qt::black);

    painter.drawConvexPolygon(hourHand,4);//绘制时针

2、分针绘制

确定组成分针的四个点，使用drawConvexPolygon函数绘制出四边形分针。

    const QPoint Clock::minuteHand[4] = {

        QPoint(3, 5),

        QPoint(0, 16),

        QPoint(-3, 5),

        QPoint(0, -70)

        };

    QPainter painter(this);

    painter.setBrush(Qt::black);

    painter.setPen(Qt::black);

    painter.drawConvexPolygon(minuteHand,4);//绘制分针

3、秒针绘制

确定组成秒针的四个点，使用drawConvexPolygon函数绘制出四边形秒针。

    const QPoint Clock::secondHand[4] = {

        QPoint(3, 5),

        QPoint(0, 18),

        QPoint(-3, 5),

        QPoint(0, -90)

        };

    QPainter painter(this);

    painter.setBrush(Qt::black);

    painter.setPen(Qt::black);

    painter.drawConvexPolygon(secondHand,4);//绘制秒针

4、钟表刻度盘绘制

    钟表刻度盘分为时钟刻度和分钟刻度，分钟刻度每隔一分钟一根刻度线，因此坐标轴系统顺时针旋转6°时为一个分钟刻度，但是由于时钟刻度线与分钟刻度线重合，每隔30°的分钟刻度线同时也为时钟刻度线。

void Clock::drawClockDial(QPainter *painter)
{
     for (int i = 1; i <=60; ++i)
    {
        painter->save();
        painter->rotate(6*i);//坐标轴旋转6度
        if (i % 5 == 0)
        {
            painter->setPen(hourHandPen);
            painter->drawLine(0, -98, 0, -82);
            painter->drawText(-20, -82, 40, 40,
              Qt::AlignHCenter | Qt::AlignTop,QString::number(i/5));
        }
        else
        {
            painter->setPen(minuteHandPen);
            painter->drawLine(0, -98, 0, -88);
        }
        painter->restore();//绘制图形后复位坐标系
    }
}

三、钟表的业务逻辑

钟表正确计时必须依赖于获取系统时间，根据获取的系统时间计算出的时钟、分钟、秒钟的数重绘时针、分针、秒针。

1、时针的重绘

    时针指向的位置需要计算时针偏转的角度，每两个时钟刻度线相隔30°，因此根据获取的系统时间计算出的小时数与30相乘即可等到时针需要顺时针偏转的角度。

    30.0*(time.hour()+time.minute()/60.0)

    时针重绘代码：

    QTime time = QTime::currentTime();

    painter->setBrush(Qt::black);

    painter->setPen(Qt::black);

    painter->save();

    painter->rotate(30.0*(time.hour()+time.minute()/60.0));

    painter->drawConvexPolygon(hourHand,4);//绘制时针

    painter->restore();//绘制图形后复位坐标系

2、分针的重绘

    分针指向的位置需要计算分针偏转的角度，每两个分钟刻度线相隔6°，因此根据获取的系统时间计算出的分钟数与6相乘即可等到分针需要顺时针偏转的角度。

    6.0*(time.minute()+time.second()/60.0)

    分针重绘代码：

    QTime time = QTime::currentTime();

    painter->setBrush(Qt::blue);

    painter->setPen(Qt::blue);

    painter->save();

    painter->rotate(6.0*(time.minute()+time.second()/60.0));

    painter->drawConvexPolygon(minuteHand,4);//绘制分针

    painter->restore();//绘制图形后复位坐标系

3、秒针的重绘

    秒针指向的位置需要计算秒针偏转的角度，秒针指向的是分钟刻度线，每两个分钟刻度线相隔6°，因此根据获取的系统时间计算出的秒钟数与6相乘即可等到秒针需要顺时针偏转的角度。

    6.0*time.second()

    分针重绘代码：

    QTime time = QTime::currentTime();

    painter->setBrush(Qt::red);

    painter->setPen(Qt::red);

    painter->save();//保存坐标系，防止坐标系跑偏了

    painter->rotate(6.0*time.second());//注意是6.0，不是6

    painter->drawConvexPolygon(secondHand,4);//绘制秒针

    painter->restore();//绘制图形后复位坐标系

四、代码实现

Clock.h文件：

#ifndef CLOCK_H
#define CLOCK_H
#include <QtGui/QWidget>
#include <QPaintEvent>
#include <QPainter>
#include <QTime>
#include <QTimer>
#include <QPen>
#include <QFont>
class Clock : public QWidget
{
    Q_OBJECT
    
public:
    Clock(QWidget *parent = 0);
    ~Clock();
private:
    static const QPoint hourHand[4];
    static const QPoint minuteHand[4];
    static const QPoint secondHand[4];
    QPen hourHandPen;
    QPen minuteHandPen;
    QFont font;
protected:
    void paintEvent(QPaintEvent *event);
    void drawHourHand(QPainter *painter);
    void drawMinuteHand(QPainter *painter);
    void drawsecondHand(QPainter *painter);
    void drawClockDial(QPainter *painter);
};
#endif // CLOCK_H

Clock.cpp文件：

#include "Clock.h"
const QPoint Clock::hourHand[4] = {
    QPoint(3, 5),
    QPoint(0, 13),
    QPoint(-3, 5),
    QPoint(0, -40)
};
const QPoint Clock::minuteHand[4] = {
    QPoint(3, 5),
    QPoint(0, 16),
    QPoint(-3, 5),
    QPoint(0, -70)
};
const QPoint Clock::secondHand[4] = {
    QPoint(3, 5),
    QPoint(0, 18),
    QPoint(-3, 5),
    QPoint(0, -90)
};
Clock::Clock(QWidget *parent)
    : QWidget(parent)
{
    hourHandPen = QPen(palette().foreground(), 2.0);//设置小时刻度线为粗黑
    minuteHandPen = QPen(palette().foreground(), 1.0);//设置分钟刻度线为灰
    font.setPointSize(10);//字体大小设置为10
    setFont(font);
    QTimer *timer = new QTimer(this);
    timer->start(1000);//一秒钟
    connect(timer,SIGNAL(timeout()),this,SLOT(update()));
    setWindowTitle("The Clock");
    resize(360, 360);
}
Clock::~Clock()
{
}
void Clock::paintEvent(QPaintEvent *event)
{
    QPainter painter(this);
    painter.setRenderHint(QPainter::Antialiasing, true);
    int side = qMin(width(), height());
    painter.setViewport((width() - side) / 2, (height() - side) / 2,
                        side, side);
    painter.setWindow(0, 0, 200, 200);
    painter.translate(100,100);//重新设定坐标原点
    drawClockDial(&painter);
    drawHourHand(&painter);
    drawMinuteHand(&painter);
    drawsecondHand(&painter);
    painter.setBrush(Qt::black);
    painter.drawEllipse(QPoint(0,0),3,3);
}
void Clock::drawHourHand(QPainter *painter)
{
    QTime time = QTime::currentTime();
    painter->setBrush(Qt::black);
    painter->setPen(Qt::black);
    painter->save();
    painter->rotate(30.0*(time.hour()+time.minute()/60.0));
    painter->drawConvexPolygon(hourHand,4);//绘制时针
    painter->restore();//绘制图形后复位坐标系
}
void Clock::drawMinuteHand(QPainter *painter)
{
    QTime time = QTime::currentTime();
    painter->setBrush(Qt::blue);
    painter->setPen(Qt::blue);
    painter->save();
    painter->rotate(6.0*(time.minute()+time.second()/60.0));
    painter->drawConvexPolygon(minuteHand,4);//绘制分针
    painter->restore();//绘制图形后复位坐标系
}
void Clock::drawsecondHand(QPainter *painter)
{
    QTime time = QTime::currentTime();
    painter->setBrush(Qt::red);
    painter->setPen(Qt::red);
    painter->save();//保存坐标系，防止坐标系跑偏了
    painter->rotate(6.0*time.second());//注意是6.0，不是6
    painter->drawConvexPolygon(secondHand,4);//绘制秒针
    painter->restore();//绘制图形后复位坐标系
}
void Clock::drawClockDial(QPainter *painter)
{
    //绘制钟表刻度盘和数字
    for (int i = 1; i <=60; ++i)
    {
        painter->save();
        painter->rotate(6*i);//坐标轴旋转6度
        if (i % 5 == 0)
        {
            painter->setPen(hourHandPen);
            painter->drawLine(0, -98, 0, -82);
            painter->drawText(-20, -82, 40, 40,
                              Qt::AlignHCenter | Qt::AlignTop,
                              QString::number(i/5));
        }
        else
        {
            painter->setPen(minuteHandPen);
            painter->drawLine(0, -98, 0, -88);
        }
        painter->restore();//绘制图形后复位坐标系
    }
}

Main.cpp文件：

#include <QtGui/QApplication>
#include "Clock.h"
int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    Clock w;
    w.show();
    return a.exec();
}

本文出自 “生命不息，奋斗不止” 博客，谢绝转载！

QT开发（十六）——QT绘图实例-钟表

标签：qt开发 绘图实例-钟表

原文地址：http://9291927.blog.51cto.com/9281927/1868758