Qt仪表自绘

Qt仪表自绘

本片文章介绍仪表控件是如何绘制的，首先上图：

绘制原理：
根据上图介绍绘制的原理，继承QWidget类，重写绘制事件函数：
protected:
void paintEvent(QPaintEvent *);
在绘制事件中绘制仪表。
仪表绘制分为五个部分：绘制外弧线、绘制刻度颜色块，绘制圆心、绘制指针、绘制显示文本。
绘制外弧线：
首先先绘制一个外饼形圆、然后再绘制一个内饼形圆，内外圆颜色不同，这样就会形成一个外弧线：

绘制刻度色块：
使用弧线绘制一块一块的弧度色块，色块间隔空白的地方也是弧线色块只是背景色是透明色：

绘制圆心：
在最下方水平中心的地方绘制一个圆：

绘制指针：
以圆心为起点，要指向的位置为终点绘制一条指针直线

绘制显示文本:
在圆心的下方绘制指针指向的值

以上就是仪表绘制的步骤。
仪表控件类封装：

#ifndef DASHBOARD_H
#define DASHBOARD_H

#include <QWidget>
#include <QPainter>
#include <QDebug>
#include <qmath.h>

class Dashboard : public QWidget
{
    Q_OBJECT
public:
    explicit Dashboard(QWidget *parent = nullptr);
    void setValue(double value);
    void setTextFromat(QString value);
    void setTextFont(QFont font);
    double getValue();
    QString getTextFromat();
    QFont getTextFont();
signals:

public slots:

protected:
    void paintEvent(QPaintEvent *);
    void drawCircular(QPainter *painter);//绘制圆弧
    void drawScale(QPainter *painter);//绘制刻度
    void drawCenterCircle(QPainter *painter);//绘制中心圆
    void drawPointerIndicator(QPainter *painter);//绘制指针
    void drawValue(QPainter *painter);//绘制Text

private:
    double minValue;                //最小值
    double maxValue;                //最大值
    double value;                   //目标值
    int precision;                  //精确度,小数点后几位
    int startAngle;                 //开始旋转角度
    int endAngle;                   //结束旋转角度
    QColor outerCircleColor;        //外圆背景颜色
    QColor innerCircleColor;        //内圆背景颜色
    QColor pieColor1;           //饼圆颜色1
    QColor pieColor2;             //饼圆颜色2
    QColor pieColor3;             //饼圆颜色3
    QColor pieColor4;           //饼圆颜色4
    QColor pieColor5;             //饼圆颜色5
    QColor pieColor6;             //饼圆颜色6
    QColor pieColor7;             //饼圆颜色7
    QColor coverCircleColor;        //覆盖圆背景颜色
    QColor scaleColor;              //刻度尺颜色
    QColor pointerColor;            //指针颜色
    QColor centerCircleColor;       //中心圆颜色
    QColor textColor;               //文字颜色
    double currentValue;            //当前值
    QString textFromat;//文本格式
    QFont textFont;//文本字体

};

#endif // DASHBOARD_H

#include "dashboard.h"

Dashboard::Dashboard(QWidget *parent) : QWidget(parent)
{
    outerCircleColor = QColor(80,80,80);        //外圆背景颜色
    innerCircleColor = QColor(60,60,60);        //内圆背景颜色

    pieColor1 = QColor(0,128,64);           //饼圆颜色1
    pieColor2 = QColor(0,64,0);             //饼圆颜色2
    pieColor3 = QColor(0,0,255);             //饼圆颜色3
    pieColor4 = QColor(255,128,0);           //饼圆颜色4
    pieColor5 = QColor(128,0,255);             //饼圆颜色5
    pieColor6 = QColor(128,0,0);             //饼圆颜色6
    pieColor7 = QColor(255,0,0);             //饼圆颜色7

    coverCircleColor = QColor(255,0,0);        //覆盖圆背景颜色
    scaleColor = QColor(252,252,252);              //刻度尺颜色
    pointerColor = QColor(65,234,0);            //指针颜色
    centerCircleColor = QColor(65,234,0);       //中心圆颜色
    textColor = QColor(0, 0, 0);       //文本颜色

    minValue = 0;                //最小值
    maxValue = 100;                //最大值
    value = 0;                   //目标值

    startAngle = 90;                 //开始旋转角度
    endAngle = 270;                   //结束旋转角度

    currentValue = 77.6;            //当前值

    textFromat = "%1";

    textFont.setPixelSize(18);

}

void Dashboard::setValue(double value)
{
    currentValue = value;            //当前值
}

void Dashboard::setTextFromat(QString value)
{
    textFromat = value;
}

void Dashboard::setTextFont(QFont font)
{
    textFont = font;
}

