Qt浅谈之四十二钟表摆动显示百分比

一、简介

        Qt下利用定时器实现指针指示百分比的钟摆的动态显示效果，可以适用于显示百分比或进度条的进度或时间的刻度值（在圆形进度条上的一种改进）。效果如下：

二、详解

1、代码

（1）DashboardDisplay.h

#ifndef DASHBOARDPROCESS_H
#define DASHBOARDPROCESS_H

#include <QtCore>
#include <QtGui>

class DashboardProcess : public QWidget
{
    Q_OBJECT

public:
    DashboardProcess(QWidget *parent = 0);
    ~DashboardProcess();
    void setUsedValue(int value);
    void setSize(int width, int height);

protected:
    void paintEvent(QPaintEvent *event);
    void resizeEvent (QResizeEvent * event);
    void mousePressEvent(QMouseEvent *event);
    void mouseMoveEvent(QMouseEvent *event);
    void mouseReleaseEvent(QMouseEvent *event);
    void showEvent(QShowEvent *event);
    void hideEvent(QHideEvent *event);

private slots:
    void slotUpdateTimer();
    void slotGapTimer();

private:
    QPoint beginDrag;
    bool bPressFlag;
    int typeDisplay;

    QPixmap pointPix;
    int userdVaule;
    int currentValue;
    QLabel *currentValueLabel;

    QTimer *updateTimer;
    QTimer *gapTimer;
    int gap;
    int gapCount;
};

#endif // WIDGET_H

（2）DashboardDisplay.cpp

#include "DashboardDisplay.h"
#define LOOPCOUNT 8
DashboardProcess::DashboardProcess(QWidget *parent)
    : QWidget(parent, Qt::FramelessWindowHint)
    ,bPressFlag(false)
    , currentValue(0)
    , gap(0)
    , gapCount(LOOPCOUNT)
{
    QTextCodec *codec = QTextCodec::codecForName("utf8");
    QTextCodec::setCodecForLocale(codec);
    QTextCodec::setCodecForCStrings(codec);
    QTextCodec::setCodecForTr(codec);
    resize(159, 159);
    setAutoFillBackground(false);
    QPalette pal = palette();
    pal.setColor(QPalette::Background, QColor(0xFF,0xFF,0xFF,0xFF));
    setPalette(pal);
    pointPix.load(":/dashboard_pointer_bg.png");

    currentValueLabel = new QLabel(tr("0%"), this);
    currentValueLabel->setFont(QFont("Arial", 10, QFont::Normal));
    currentValueLabel->setAlignment(Qt::AlignCenter);
    currentValueLabel->setStyleSheet("color:#19649f");

    updateTimer = new QTimer(this);
    updateTimer->setInterval(8);
    connect(updateTimer, SIGNAL(timeout()), this, SLOT(slotUpdateTimer()));

    gapTimer = new QTimer(this);
    gapTimer->setInterval(10);
    connect(gapTimer, SIGNAL(timeout()), this, SLOT(slotGapTimer()));
}

DashboardProcess::~DashboardProcess()
{
    if (updateTimer->isActive()) {
        updateTimer->stop();
    }
    if (gapTimer->isActive()) {
        gapTimer->stop();
    }
}

void DashboardProcess::setUsedValue(int value)
{
    userdVaule = value;
}

void DashboardProcess::showEvent(QShowEvent *event)
{
    if (userdVaule > 0) {
        updateTimer->start();
    }
    gap = 0;
    gapCount = LOOPCOUNT;
    currentValue = 0;
}

void DashboardProcess::hideEvent(QHideEvent *event)
{
    if (updateTimer->isActive()) {
        updateTimer->stop();
    }
    if (gapTimer->isActive()) {
        gapTimer->stop();
    }
    currentValue = 0;
    gap = 0;
    gapCount = LOOPCOUNT;
}

