欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

利用qt制作时钟

程序员文章站 2022-05-30 09:36:34
...

我们需要利用代码来进行一个时钟的制作,用窗口来显示。

首先需要通过QPainter类来在painterEvent()函数中来绘制钟表,以下是此类的一些基础函数。
介绍一些绘制图形函数:
drawPoint() 绘制点
drawLine() 绘制线
drawRect() 绘制矩形
drawEllipse() 绘制椭圆(绘制圆也是此函数)
drawConvexPolygon() 绘制凸多边形
drawText() 编制文本

还有QPainter类的某些角色
QPen:绘制几何图形的边缘,可绘制颜色,宽度,线的风格等
QBrush:用于几何图形的调色板与填充

则可借用setPen()来当做画笔来使用。
setBrush()来当做填充器使用来填充颜色。

setPen(color);
然后我们的绘制将会用此颜色的画笔来绘制图形边缘。
setBrush(color);
之后我们的绘制图形时,我们将用此颜色来填充。
其中颜色的定义:

QColor color1(0,0,0);//其中的三个数字分别代表的颜色的R.G.B码

QPainter类绘制时初始坐标为左上角顶点,此处为(0,0)
我们可以通过

painter.translate(x,y);

来重新确立坐标原点

以下是dialog.cpp的完整代码

#include "dialog.h"
#include "ui_dialog.h"
#include<QPainter>
#include<QTime>
#include<QTimer>
#include<QPixmap>

Dialog::Dialog(QWidget *parent)
    : QDialog(parent)
    , ui(new Ui::Dialog)
{
    ui->setupUi(this);
    resize(700,500);//程序框大小
    
    //计时器的使用
    QTimer *timer = new QTimer(this);
    connect(timer,SIGNAL(timeout()),this,SLOT(update()));
     timer->start(1);
}

Dialog::~Dialog()
{
    delete ui;
}

void Dialog::paintEvent(QPaintEvent *event)
{


    //指针的形状四边形绘制定义指针的四点
    static const  QPoint hourHand[4] = {        QPoint(4,1),        QPoint(-4,1),        QPoint(-1,-35)  ,QPoint(1,-35)  };
    static const  QPoint minuteHand[4] =    {        QPoint(3,1),        QPoint(-3,1),        QPoint(-1,-60)  ,QPoint(1,-60)  };
    static const  QPoint secondHand[4] =    {        QPoint(2,1),        QPoint(-2,1),        QPoint(-1,-80) ,QPoint(1,-80)   };

    //颜色的定义
    QColor color(0,0,0);
    QColor color1(123,34,23);
    QColor color2(255,255,153);

    QPainter painter(this);

    //调用资源绘制背景图
    QPixmap map(":/new/prefix1/beijing/123.png");
    QRect q(0,0,1000,675);
    QRect q1(0,0,width(),height());
    painter.drawPixmap(q1,map,q);

    //更换坐标原点
    painter.translate(550,200);

    //首先我们通过 setRenderHint() 来设置反走样,否则绘制出来的线条会出现锯齿
    painter.setRenderHint(QPainter::Antialiasing);


    painter.drawEllipse(-90,-90,180,180);//钟的最外层圆绘制
  
    painter.setPen(Qt::NoPen);
    painter.setBrush(color);
    painter.drawEllipse(-4,-4,8,8);//钟的中心原点,用一个黑色圆把指针尾巴覆盖

    QTime time = QTime::currentTime();//校准系统时间

     //时针的绘制
     painter.setPen(Qt::NoPen);
     painter.setBrush(color);
     painter.save();//用来保存painter的状态
     painter.rotate(30.0 * (time.hour() + time.minute() / 60.0));
     painter.drawConvexPolygon(hourHand,4);
     painter.restore();//恢复到初始坐标原点的状态

      //描绘大刻度上的数字
     painter.setPen(color);
     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(color1);
     painter.save();
     painter.rotate(6.0 * (time.minute() + time.second() / 60.0));
     painter.drawConvexPolygon(minuteHand,4);
     painter.restore();

      //小刻度
     painter.setPen(color1);
     for(int i = 0; i<60;i++)
     {        if(i % 5)
         painter.drawLine(85,0,90,0);
         painter.rotate(6.0);
     }
     
     //秒针的绘制
     painter.setPen(Qt::NoPen);
     painter.setBrush(color2);
     painter.save();
     painter.rotate(6.0 * time.second());
     painter.drawConvexPolygon(secondHand,4);
     painter.restore();

}

dialog.h的代码

#ifndef DIALOG_H
#define DIALOG_H

#include <QDialog>

QT_BEGIN_NAMESPACE
namespace Ui { class Dialog; }
QT_END_NAMESPACE

class Dialog : public QDialog
{
    Q_OBJECT


public:
    Dialog(QWidget *parent = nullptr);
    ~Dialog();

    void paintEvent(QPaintEvent*event);
private:
    int rotate;
    Ui::Dialog *ui;
};
#endif // DIALOG_H

最终的效果图
利用qt制作时钟


QPainter类的具体绘制用法在此有更多讲解


R.G.B颜色对照表

相关标签: qt绘制时钟 qt5