QT custom control to realize disc progress bar

Time:2022-5-10

This example shares the specific code of QT disc progress bar for your reference. The specific contents are as follows

Custom control 2: disc progress bar

Upper rendering:

Main idea: use qpainter to draw circles and arcs according to the graphic requirements, draw pointers (polygons, specify coordinates), and rotate the coordinate system according to the specific value value to make the pointer achieve the rotation effect. The rotation degree is calculated according to the value value, a total of 360 degrees, accounting for the proportion. You need to draw text in the middle. Every time you update value, call the update () method to redraw the interface.

Main code: cmpassrate1 cpp

void CMPassrate1::paintEvent(QPaintEvent *event){
  int width = this->width();
  int height = this->height();
  int side = qMin(width, height);

  QPainter painter(this);
  painter.setRenderHints(QPainter::Antialiasing | QPainter::TextAntialiasing);
  painter.translate(width / 2, height / 2);
  painter.scale(side / 200.0, side / 200.0);

  //Draw outer circle
  paintSide(&painter);
  paintOutE(&painter);
  
  paintLine(&painter);// Draw tick marks
  paintInE(&painter);
  paintPoint(&painter);// Draw pointer
  paintTextE(&painter);// Circle where text is drawn
  paintText(&painter);// Draw text
  paintValue(&painter);// Draw the fill angle corresponding to value
}

void CMPassrate1::paintSide(QPainter *painter){
  int radis = outRadis;
  QRect rect(-radis,-radis,radis*2,radis*2);
  painter->save();
  painter->setBrush(QBrush(QColor("#505050")));
  painter->setPen(Qt::NoPen);
  painter->drawEllipse(rect);
  painter->restore();
}

void CMPassrate1::paintOutE(QPainter *painter){
  int radis = outRadis-side;
  QRect rect(-radis,-radis,radis*2,radis*2);
  painter->save();
  painter->setBrush(QBrush(QColor("#868686")));
  painter->setPen(Qt::NoPen);
  painter->drawEllipse(rect);
  painter->restore();
}

void CMPassrate1::paintLine(QPainter *painter){
  int lineStart = outRadis-3;
  painter->save();
  painter->setPen(QColor("#868686"));
  int range = 360/12;
  for(int i = 0;i<12;i++){
    painter->rotate(range);
    painter->drawLine(QPoint(lineStart,0),QPoint(outRadis,0));
  }
  painter->restore();
}

void CMPassrate1::paintInE(QPainter *painter){
  int radis = inRadis;
  QRect rect(-radis,-radis,radis*2,radis*2);
  painter->save();
  painter->setBrush(QBrush(QColor("#646464")));
  painter->setPen(Qt::NoPen);
  painter->drawEllipse(rect);
  painter->restore();
}

void CMPassrate1::paintTextE(QPainter *painter){
  int radis = 23;
  QRect rect(-radis,-radis,radis*2,radis*2);
  painter->save();
  painter->setBrush(QBrush(QColor("#FFFFFF")));
  painter->setPen(Qt::NoPen);
  painter->drawEllipse(rect);
  painter->restore();
}

void CMPassrate1::paintPoint(QPainter *painter){
   painter->save();
   const QPoint points[3] = {
       QPoint(10,0),
       QPoint(-10,0),
       QPoint(0,inRadis-5)
     };
   int range = ((double)value/100)*360;
   painter->rotate(range);
   painter->setPen(Qt::NoPen);
   painter->setBrush(QBrush(QColor("#66CFFF")));
   painter->drawConvexPolygon(points,3);


   painter->restore();
}

void CMPassrate1::paintText(QPainter *painter){
  int radis = 23;
  QRect rect(-radis,-radis,radis*2,radis*2);
  painter->save();
  painter->setBrush(QBrush(QColor("#000000")));
  painter->setPen(QPen(QColor("#000000")));
  QFont font = painter->font();
  font.setPixelSize(20);
  painter->setFont(font);
  painter->drawText(rect,Qt::AlignCenter,QString("%1%").arg(QString::number(value)));
  painter->restore();
}

void CMPassrate1::paintValue(QPainter *painter){
  int oRandis = outRadis-side;
  qDebug()<<"value::"<<value;
  int rangle = ((double)value/100)*360;
  QRectF rect(-oRandis, -oRandis, oRandis << 1, oRandis << 1);
  QPainterPath path;
  qDebug()<<"rangle:"<<rangle<<" start:"<<270-rangle;
  path.arcTo(rect, 270-rangle, rangle);

  // QRectF(-120, -120, 240, 240)
  QPainterPath subPath;
  subPath.addEllipse(rect.adjusted((oRandis-inRadis),(oRandis-inRadis),-(oRandis-inRadis),-(oRandis-inRadis)));

  //Path is a sector and subpath is an ellipse
  path -= subPath;
  painter->save();
  painter->setBrush(valueColor);
  painter->setPen(Qt::NoPen);
  painter->drawPath(path);
  painter->restore();
}

The above is the whole content of this article. I hope it will be helpful to your study, and I hope you can support developpaer.