void DashboardProcess::slotUpdateTimer()
{
    if (currentValue >= userdVaule) {
        currentValue = userdVaule;
        updateTimer->stop();
        --gapCount;
        gap = gapCount*4;
        gapTimer->start();
    }
    else {
        ++currentValue;
    }
    if (currentValue >= 0) {
        currentValueLabel->setText(QString("%1%").arg(currentValue));
    }
    update();
}

void DashboardProcess::slotGapTimer()
{
    if (gap < 0) {
        gapTimer->stop();
        --gapCount;
        if (gapCount > 0) {
            gapTimer->start();
            gap = gapCount * 4;
        }
        return;
    }
    --gap;
    update();
}

void DashboardProcess::paintEvent(QPaintEvent *event)
{
    QPainter painter(this);
    QColor usedColor(165, 220, 62);
    QColor freeColor(215, 215, 215);
    painter.setRenderHint(QPainter::Antialiasing);
    painter.setRenderHint(QPainter::SmoothPixmapTransform);

    painter.save();
    painter.translate(width() / 2, height() / 2);
    painter.rotate(42);
    painter.setPen(QPen(usedColor, 2));
    for (int i = 0; i < currentValue ; ++i) {
        painter.drawLine(0, 60, 0, 70);
        painter.rotate(2.8);
    }
    painter.setPen(QPen(freeColor, 2));
    for (int i = currentValue; i < 100 ; ++i) {
        painter.drawLine(0, 60, 0, 70);
        painter.rotate(2.8);
    }
    painter.restore();

    painter.save();
    painter.translate(width() / 2, height() / 2);
    painter.rotate(-2);
    if (gapCount < LOOPCOUNT && gapCount >= 0) {
        if (gap >= gapCount * 3) {
            painter.rotate((qreal)(360 - 42 * 2)/100 * currentValue - 2 + gapCount * 4 - gap);
        }
        else if (gap >= gapCount * 2) {
            painter.rotate((qreal)(360 - 42 * 2)/100 * currentValue - 2 + gap - gapCount *2);
        }
        else if (gap >= gapCount) {
            painter.rotate((qreal)(360 - 42 * 2)/100 * currentValue - 2 - (gapCount *2 - gap));
        }
        else {
            painter.rotate((qreal)(360 - 42 * 2)/100 * currentValue - 2 - gap);
        }
    }
    else {
        if (currentValue >= 0) {
            painter.rotate((qreal)(360 - 42 * 2)/100 * currentValue - 2);
        }
    }
    painter.drawPixmap(QRect((- pointPix.width())/2 , (- pointPix.height())/2, pointPix.width(), pointPix.height()) , pointPix);
    painter.restore();
}

void DashboardProcess::resizeEvent(QResizeEvent *event)
{
    currentValueLabel->setGeometry(0, 122, width(), 20);
    move((QApplication::desktop()->width() - width())/2,  (QApplication::desktop()->height() - height())/2);
    QWidget::resizeEvent(event);
}

/****************move everywhere*******************/
void DashboardProcess::mousePressEvent(QMouseEvent *event)
{
    bPressFlag = true;
    beginDrag = event->pos();
    QWidget::mousePressEvent(event);
}

void DashboardProcess::mouseMoveEvent(QMouseEvent *event)
{
    if (bPressFlag) {
        QPoint relaPos(QCursor::pos() - beginDrag);
        move(relaPos);
    }
    QWidget::mouseMoveEvent(event);
}

void DashboardProcess::mouseReleaseEvent(QMouseEvent *event)
{
    bPressFlag = false;
    QWidget::mouseReleaseEvent(event);
}

（3）main.cpp

#include "DashboardDisplay.h"
#include <QApplication>

int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    DashboardProcess w;
    w.setUsedValue(70);
    w.show();

    return a.exec();
}

2、编译运行

指针摆动的最大摆角为LOOPCOUNT变量，一个周期内钟摆的振幅改变两次（4个来回） ，每一个周期摆角减少1度，直到最终为0。

三、总结

（1）上述的数据在实际应用中还得微调，根据背景图片的不同rotate的角度不同，定时器的时间根据自己的需求加以调整。
（2）若有问题或建议，请留言，在此感谢！