Qt绘制仪表————附带详细说明和代码示例

1 效果

下面仪表模拟的是转速表和速度表，转速表中有怠速转速，降功转速的逻辑。

下面是模拟双针仪表的效果：

2 原理

1，重写paintEvent进行仪表绘制，使用QPropertyAnimation进行动画绘制；

2，进行属性动画绘制时，需要使用Q_PROPERTY宏用于声明类的属性；

3 编码实践

下面代码位调用方法，接口的具体实现在后文中有详细描述。

发射的信号：

    //发送发动机转速void sendEngineSpeed(double);//发送大机速度值void sendTrainSpeedNum(short);

创建仪表类并设置参数：

//发动机转速表DashBoardWidget3 *dashBoardWidget5 = new DashBoardWidget3(this);dashBoardWidget5->setScaleMajor(6);//6个大区间dashBoardWidget5->setScaleMinor(5);//每个区间5个小格dashBoardWidget5->setUnit("");dashBoardWidget5->setText("RPMx100");dashBoardWidget5->setmax(30);dashBoardWidget5->setUnitDrawInterval(1);//每隔一个大区间画一个刻度线描述值dashBoardWidget5->setGeometry(750, 20, 300, 300);connect(this, &MainInterface::sendEngineSpeed,dashBoardWidget5, &DashBoardWidget3::valueChanged);//汽车速度表DashBoardWidget3 *dashBoardWidget6 = new DashBoardWidget3(this);dashBoardWidget6->setScaleMajor(12);//大区间dashBoardWidget6->setScaleMinor(2);//每个区间的小值dashBoardWidget6->setUnit("");dashBoardWidget6->setText("km/h");dashBoardWidget6->setmax(120);dashBoardWidget6->setUnitDrawInterval(2);// dashBoardWidget->move(600, 20);dashBoardWidget6->setGeometry(750, 300, 300, 300);connect(this, &MainInterface::sendTrainSpeedNum,dashBoardWidget6, &DashBoardWidget3::valueChanged);

3.1 创建仪表属性类

struct DashBoardWidgetPrivate{//刻度值的最大值和最小值int maxValue = 100;int minValue = 0;//刻度值角度double startAngle = -50;double endAngle = 230;double value = minValue;//大区间，最小区间int scaleMajor = 10;int scaleMinor = 5;//单位和描述文字QString unit = "";QString text = "";//仪表颜色QColor arcColor = QColor(56, 61, 74);//QColor(0, 128, 255);//刻度颜色QColor scaleColor = QColor(71, 186, 252);//QColor(4, 168, 173);//指针颜色QColor pointerColor = QColor(255, 0, 0);//文件颜色QColor textColor = QColor(144, 133, 116);//背景颜色QColor backgroundColor = Qt::transparent;//仪表指针1：属性动画QPropertyAnimation *animation;};

3.2 设置类属性

    Q_PROPERTY(double value READ value WRITE setValue)Q_PROPERTY(double min READ min WRITE setMin)Q_PROPERTY(double max READ max WRITE setmax)Q_PROPERTY(double startAngle READ startAngle WRITE setStartAngle)Q_PROPERTY(double endAngle READ endAngle WRITE setEndAngle)Q_PROPERTY(int scaleMajor READ scaleMajor WRITE setScaleMajor)Q_PROPERTY(int scaleMinor READ scaleMinor WRITE setScaleMinor)Q_PROPERTY(QString unit READ unit WRITE setUnit)Q_PROPERTY(QString text READ text WRITE setText)Q_PROPERTY(QColor arcColor READ arcColor WRITE setArcColor)Q_PROPERTY(QColor scaleColor READ scaleColor WRITE setScaleColor)Q_PROPERTY(QColor pointerColor READ pointerColor WRITE setPointerColor)Q_PROPERTY(QColor textColor READ textColor WRITE setTextColor)Q_PROPERTY(QColor backgroundColor READ backgroundColor WRITE setBackgroundColor)

创建对应的函数：

