QT自定义控件之倒计时控件

1 效果预览

我们首先来看下实现的效果：

右边的表带拉动会使左边的表盘跟随转动，停止后会开启倒计时。

---

2 加载背景图片

先来看下工程目录：

直接绘制背景即可，比较简单，实现代码如下：

ccwindowwidget.h：

#ifndef CCWINDOWWIDGET_H
#define CCWINDOWWIDGET_H

#include <QWidget>

class CCWindowWidget : public QWidget
{
   
   
public:
    explicit CCWindowWidget(QWidget* parent = 0);
    ~CCWindowWidget();
    void paintEvent(QPaintEvent *event);
};

#endif // CCWINDOWWIDGET_H

ccwindowwidget.cpp：

#include "ccwindowwidget.h"
#include <QPainter>
#include <QDebug>
#include <QDesktopWidget>
#include <QApplication>

#define LANUNCHER_WIDTH 436
#define LANUCHER_HEIGHT 775

CCWindowWidget::CCWindowWidget(QWidget* parent) : QWidget(parent)
{
   
   
    setAutoFillBackground(true);
    setMaximumSize(LANUNCHER_WIDTH, LANUCHER_HEIGHT);
    setMinimumSize(LANUNCHER_WIDTH, LANUCHER_HEIGHT);
    setWindowFlags(windowFlags() & ~Qt::WindowMinMaxButtonsHint);

    QDesktopWidget* desktop = QApplication::desktop();
    int startX = (desktop->width() - LANUNCHER_WIDTH) / 2;
    int startY = (desktop->height() - LANUCHER_HEIGHT) / 2;
    setGeometry(startX, startY, LANUNCHER_WIDTH, LANUCHER_HEIGHT);
}

CCWindowWidget::~CCWindowWidget()
{
   
   

}

void CCWindowWidget::paintEvent(QPaintEvent *event)
{
   
   
    QPainter painter(this);

    painter.save();
    painter.drawPixmap(rect(), QPixmap(":/res/images/background.png"));
    painter.restore();
}

---

3 尺子可拉动头部的实现

这里的要点就是当被拉动时，需要发送信号给父部件，让父部件及时感知，并做出相关调整。

相关代码如下：

ccrulerheader.h：

#ifndef QRULERHEADER_H
#define QRULERHEADER_H

#include <QWidget>
#include <QPushButton>
#include <QMouseEvent>

class CCRulerHeader:public QWidget
{
   
   
    Q_OBJECT
public:
    explicit CCRulerHeader(QWidget* parent=0);
    virtual ~CCRulerHeader();

private:
    QPoint      last_mouse_position;

signals:
    void  rulerHeaderMoveSignal(int posY);
    void  rulerHeaderMoveDoneSignal();

protected:
    void mousePressEvent(QMouseEvent* event);
    void mouseMoveEvent(QMouseEvent* event);
    void mouseReleaseEvent(QMouseEvent* event);

    void paintEvent(QPaintEvent* event);
};

#endif // QRULERHEADER_H

ccrulerheader.cpp如下：

#include "ccrulerheader.h"
#include <QPainter>
#include <QDebug>

#define RULERHEADER_WIDTH  82
#define RULERHEADER_HEIGHT 91

CCRulerHeader::CCRulerHeader(QWidget* parent):QWidget(parent)
{
   
   
    setGeometry(0,0,RULERHEADER_WIDTH,RULERHEADER_HEIGHT);
    setStyleSheet("border-image:url(:/images/ImageResources/ruler_head.png)" );
}
CCRulerHeader::~CCRulerHeader()
{
   
   

}
void CCRulerHeader::mousePressEvent(QMouseEvent* event)
{
   
   
    if (event->button() == Qt::LeftButton)
    {
   
   
        last_mouse_position = event->globalPos();
    }
}

void CCRulerHeader::mouseMoveEvent(QMouseEvent* event)
{
   
   
    if (event->buttons() & Qt::LeftButton)
    {
   
   
        const QPoint position =  event->globalPos() - last_mouse_position;
        //qDebug()<<"POSY:"<<last_mouse_position<<""<<event->globalPos()<<" "<< position;
        emit rulerHeaderMoveSignal(position.y());

    }
}

void CCRulerHeader::mouseReleaseEvent(QMouseEvent* event)
{
   
   
    Q_UNUSED(event);
    emit rulerHeaderMoveDoneSignal();
}
void CCRulerHeader::paintEvent(QPaintEvent* event)
{
   
   
    Q_UNUSED(event);
    QPainter painter(this);
    painter.setRenderHint(QPainter::Antialiasing, true);
    painter.save();

    painter.drawPixmap(rect(),QPixmap(":/images/ImageResources/ruler_head.png"));
    painter.restore();

}