在Qt中创建自定义圆形进度条

Question

我能够在Qt中通过重写小部件的paintEvent方法并绘制圆形进度条来实现功能，但是在主要圆形进度条后面画第二个圆形进度条（像这样）时遇到了困难:

有人可以指导我吗？先谢谢了。

- elgolondrino

---

第二个圆形进度条是什么？ - eyllanesc

@eyllanesc 在图像中出现了孵化的圆形...在蓝色进度条下方。 - elgolondrino

请发布一些相关的代码或者最好是一个最小、完整且可验证的示例。 - G.M.

Answer 1

我不明白问题出在哪里，您可以使用QPainterPath并向其添加完整或部分的弧形路径，然后通过Qt::DotLine样式使用QPen绘制路径。

如果默认的虚线不适用于您，可以通过以下方式指定自定义模式：

void QPen::setDashPattern(const QVector<qreal> & pattern)

---

这是一个快速的示例，看起来像这样：

class CPBar : public QWidget {
    Q_OBJECT
    qreal p; // progress 0.0 to 1.0
  public:
    CPBar(QWidget * p = 0) : QWidget(p), p(0) {
      setMinimumSize(208, 208);
    }
    void upd(qreal pp) {
      if (p == pp) return;
      p = pp;
      update();
    }
  void paintEvent(QPaintEvent *) {
    qreal pd = p * 360;
    qreal rd = 360 - pd;
    QPainter p(this);
    p.fillRect(rect(), Qt::white);
    p.translate(4, 4);
    p.setRenderHint(QPainter::Antialiasing);
    QPainterPath path, path2;
    path.moveTo(100, 0);
    path.arcTo(QRectF(0, 0, 200, 200), 90, -pd);
    QPen pen, pen2;
    pen.setCapStyle(Qt::FlatCap);
    pen.setColor(QColor("#30b7e0"));
    pen.setWidth(8);
    p.strokePath(path, pen);
    path2.moveTo(100, 0);
    pen2.setWidth(8);
    pen2.setColor(QColor("#d7d7d7"));
    pen2.setCapStyle(Qt::FlatCap);
    pen2.setDashPattern(QVector<qreal>{0.5, 1.105});
    path2.arcTo(QRectF(0, 0, 200, 200), 90, rd);
    pen2.setDashOffset(2.2);
    p.strokePath(path2, pen2);
  }  
};

class Test : public QWidget {
    Q_OBJECT
  public:
    Test() {
      QVBoxLayout * l = new QVBoxLayout(this);
      CPBar * p = new CPBar;
      QSlider * s = new QSlider(Qt::Horizontal, this);
      s->setMinimum(0);
      s->setMaximum(100);
      l->addWidget(p);
      l->addWidget(s);
      setLayout(l);
      connect(s, &QSlider::valueChanged, [=](){ p->upd((qreal)s->value() / s->maximum());});
    }
};

- dtech

---

这就是如何从图像中获得结果。 - dtech

我只使用了 dashedPattern，但它给了我一些360度的圆。它们比我预期的要大。 - elgolondrino

没有使用过QPainterPath的经验。 - elgolondrino

那个进度条里面的按钮怎么办？有什么想法吗？ - elgolondrino

我不知道你在说什么，使用格式是arcTo(sizeRect, startAngle, lengthAngle) - sizeRect是圆的大小，其余的都很容易理解。在着手制作之前，显然你需要更多的学习。阅读有关QPainter和相关类型的文档。 - dtech