QT custom control to realize multi-color dashboard

Time:2022-5-8

This example shares the specific code of QT multi-color instrument panel for your reference. The specific contents are as follows

QT custom control 4: multicolor dashboard

Look at the renderings first:

Idea: the circular arc of the outer three colors: Red: Blue: Green = 1:2:1, accounting for 270 degrees in total. The scale line is drawn according to the color of the arc, and the angle of the scale line is also drawn according to the rotation of the coordinate system. The scale value is to obtain the coordinates of the upper left corner of the scale to be drawn according to the angle of the scale line, then form a rectangle, and draw the scale value according to the rectangle. The pointer is a quadrilateral drawn directly according to the coordinates of four points, and then rotate the coordinate system to achieve the effect of pointer rotation. The text below directly obtains the coordinates, the position of the horizontal and vertical coordinates, and the value drawn by the rectangle

Key code: cmpassrate3 cpp

void CMPassrate3::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);
  drawBG(&painter);
  drawE(&painter);
  drawLine(&painter);
  drawText(&painter);
  drawBootomText(&painter);
  drawPoint(&painter);
}

void CMPassrate3::drawE(QPainter* painter){
  painter->setPen(Qt::NoPen);
  QRect rectOut(-outRadius,-outRadius,2*outRadius,2*outRadius);
  QRect rectInn(-innRadius,-innRadius,2*innRadius,2*innRadius);
  painter->save();
  painter->setBrush(QColor("#04EEB2"));
  QPainterPath path;
  path.arcTo(rectOut,-45,270.0/4);

  QPainterPath subPath;
  subPath.addEllipse(rectInn);
  path -= subPath;
  painter->drawPath(path);
  painter->restore();

  painter->save();
  QPainterPath bluePath;
  QPainterPath blueSubPath;
  painter->setBrush(QColor("#2DC5F6"));
  bluePath.arcTo(rectOut,-45+(270.0/4),270.0/2);

  blueSubPath.addEllipse(rectInn);
  bluePath -= blueSubPath;
  painter->drawPath(bluePath);
  painter->restore();

  painter->save();
  QPainterPath redPath;
  QPainterPath redSubPath;
  painter->setBrush(QColor("#FA468C"));
  redPath.arcTo(rectOut,-45+270.0*3/4,270.0/4);

  redSubPath.addEllipse(rectInn);
  redPath -= redSubPath;
  painter->drawPath(redPath);
  painter->restore();
}

void CMPassrate3::drawLine(QPainter* painter){
  painter->save();
  painter->rotate(135);
  //270 / 8 degree grid
  for(int i = 0;i<9;i++){
    if(i<3){
      painter->setPen(QColor("#FA468C"));
    }else if(i<6){
      painter->setPen(QColor("#2DC5F6"));
    }else{
      painter->setPen(QColor("#04EEB2"));
    }
    QLine line(QPoint(lineStart,0),QPoint(innRadius,0));
    painter->drawLine(line);
    painter->rotate(270.0/8);
  }
  painter->restore();
}

void CMPassrate3::drawPoint(QPainter* painter){
  const QPoint point[4]{
    QPoint(0,0),QPoint(0,6),QPoint((lineStart-3)*qCos(135*3.14/180),(lineStart-3)*qSin(135*3.14/180)),QPoint(-6,0)
  };
  float range = 270.0/100*value;
  painter->save();
  painter->setBrush(QColor("#C2E481"));
  painter->rotate(range);
  painter->drawConvexPolygon(point,4);
  painter->restore();
}

Void cmpassrate3:: drawbg (qpainter * painter) {// you can add your own background pictures to achieve more beautiful effects
//  painter->save();
//  QImage image(":/image/images/bg1.jpg");
//  QRect rect(-this->width(),-this->height(),this->width()*2,this->height()*2);
//  painter->drawImage(rect,image);
//  painter->restore();

}

void CMPassrate3::drawText(QPainter *painter){
  painter->save();
  //Initially
  painter->setPen(Qt::black);
  QFont font = painter->font();
  font.setPixelSize(8);
  painter->setFont(font);
  float x,y;
  for(float i =0;i<=100;i+=12.5){
    x = lineStart*qCos((135+(270.0/8)*((i+1)/12.5))*3.14/180);
    y = lineStart*qSin((135+(270.0/8)*((i+1)/12.5))*3.14/180);
    QRect rect;
    if(i<50){
      rect.setX(x);
      rect.setY(y);
    }else if(i>50){
      rect.setX(x-17);
      rect.setY(y-7);
    }else{
      rect.setX(x);
      rect.setY(y);
    }
    rect.setWidth(17);
    rect.setHeight(10);
    painter->drawText(rect,Qt::AlignCenter,QString::number(i));
  }


  painter->restore();
}

void CMPassrate3::drawBootomText(QPainter *painter){
  painter->save();
  painter->setPen(Qt::black);
  QFont font = painter->font();
  font.setPixelSize(25);
  painter->setFont(font);
  painter->translate(0,outRadius-12);
  int length = 20;
  QRect rect(-length,-length,length*2,length*2);
  painter->drawText(rect,Qt::AlignCenter,QString::number(value));
  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.

Recommended Today

SpringBoot2. Management in X security. Enabled = false invalid resolution

management. security. Enabled = false is invalid 1、 In 1.5 X version through management security. Enabled = false to expose all endpoints Specific configuration class: org.springframework.boot.actuate.autoconfigure.ManagementServerProperties$Security 2、 Switch springboot version to 2.0 X use the search function of IDE Find the class managementserverproperties and find that the internal security class has been deleted 3、 Go […]