基于Qt绘制环形倒计时-QT开发中文网

以下是一个基于Qt的环形倒计时绘制示例：

首先，我们需要在Qt中创建一个自定义小部件来实现环形倒计时的绘制。为此，我们可以使用QPainter类进行绘制操作。

class CountdownWidget : public QWidget
{
public:
    CountdownWidget(QWidget *parent = nullptr);
    
protected:
    void paintEvent(QPaintEvent *event) override;
};

在paintEvent函数中，我们可以使用QPainter类的方法来实现环形倒计时的绘制。首先，我们需要计算出环上每个刻度线对应的角度值，并将其转换为弧度值。然后，根据当前时间和目标时间之间的差距，确定当前进度所占用的角度，并将其转换为弧度值。最后，根据这些值来绘制环。

void CountdownWidget::paintEvent(QPaintEvent *event)
{
    QPainter painter(this);
    painter.setRenderHint(QPainter::Antialiasing);
    
    int side = qMin(width(), height());
    
    // 绘制背景
    painter.fillRect(rect(), Qt::black);
    
    // 计算刻度线角度
    const int numTicks = 60;
    const qreal deltaAngle = 360.0 / numTicks;
    
    QVector<QLineF> tickLines;
    for (int i = 0; i < numTicks; ++i) {
        QLineF tickLine(0, -side / 2 + 10, 0, -side / 2 + 20);
        tickLine.setAngle(i * deltaAngle);
        tickLines.append(tickLine);
    }
    
    // 绘制刻度线
    painter.save();
    painter.translate(width() / 2, height() / 2);
    painter.setPen(QPen(Qt::white, 3));
    for (int i = 0; i < numTicks; ++i) {
        painter.drawLine(tickLines[i]);
    }
    painter.restore();
    
    // 计算进度角度
    const int totalSeconds = m_targetTime.secsTo(QDateTime::currentDateTime());
    const qreal progressAngle = (360.0 / m_totalSeconds) * totalSeconds;
    
    // 绘制环
    painter.save();
    painter.translate(width() / 2, height() / 2);
    
    QRectF rect(-side / 2 + 30, -side / 2 + 30, side - 60, side - 60);
    
    QPainterPath path;
    
//这里添加一个弧线，为了绕成一个圆形 
     path.addArc(rect,-90*16,(progressangle/360)*5760)
     path.lineTo(qCos(Progressangle*3.1415926/180)*(radius-10),qSin(progressangle*3.1415926/180)*(radius-10))

   
    
    
//这里添加第二个弧线和直线

      path.addArc(rect+QMargins(20,20,20,20),startAngel,(deltaAngele-progressangel))
       qreal endAngel=startAngel+(deltaAngele-progressangel)

      if(endAngel>270 && endAngel<450){
          path.lineTo(qCos((endAngel-90)*3.1415926/180)*(radius+10),qSin((endAngel-90)*3.1415926/180)*(radius+10))
         path.addArc(rect,QMargins(20,20,20,20),270*16,(endAngel-450)*16)
          path.lineTo(qCos((endAngel-90)*3.1415926/180)*(radius-10),qSin((endAngel-90)*3.1415926/180)*(radius-10))

      }
    
    QPen pen(Qt::white, m_thickness);
    pen.setCapStyle(Qt::FlatCap);
    
    painter.strokePath(path, pen);
    
    painter.restore();
}

最后，我们需要设置倒计时的目标时间和总共需要的时间，并在每次更新计时器事件发生时重绘小部件。

CountdownWidget::CountdownWidget(QWidget *parent)
    : QWidget(parent)
{
    m_targetTime = QDateTime::currentDateTime().addSecs(60);
    m_totalSeconds = 60;
    m_thickness = 12;
    
    QTimer *timer = new QTimer(this);
    connect(timer, &QTimer::timeout, this, [this]() { update(); });
    timer->start(1000);
}

int main(int argc, char *argv[])
{
    QApplication app(argc, argv);
    
    CountdownWidget widget;
    widget.show();
    
    return app.exec();
}

这样，我们就可以得到一个基于Qt的环形倒计时绘制示例。