Qt绘图之时钟

·前言

Qt简介

Qt 由奇趣科技公司（Trolltech）的两位创始人于1990年着手开发，1995年发布Qt 1.0。2008年,奇趣科技被诺基亚公司收购，Qt也因此成为诺基亚旗下的编程语言工具。在智能手机的冲击下诺基亚大厦轰然倒塌，2012年将 Qt 转让给Digia公司。Digia 是一家总部位于芬兰的IT业务供应商，每天向全球数以百万的人提供通讯技术的及时解决方案，业务涉及电信、工业、贸易、金融等，客户包括诺基亚、索尼爱立信、惠普、甲骨文等全球一流企业。超过1200名研发精英分别位于芬兰、瑞典、爱沙尼亚、俄罗斯、中国等地为客户提供端到端的服务。

正文

准备

硬件：一台电脑

软件：(IDE)Qt Creator 4.5.0（Community）、(版本)Qt5.9.4

创建项目

点击“New Project”创建新项目

如上图所示选择之后点击左下角的choose

自定义项目名称和项目路径

选择引用（Qt的版本）

定义类名、头文件名和源文件名

选择默认

创建成功

需要的头文件

#include <QWidget> // QWidget 类是所有用户界面对象的基类

#include <QPaintEvent> // QPaintEvent 类包含绘制事件的事件参数。

#include <QPainter> // QPainter 类在小部件和其他绘画设备上执行低级绘画

#include <QPen> // QPen 类定义了 QPainter 应该如何绘制形状的线条和轮廓。

#include <QBrush> // QBrush 类定义了 QPainter 绘制的形状的填充模式

#include <QtMath> //这些函数是C或标准模板库中不可用的基本数学运算的部分方便定义

#include <QTimer> // QTimer 类提供重复和单次计时器。

#include <QDebug> // QDebug 类为调试信息提供输出流。

绘制表盘

首先我们要确定绘制表盘需要哪些参数，半径和Π？按照数学的逻辑来说确实没错，不过把它运用到计算机中还是需要有所改变才可以，表盘的制作需要用到void QPainter::drawEllipse(int x, int y, int width, int height)这个函数，这是一个过载功能。以给定的宽度和高度绘制由从 (x, y) 开始的矩形定义的椭圆。

绘制刻度盘

绘制刻度盘我们需要知道每次转动的角度是多少，时钟有12个大的刻度，每个大的刻度有5个小刻度，所有秒钟每秒转动的角度为360/60 = 6°。圆心所在竖线上方向为y轴正半轴，0°参考点为x轴正半轴，顺时针旋转。从12点处开始绘制，那么我们的基础仰角就是90° * 3 = 270°，接下来依次是276°、282°。

绘制指针

时钟的指针分为时针、分针和秒针，原理基本上一模一样， 时针我们将其看作是一个等腰三角形，底边在中心指针圆域中，顶点指向刻度，所以我们需要知道三个点的坐标才可以绘制出时针（三角形）。

流程

首先我们分别通过QTime::currentTime.hour、QTime::currentTime.minute、QTime::currentTime.second获取系统的时、分、秒然后再把值赋给Hs、Ms、Ss，如何实时更新时间呢？我们需要一个定时器QTimer值设为1000，表示每间隔1秒返回一次系统时间。

实现

头文件

#ifndef WIDGET_H

#define WIDGET_H

#include <QWidget>

#include <QPaintEvent>

#include <QPainter>

#include <QPen>

#include <QBrush>

#include <QtMath>

#include <QTimer>

#define Pai 3.14

class Widget : public QWidget

{

    Q_OBJECT

public:

    Widget(QWidget *parent = 0);

    ~Widget();

    void paintEvent(QPaintEvent *);//重写绘制事件函数

    void Init_Parameter();//初始化参数函数

    void Draw_Clock(QPainter *);//绘制时钟

    void Draw_Dial(QPainter *);//绘制刻度盘

    void Draw_Text(QPainter *);//绘制刻度值