double Dashboard::getValue()
{
    return currentValue;
}

QString Dashboard::getTextFromat()
{
    return textFromat;
}

QFont Dashboard::getTextFont()
{
    return textFont;
}

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

    //绘制准备工作,启用反锯齿,平移坐标轴中心,等比例缩放
    QPainter painter(this);
    painter.save();
    painter.setRenderHints(QPainter::Antialiasing | QPainter::TextAntialiasing);
    painter.translate(width / 2, height - height / 3);//平移坐标轴 将中心点作为原点（0，0）
    painter.scale(side / 200.0, side / 200.0);//缩放坐标轴系统

    drawCircular(&painter);//外弧线
    drawScale(&painter);//刻度标
    drawCenterCircle(&painter);//绘制中心圆
    drawPointerIndicator(&painter);//绘制指针
    drawValue(&painter);//绘制文本

    painter.restore();
}

void Dashboard::drawCircular(QPainter *painter)
{
    int radius = 100/*100*/;
    QRectF rect(-radius, -radius, radius * 2, radius * 2);
    painter->save();
    painter->setPen(Qt::NoPen);
    //绘制开始饼圆
    painter->setBrush(outerCircleColor);
    painter->drawPie(rect,-3 * 16, 186 * 16);

    radius = 95/*95*/;
    rect = QRectF(-radius, -radius, radius * 2, radius * 2);
    painter->setPen(QPen(QBrush(QColor(255,255,255)),1,Qt::SolidLine)/*Qt::NoPen*/);
    painter->setBrush(QColor(255,255,0/*255*/));
    painter->drawPie(rect,-3 * 16, 186 * 16);

    painter->restore();
}

void Dashboard::drawScale(QPainter *painter)
{
    int radius = 85;
    QRectF rect(-radius, -radius, radius * 2, radius * 2);
    painter->save();
    painter->setPen(Qt::NoPen);

    int start = -1;
    for(int i = 0;i < 21;i ++)
    {
        if(i/3 < 1)
        {
            painter->setPen(QPen(pieColor7,6,Qt::SolidLine));
            painter->setBrush(pieColor7);
        }else if (i/3 < 2) {
            painter->setPen(QPen(pieColor6,6,Qt::SolidLine));
            painter->setBrush(pieColor6);

        }else if (i/3 < 3){
            painter->setPen(QPen(pieColor5,6,Qt::SolidLine));
            painter->setBrush(pieColor5);
        }else if (i/3 < 4){
            painter->setPen(QPen(pieColor4,6,Qt::SolidLine));
            painter->setBrush(pieColor4);
        }else if (i/3 < 5){
            painter->setPen(QPen(pieColor3,6,Qt::SolidLine));
            painter->setBrush(pieColor3);
        }else if (i/3 < 6){
            painter->setPen(QPen(pieColor2,6,Qt::SolidLine));
            painter->setBrush(pieColor2);
        }else {
            painter->setPen(QPen(pieColor1,6,Qt::SolidLine));
            painter->setBrush(pieColor1);
        }

        painter->drawArc(rect,start*16, 2*16);
        start = start + 6;

        painter->setPen(QPen(QColor(255, 255, 255,0),6,Qt::SolidLine));
        painter->setBrush(QColor(255, 255, 255,0));
        painter->drawArc(rect,start*16, 3*16);
        start = start + 3;
    }

    painter->restore();
}

void Dashboard::drawCenterCircle(QPainter *painter)
{
    int radius = 8;
    painter->save();
    painter->setPen(Qt::NoPen);
    painter->setBrush(centerCircleColor);
    painter->drawEllipse(-radius, -radius, radius * 2, radius * 2);
    painter->restore();
}

void Dashboard::drawPointerIndicator(QPainter *painter)
{
    int radius = 75;
    painter->save();
    painter->setOpacity(1.0);
    painter->setPen(QPen(pointerColor,4));
    painter->setBrush(pointerColor);

    QPolygon pts;
    pts.setPoints(4, -5, 0, 5, 0, -5, radius,5,radius);

    painter->rotate(startAngle);
    double degRotate = (360.0 - qAbs(startAngle - endAngle)) / (maxValue - minValue) * (currentValue - minValue);
    painter->rotate(degRotate);
    painter->drawLine(0,0,0,75);

    painter->restore();
}

void Dashboard::drawValue(QPainter *painter)
{    painter->save();
    painter->setPen(textColor);
    painter->setFont(textFont);

    qDebug() << this->width();
    QRect textRect(-200, 10, 400, 400);
    QString strValue = textFromat.arg(static_cast<double>(currentValue));
    painter->drawText(textRect, Qt::AlignTop | Qt::AlignHCenter, strValue);

    painter->restore();
}