    QSize sizeHint() const override;QSize minimumSizeHint() const override;double value() const;void setValue(const double value);void setMin(const double min);double min() const;void setmax(const double max);double max() const;void setStartAngle(const double startAngle);double startAngle() const;void setEndAngle(const double endAngle);double endAngle() const;void setScaleMajor(const int scale);int scaleMajor() const;void setScaleMinor(const int scale);int scaleMinor() const;void setUnit(const QString &unit);//设置单位QString unit() const;void setText(const QString &text);//设置文字QString text() const;void setArcColor(const QColor &color);QColor arcColor() const;void setScaleColor(const QColor &color);QColor scaleColor() const;void setPointerColor(const QColor &color);QColor pointerColor() const;void setTextColor(const QColor &color);QColor textColor() const;void setBackgroundColor(const QColor &color);QColor backgroundColor() const;

3.3 绘制图案

在类绘制事件中，添加各种绘制信息：

void DashBoardWidget3::paintEvent(QPaintEvent *event){QWidget::paintEvent(event);QPainter painter(this);//....
}

3.3.1 设置反走样

//反走样是图形学中的重要概念，用以防止通常所说的“锯齿”现象的出现。很多系统的绘图 API 里面都内置了有关反走样的算法，不过由于性能问题，默认一般是关闭的painter.setRenderHints(QPainter::Antialiasing | QPainter::TextAntialiasing);

3.3.2 绘制背景

    // 背景if (d->backgroundColor != Qt::transparent) {painter.setPen(Qt::NoPen);painter.fillRect(rect(), d->backgroundColor);}

3.3.3 重新定义坐标原点

    // 平移中心painter.translate(width() / 2, height() / 2);

调整之前：

调整之后：

3.3.4 绘制圆环

    // 圆环drawArc(&painter);

实现函数：

void DashBoardWidget3::drawArc(QPainter *painter)
{double min = qMin(width(), height());double arcWidth = min / 15.0;double radius = min / 3 - arcWidth;QRectF rect = QRectF(-radius, -radius, radius * 2, radius * 2);QPen pen;pen.setWidthF(arcWidth);pen.setCapStyle(Qt::FlatCap);// 圆弧背景double angle = d->endAngle - d->startAngle;pen.setColor(d->arcColor);painter->setPen(pen);painter->drawArc(rect, d->startAngle * 16, angle * 16);
}

绘制效果如下：

3.3.5 绘制刻度线

    // 刻度线drawScale(&painter);

实现函数：

void DashBoardWidget3::drawScale(QPainter *painter)
{painter->save();painter->rotate(270 - d->endAngle);int steps = (d->scaleMajor * d->scaleMinor);//区间*每个区间的小刻度double angleStep = (d->endAngle - d->startAngle) / steps;double min = qMin(width(), height());double radius = min / 3;QPen pen(d->scaleColor);pen.setCapStyle(Qt::RoundCap);for (int i = 0; i <= steps; i++) {if (i % d->scaleMinor == 0) {//画大刻度pen.setWidthF(1.5);painter->setPen(pen);painter->drawLine(0, radius - 8, 0, radius + 5);//画刻度线长度}else{//画小刻度pen.setWidthF(0.5);painter->setPen(pen);painter->drawLine(0, radius - 8, 0, radius - 3);}painter->rotate(angleStep);}painter->restore();
}

效果如下：

3.3.6 绘制刻度线上的描述值