    void Draw_Pointer(QPainter *);//绘制 指针

private:

    QTimer *timer;//定时器

    QPoint Center_pos;//时钟圆心坐标

    int R_Edge;//外圆半径

    int R_Inside;//内圆半径

    int R_Center;//中心小圆半径

    int R_Pointer;//中心指针圆半径

    int Div_Max = 12;//大刻度值

    int Div_Min = 5;//小刻度值

    float BaseAngle = 270;//仰角

    int Hs;//时

    int Ms;//分

    int Ss ;//秒

};

#endif // WIDGET_H

.cpp文件

#include "widget.h"

#include <QTime>

#include <QDebug>

Widget::Widget(QWidget *parent)

    : QWidget(parent)

{

    timer = new QTimer(this);

    connect(timer,SIGNAL(timeout()),this,SLOT(update()));//定时调用绘制事件函数

    timer->start(1000);//开启定时器

}

Widget::~Widget()

{

}

void Widget::paintEvent(QPaintEvent *)

{

    QPainter painter(this);

    painter.setRenderHint(QPainter::Antialiasing);//设置抗锯齿

    Draw_Clock(&painter);

    painter.drawEllipse(Center_pos,R_Edge,R_Edge);

}

void Widget::Draw_Clock(QPainter *painter) //绘制时钟（刻度盘、刻度值、指针）

{

    Init_Parameter();

    Draw_Dial(painter);

    Draw_Text(painter);

    Draw_Pointer(painter);

}

void Widget::Init_Parameter()

{

    Center_pos = QPoint(this->width()/2,this->height()/2); 

    R_Edge = this->height()/2; 

    R_Inside = R_Edge-10;

    R_Center = 15;

    R_Pointer = 6;

    QTime Time = QTime::currentTime();//获取当前系统时间

    Hs=Time.hour();

    Ms=Time.minute();

    Ss=Time.second();

}

void Widget::Draw_Dial(QPainter *painter)

{

    painter->save();

    for(int Loop = 0; Loop <= Div_Max*Div_Min; Loop++)

    {

        float Angle = BaseAngle + (360 / (Div_Max * Div_Min))*Loop;

        int R = R_Inside-1;

        int x_start = Center_pos.x() + R * cos((Angle / 180) * Pai);

        int y_start = Center_pos.y() + R * sin((Angle / 180) * Pai);

        if(Loop % Div_Min == 0) //判断大小刻度

        {

            QPen pen(Qt::black);

            pen.setWidth(2);

            painter->setPen(pen);

            R = R_Inside-20;

        }

        else 

        {

            QPen pen(Qt::black);

            pen.setWidth(2);

            painter->setPen(pen);

            R = R_Inside-15;

        }

        int x_end = Center_pos.x() + R * cos((Angle / 180) * Pai);

        int y_end = Center_pos.y() + R * sin((Angle / 180) * Pai);

        painter->drawLine(QPoint(x_start,y_start),QPoint(x_end,y_end)); 

    }

    painter->restore();

}

void Widget::Draw_Text(QPainter *painter)

{

    painter->save();

    QPen qPen(Qt::black);

    qPen.setWidth(2);    

    painter->setPen(qPen);

    QFont qFont("楷体",14,QFont::Bold,false);

    painter->setFont(qFont);

    int Dial_Text = 12;

    for(int Loop = 0;Loop < Div_Max;Loop++)

    {

        if(Dial_Text >12 )

            Dial_Text = 1;

        int R = R_Inside-60;

        float Angle = BaseAngle + (360 / Div_Max )*Loop;

        int x = Center_pos.x() + R * cos((Angle / 180) * Pai);

        int y = Center_pos.y() + R * sin((Angle / 180) * Pai);

        painter->drawText(QRect(x-20,y-20,80,80),QString::number(Dial_Text++));

    }

    painter->restore();

}

void Widget::Draw_Pointer(QPainter *painter)

