“This is the ninth day of my participation in the First Challenge 2022. For details: First Challenge 2022”

Environment: vs2017 + Qt5.14.2

Effect:

Preparations:

The rotating dashboard effect in the rendering is divided into three parts:

  1. Background diagram (that is, the part saved by removing the middle white origin and the middle blue pointer);
  2. Pointer picture (middle blue pointer part, excluding white dot on pointer);
  3. Origin image (white dot in the middle)

Principle:

Draw these three images in paintEvent(). When you need to rotate the pointer Angle, change the Angle of the pointer image and call update() to redraw the display.

Concrete implementation:

1. Define rotation Angle member variable int m_nValue; // Pointer rotation Angle.

2. Override paintEvent().

3. Load three images.

QPixmap img = QPixmap(“:/image/banhuan.png”);

QPixmap needle = QPixmap(“:/image/zhizhen.png”);

QPixmap overlay = QPixmap(“:/image/zhizhenyuan.png”);

4. Draw inside paintEvent().

void CDialBox::paintEvent(QPaintEvent *event)
{
    QPainter painter(this);
    
    painter.save();/ / save
    painter.setRenderHint(QPainter::SmoothPixmapTransform, true); // Smooth the pixel image to prevent the image from going out of shape
    painter.translate(this->width() / 2.this->height() / 2); // The origin is positioned in the middle position

    / / background
    painter.drawPixmap(-img->width() / 2, -img->height() / 2, img); 

    / / pointer figure
    painter.rotate(m_nValue);// Set the rotation Angle
    painter.drawPixmap(-needle.width() / 2, -needle.height() + needle.width() / 2, needle); 

    / / the origin
    painter.drawPixmap(-overlay.width() / 2, -overlay.height() / 2, overlay);

    painter.restore();/ / recovery
}
Copy the code

Among them: painter. The save (); painter.restore(); Save the current state of QPainter and restore the current state of QPainter. These two functions are used primarily for the painter. Translate () function.

Because the painter. Translate (x, y) function is used to set the relative coordinates of the current QPainter. Normal QPainter’s coordinate origin (0,0) is in the upper left corner of the screen, and calling painter. Translate (x,y) sets the origin to the specified (x,y) position, that is, the screen’s (x,y) position is the QPainter’s canvas’s (0,0) position.

In order to prevent the canvas picture zoom or stretching cause contorts the images, can be called painter. SetRenderHint (QPainter: : SmoothPixmapTransform, true); For smoothing Settings.

The order is very important when drawing the graphics, first call the painter. DrawPixmap () function to draw the graphics at the bottom, the later call will be overwritten on the previous graphics, so according to the renderings, should draw the background image first, then draw the pointer image, and finally draw the origin image.

Img ->width() / 2, img->height() / 2); img->height() / 2);

The X value of the pointer graph is half of the negative width, and the Y value is the negative height value plus half of the width. The painter. Rotate () function is called to rotate the canvas clockwise around the origin of the coordinates at a specified Angle. So define a member variable to pass the value to this Angle.

The (x,y) of the origin diagram should be (-overlay.width() / 2, -overlay.height() / 2);

5. Change the pointer Angle

Void valueChanged(int value) defines a function that changes the pointer Angle value;

void CDialBox::valueChanged(int value)
{
    m_nValue = value;
    update();
}
Copy the code

Set the Angle value and call the update() function to refresh it. Call the update (); The function will execute paintEvent();