    // 刻度线上的描述值drawScaleNum(&painter);

实现函数：

//画刻度线上的说明值
void DashBoardWidget3::drawScaleNum(QPainter *painter)
{painter->save();painter->setPen(d->scaleColor);double min = qMin(width(), height());double radius = min / 2.4;//半径QFont font("Microsoft YaHei", min / 25);painter->setFont(font);double startRad = d->endAngle * (M_PI / 180);//qDebug()<<"startRad:"<<startRad;double deltaRad = (d->endAngle - d->startAngle) * (M_PI / 180) / d->scaleMajor;QFontMetrics fontMetrics(font);if(m_unitDrawInterval > d->scaleMajor){m_unitDrawInterval = d->scaleMajor;}for (int i = 0; i <= d->scaleMajor; i += m_unitDrawInterval) {//每个大区间都要画刻度值double sina = qSin(startRad - i * deltaRad);double cosa = qCos(startRad - i * deltaRad);double value = 1.0 * i * ((d->maxValue - d->minValue) / d->scaleMajor) + d->minValue;// 1.0 * 1 *((1200 -0)/10) + 0// qDebug()<<"d->maxValue:"<<d->maxValue;//qDebug()<<"d->minValue:"<<d->minValue;//qDebug()<<"value:"<<value;QString strValue = QString("%1").arg(value);double textWidth = fontMetrics.horizontalAdvance(strValue);double textHeight = fontMetrics.height();int x = radius * cosa - textWidth / 2;int y = -radius * sina + textHeight / 4;painter->drawText(x, y, strValue);}painter->restore();
}

效果如下：

3.3.7 绘制指针

    // 指示器(指针)drawPointer(&painter);

实现函数：

//画指针
void DashBoardWidget3::drawPointer(QPainter *painter)
{painter->save();painter->setPen(Qt::NoPen);painter->setBrush(d->pointerColor);//设置画笔颜色double radius = qMin(width(), height()) / 3.0;QPolygonF pts;pts << QPointF(-5, 0) << QPointF(0, -8)<< QPointF(5, 0) << QPointF(0, radius);painter->rotate(270 - d->endAngle);double degRotate = (d->endAngle - d->startAngle) / (d->maxValue - d->minValue) * (d->value - d->minValue);painter->rotate(degRotate);painter->drawConvexPolygon(pts);painter->restore();
}

效果如下：

3.3.8 绘制指针数值和单位

    // 显示指针数值和单位drawValue(&painter);

实现函数：

//画数值和单位
void DashBoardWidget3::drawValue(QPainter *painter)
{painter->save();painter->setPen(d->textColor);double min = qMin(width(), height());double radius = min / 2.0 - min / 4.8;QFont font("Microsoft YaHei", min / 25);painter->setFont(font);//绘制指针数值和单位QString strValue = QString("%1 %2").arg(d->value).arg(d->unit);QRectF valueRect(-radius, radius / 2.5, radius * 2, radius / 3.5);QColor pointerColor = QColor(0, 0, 0);painter->setBrush(pointerColor);//设置颜色painter->setPen(QPen(QColor(0, 0, 0)));painter->drawText(valueRect, Qt::AlignCenter, strValue);//绘制描述文字QRectF text2Rect(-radius, radius / 1.5, radius * 2, radius / 2.5);painter->setPen(QPen(QColor(255, 0, 0)));//设置画笔颜色painter->setBrush(d->textColor);//设置画笔颜色font.setPixelSize(12);painter->setFont(font);painter->drawText(text2Rect, Qt::AlignCenter, d->text);painter->restore();
}

实现效果：

3.3.9 控制指针变化

signals:void valueChanged(const double value);DashBoardWidget3::DashBoardWidget3(QWidget *parent): QWidget(parent), d(new DashBoardWidgetPrivate)
{d->animation = new QPropertyAnimation(this, "value", this);setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding);connect(this, &DashBoardWidget3::valueChanged,this, &DashBoardWidget3::onStartAnimation);}

实现函数：

//仪表指针变动的动画
void DashBoardWidget3::onStartAnimation(double value)
{if(value < d->minValue|| value > d->maxValue|| value == d->value){}else{double start = d->value;double end = value;d->animation->setStartValue(start);d->animation->setEndValue(end);d->animation->start();}
}

扩展

可以思考以下，下面的效果如何实现？

福利

完整的项目代码

欢迎各位start

参考

Qt自定义控件之仪表盘的完整实现