{

    painter->save();

    QBrush qBrush = QBrush(QColor(Qt::black));

    painter->setBrush(qBrush);

    QPen qPen(Qt::black);

    qPen.setWidth(2);    

    painter->setPen(qPen);

//绘制秒针

    float Angle = BaseAngle + (360 / (Div_Max * Div_Min))*Ss;

    float RightAngle = Angle + 90; 

    float LeftAngle = Angle - 90; 

    int R = R_Inside-1;

    int x_start = Center_pos.x() + R * cos((Angle / 180) * Pai);

    int y_start = Center_pos.y() + R * sin((Angle / 180) * Pai);

    R = R_Pointer-1;

    int x_end1 = Center_pos.x() + R * cos(RightAngle * 3.14 / 180); 

    int y_end1 = Center_pos.y() + R * sin(RightAngle * 3.14 / 180);

    int x_end2 = Center_pos.x() + R * cos(LeftAngle * 3.14 / 180); 

    int y_end2 = Center_pos.y() + R * sin(LeftAngle * 3.14 / 180);

    QPointF qTriangle_S[3] = {QPoint(x_start,y_start),QPoint(x_end1,y_end1),QPoint(x_end2,y_end2)};

    painter->drawPolygon(qTriangle_S,3);

//绘制分针

    Angle = BaseAngle + (360 / (Div_Max * Div_Min))*Ms;

    RightAngle = Angle + 90; 

    LeftAngle = Angle - 90; 

    R = R_Inside-60;

    x_start = Center_pos.x() + R * cos((Angle / 180) * Pai);

    y_start = Center_pos.y() + R * sin((Angle / 180) * Pai);

    R = R_Pointer-1;

    x_end1 = Center_pos.x() + R * cos(RightAngle * 3.14 / 180); 

    y_end1 = Center_pos.y() + R * sin(RightAngle * 3.14 / 180);

    x_end2 = Center_pos.x() + R * cos(LeftAngle * 3.14 / 180); 

    y_end2 = Center_pos.y() + R * sin(LeftAngle * 3.14 / 180);

    QPointF qTriangle_M[3] = {QPoint(x_start,y_start),QPoint(x_end1,y_end1),QPoint(x_end2,y_end2)};

    painter->drawPolygon(qTriangle_M,3);

//绘制时针

    Angle = BaseAngle + (360 / Div_Max)*Hs;

    RightAngle = Angle + 90; 

    LeftAngle = Angle - 90; 

    R = R_Inside-120;

    x_start = Center_pos.x() + R * cos((Angle / 180) * Pai);

    y_start = Center_pos.y() + R * sin((Angle / 180) * Pai);

    R = R_Pointer-1;

    x_end1 = Center_pos.x() + R * cos(RightAngle * 3.14 / 180); 

    y_end1 = Center_pos.y() + R * sin(RightAngle * 3.14 / 180);

    x_end2 = Center_pos.x() + R * cos(LeftAngle * 3.14 / 180); 

    y_end2 = Center_pos.y() + R * sin(LeftAngle * 3.14 / 180);

    QPointF qTriangle_H[3] = {QPoint(x_start,y_start),QPoint(x_end1,y_end1),QPoint(x_end2,y_end2)};

    painter->drawPolygon(qTriangle_H,3);

    painter->restore();

}

效果图

最后附上一首李白的将进酒供大家欣赏：

将进酒

君不见黄河之水天上来，奔流到海不复回。

君不见高堂明镜悲白发，朝如青丝暮成雪。

人生得意须尽欢，莫使金樽空对月。

天生我材必有用，千金散尽还复来。

烹羊宰牛且为乐，会须一饮三百杯⑨。

与君歌一曲，请君为我倾耳听。

钟鼓馔玉不足贵，但愿长醉不复醒。

古来圣贤皆寂寞，惟有饮者留其名。

陈王昔时宴平乐，斗酒十千恣欢谑。

主人何为言少钱，径须沽取对君酌。

五花马、千金裘，呼儿将出换美酒，与尔同销万古愁。