Qt：汽车仪表盘控件

最新推荐文章于 2024-04-14 00:05:32 发布
最新推荐文章于 2024-04-14 00:05:32 发布
阅读量4.4k 收藏 86
点赞数 9
分类专栏： C++ Qt 文章标签： gui qt
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/docin_/article/details/108210344
版权
Qt 同时被 2 个专栏收录
10 篇文章 2 订阅
订阅专栏
C++
9 篇文章 1 订阅
订阅专栏

Qt：汽车仪表盘

前言

基于QWidget实现的汽车仪表盘，包括发动机转速表，迈速表，油表，发动机水箱温度计，并且分别提供了接口。仪表盘的实现思路是计算各个表盘的坐标并进行绘制，尽可能减少贴图的使用。
效果图如下，代码自取，请放心食用。有不懂地方可留言交流，会不定期回复。

源码

这里提供基础的源码，包含了实现仪表盘的基本思路，其它素材可根据需求自行替换。

fr_armaturenbrett.h

#ifndef FRARMATURENBRETT_H
#define FRARMATURENBRETT_H

#include <QWidget>

class FrArmaturenbrett : public QWidget {
  Q_OBJECT
public:
  enum Gear {
    kGear_1 = 1,
    kGear_2,
    kGear_3,
    kGear_4,
    kGear_5,
    kGear_6,
    kGear_7,
    kGear_8,
    kGear_D,
    kGear_N,
    kGear_P,
    kGear_R
  };

public:
  explicit FrArmaturenbrett(QWidget *parent = nullptr);

public slots:
  void set_gear(const Gear gear);
  void set_rpm(const int rpm);
  void set_speed(const int speed);
  void set_temperature(const double temperature);
  void set_oil(const int oil);

protected:
  void paintEvent(QPaintEvent *event);

private:
  void draw_tachometer(QPainter& painter);  // 转速表
  void draw_speedometer(QPainter& painter);  // 迈速表
  void draw_gear(QPainter& painter);  // 挡位
  void draw_thermometer(QPainter& painter);  // 水箱温度计
  void draw_oil_meter(QPainter& painter);  // 油表

private:
  Gear _gear;
  int _rpm;
  int _speed;
  double _temperature;
  int _oil;
};

#endif // FRARMATURENBRETT_H

fr_armaturenbrett.cpp

#include "fr_armaturenbrett.h"

#include <qapplication.h>
#include <qpainter.h>
#include <qpainterpath.h>
#include <QtGui/QFontDatabase>

FrArmaturenbrett::FrArmaturenbrett(QWidget *parent) :
  QWidget(parent),
  _gear(kGear_4),
  _rpm(4000),
  _speed(120),
  _temperature(60),
  _oil(80) {

  QFontDatabase::addApplicationFont(":/fonts/DejaVuSans.ttf");
}

void FrArmaturenbrett::set_gear(const FrArmaturenbrett::Gear gear) {
  _gear = gear;
  update();
}

void FrArmaturenbrett::set_rpm(const int rpm) {
  _rpm = rpm;
  update();
}

void FrArmaturenbrett::set_speed(const int speed) {
  _speed = speed;
  update();
}

void FrArmaturenbrett::set_temperature(const double temperature) {
  _temperature = temperature;
  update();
}

void FrArmaturenbrett::set_oil(const int oil) {
  _oil = oil;
  update();
}

void FrArmaturenbrett::paintEvent(QPaintEvent* event) {
  QWidget::paintEvent(event);

  int side = qMin(int(width() / 1.8), height());

  QPainter painter(this);
  painter.setRenderHint(QPainter::Antialiasing);
  painter.translate(width() / 2, height() / 2);
  painter.scale(side / 200.0, side / 200.0);
  painter.setPen(Qt::NoPen);
  painter.setBrush(Qt::NoBrush);

  draw_tachometer(painter);
  draw_speedometer(painter);
  draw_gear(painter);
  draw_thermometer(painter);
  draw_oil_meter(painter);
}

void FrArmaturenbrett::draw_tachometer(QPainter& painter) {
  static QColor normal_color(26, 245, 245, 245);
  static QColor overrun_color(245, 64, 64, 225);

  // 绘制表盘外檐
  painter.save();
  painter.setPen(QPen(normal_color, 1,  Qt::SolidLine));
  QRect rect(-95, -95, 190, 190);
  painter.drawArc(rect, 0, 270 * 16);
  painter.restore();

  // 绘制红色区域
  painter.save();
  static QRectF rectangle_outer(-95, -95, 190, 190);
  static QRectF rectangle_inner(-87, -87, 174, 174);
  painter.setBrush(overrun_color);
  QPainterPath path;
  path.arcTo(rectangle_outer, 0.0, 108.0);
  path.arcTo(rectangle_inner, 108, -108);
  painter.drawPath(path);
  painter.restore();

  // 绘制大刻度
  painter.save();
  painter.setPen(QPen(normal_color, 1,  Qt::SolidLine));
  painter.rotate(90);
  for (int i = 0; i < 21; ++i) {
    painter.drawLine(88, 0, 94, 0);
    painter.rotate(13.5);
  }
  painter.restore();

  // 绘制小刻度
  painter.save();
  painter.setPen(QPen(normal_color, 1,  Qt::SolidLine));
  painter.rotate(90);
  for (int i = 0; i < 100; ++i) {
    painter.drawLine(91, 0, 94, 0);
    painter.rotate(2.7);
  }
  painter.restore();

  // 绘制表盘数字
  painter.save();
  painter.rotate(90);
  painter.setPen(normal_color);
  painter.setFont(QFont("Times", 14));
  for (int i = 0; i < 11; ++i) {
    painter.save();
    if (i > 6) {
      painter.setPen(overrun_color);
    }
    painter.rotate(27.0 * i);
    painter.translate(76, 0);
    painter.rotate(270 - 27.0 * i);
    painter.drawText(QRect(-20, -10, 40, 20), Qt::AlignCenter, QString::number(i));
    painter.restore();
  }
  painter.restore();

  // 绘制指针
  static const QPoint hand[] = {
    QPoint(-4, 0),
    QPoint(0, 94),
    QPoint(4, 0),
    QPoint(0, -6)
  };
  static QColor hand_color(26, 245, 245, 176);
  painter.save();
  painter.setPen(Qt::NoPen);
  painter.setBrush(hand_color);
  painter.rotate(27.0 * (_rpm / 1000.0));
  painter.drawConvexPolygon(hand, 4);
  painter.restore();

  // 绘制文字
  painter.save();
  painter.setPen(normal_color);
  painter.setFont(QFont("DejaVu Sans", 8));
  painter.drawText(QRect(-50, -70, 100, 50), Qt::AlignCenter, "×1000");
  painter.setFont(QFont("DejaVu Sans", 8, 50, true));
  painter.drawText(QRect(-50, 34, 32, 16), Qt::AlignCenter, "RPM");
  painter.restore();
}

void FrArmaturenbrett::draw_speedometer(QPainter& painter) {
  painter.save();

  painter.setPen(QColor(64, 64, 245));
  painter.setFont(QFont("DejaVu Sans", 6, 50, true));
  painter.drawText(QRect(80, 50, 70, 20), Qt::AlignCenter, "SPEED");

  painter.setPen(QColor(26, 245, 245));
  painter.setFont(QFont("DejaVu Sans", 24, 63, true));
  painter.drawText(QRect(80, 50, 70, 50), Qt::AlignBottom | Qt::AlignLeft, QString("%0").arg(QString::number(_speed), 3,'0'));

  painter.setPen(QColor(26, 245, 245));
  painter.setFont(QFont("DejaVu Sans", 8, 63, true));
  painter.drawText(QRect(145, 75, 40, 20), Qt::AlignBottom | Qt::AlignLeft, "km/h");

  painter.restore();
}

void FrArmaturenbrett::draw_gear(QPainter& painter) {
  static QRect gear_rect(0, 0, 80, 80);
  static QRect suffix_rect(48, 48, 32, 32);
  static QFont suffix_font("DejaVu Sans", 16, 63, true);

  painter.save();
  painter.setPen(QPen(QColor(26, 245, 245), 1,  Qt::SolidLine));
  painter.setFont(QFont("DejaVu Sans", 48, 63, true));

  switch (_gear) {
    case kGear_1:
      painter.drawText(gear_rect, Qt::AlignCenter, QString::number(_gear));
      painter.setFont(suffix_font);
      painter.drawText(suffix_rect, Qt::AlignCenter, "st");
    break;
    case kGear_2:
      painter.drawText(gear_rect, Qt::AlignCenter, QString::number(_gear));
      painter.setFont(suffix_font);
      painter.drawText(suffix_rect, Qt::AlignCenter, "nd");
    break;
    case kGear_3:
      painter.drawText(gear_rect, Qt::AlignCenter, QString::number(_gear));
      painter.setFont(suffix_font);
      painter.drawText(suffix_rect, Qt::AlignCenter, "rd");
    break;
    case kGear_4:
    case kGear_5:
    case kGear_6:
    case kGear_7:
    case kGear_8:
      painter.drawText(gear_rect, Qt::AlignCenter, QString::number(_gear));
      painter.setFont(suffix_font);
      painter.drawText(suffix_rect, Qt::AlignCenter, "th");
    break;
    case kGear_D:
      painter.drawText(gear_rect, Qt::AlignCenter, "D");
    break;
    case kGear_N:
      painter.drawText(gear_rect, Qt::AlignCenter, "N");
    break;
    case kGear_P:
      painter.drawText(gear_rect, Qt::AlignCenter, "P");
    break;
    case kGear_R:
      painter.drawText(gear_rect, Qt::AlignCenter, "R");
    break;
    default:
    break;
  }

  painter.restore();
}

void FrArmaturenbrett::draw_thermometer(QPainter& painter) {
  painter.save();

  painter.drawImage(QRect(115, -60, 8, 16), QImage("://images/temperature-icon.png"));

  painter.translate(-160, 100);

  static QColor normal_color(26, 245, 245, 245);
  static QColor overrun_color(245, 64, 64, 225);

  // 绘制表盘外檐
  painter.save();
  painter.setPen(QPen(normal_color, 1, Qt::SolidLine));
  QRect rect(-300, -300, 600, 600);
  painter.drawArc(rect, 12 * 16, 20 * 16);
  painter.restore();

  // 绘制刻度
  painter.save();
  painter.setPen(QPen(normal_color, 1, Qt::SolidLine));
  painter.rotate(-12);
  painter.drawLine(300, 0, 306, 0);
  painter.rotate(-10);
  painter.drawLine(300, 0, 304, 0);
  painter.rotate(-10);
  painter.drawLine(300, 0, 306, 0);
  painter.restore();

  // 绘制刻度值
  painter.save();
  painter.setPen(normal_color);
  painter.setFont(QFont("DejaVu Sans", 6));

  painter.rotate(-12);
  painter.save();
  painter.translate(316, 0);
  painter.rotate(12);
  painter.drawText(QRect(-20, -10, 40, 20), Qt::AlignCenter, QString::number(0) + "°C");
  painter.restore();

  painter.rotate(-10);
  painter.save();
  painter.translate(317, 0);
  painter.rotate(22);
  painter.drawText(QRect(-20, -10, 40, 20), Qt::AlignCenter, QString::number(50) + "°C");
  painter.restore();

  painter.rotate(-10);
  painter.save();
  painter.translate(320, 0);
  painter.rotate(32);
  painter.drawText(QRect(-20, -10, 40, 20), Qt::AlignCenter, QString::number(100) + "°C");
  painter.restore();

  painter.restore();

  // 绘制红色区域
  painter.save();
  static QRectF rectangle_outer(-304, -304, 608, 608);
  static QRectF rectangle_inner(-300.5, -300.5, 601, 601);
  painter.setBrush(overrun_color);
  QPainterPath path;
  path.arcTo(rectangle_outer, 28, 3.9);
  path.arcTo(rectangle_inner, 31.9, -3.9);
  painter.drawPath(path);
  painter.restore();

  // 绘制指针
  painter.save();
  painter.setPen(QPen(overrun_color, 1, Qt::SolidLine));
  painter.rotate(-12 - 0.2 * _temperature);
  painter.drawLine(298, 0, 306, 0);
  painter.restore();

  painter.restore();
}

void FrArmaturenbrett::draw_oil_meter(QPainter& painter) {
  painter.save();

  painter.drawImage(QRect(-130, -60, 16, 16), QImage("://images/fuel-icon.png"));

  painter.translate(160, 100);
  painter.rotate(180);

  static QColor normal_color(26, 245, 245, 245);
  static QColor overrun_color(245, 64, 64, 225);

  // 绘制表盘外檐
  painter.save();
  painter.setPen(QPen(normal_color, 1,  Qt::SolidLine));
  QRect rect(-300, -300, 600, 600);
  painter.drawArc(rect, -12 * 16, -20 * 16);
  painter.restore();

  // 绘制刻度
  painter.save();
  painter.setPen(QPen(normal_color, 1,  Qt::SolidLine));
  painter.rotate(12);
  painter.drawLine(300, 0, 306, 0);
  painter.rotate(10);
  painter.drawLine(300, 0, 304, 0);
  painter.rotate(10);
  painter.drawLine(300, 0, 306, 0);
  painter.restore();

  // 绘制刻度值
  painter.save();
  painter.setPen(normal_color);
  painter.setFont(QFont("DejaVu Sans", 6));

  painter.rotate(12);
  painter.save();
  painter.translate(316, 0);
  painter.rotate(168);
  painter.drawText(QRect(-20, -10, 40, 20), Qt::AlignCenter, QString::number(0) + "%");
  painter.restore();

  painter.rotate(10);
  painter.save();
  painter.translate(317, 0);
  painter.rotate(158);
  painter.drawText(QRect(-20, -10, 40, 20), Qt::AlignCenter, QString::number(50) + "%");
  painter.restore();

  painter.rotate(10);
  painter.save();
  painter.translate(320, 0);
  painter.rotate(148);
  painter.drawText(QRect(-20, -10, 40, 20), Qt::AlignCenter, QString::number(100) + "%");
  painter.restore();

  painter.restore();

  // 绘制红色区域
  painter.save();
  static QRectF rectangle_outer(-304, -304, 608, 608);
  static QRectF rectangle_inner(-300.5, -300.5, 601, 601);
  painter.setBrush(overrun_color);
  QPainterPath path;
  path.arcTo(rectangle_outer, -12.1, -3.9);
  path.arcTo(rectangle_inner, -16, 3.9);
  painter.drawPath(path);
  painter.restore();

  // 绘制指针
  painter.save();
  painter.setPen(QPen(overrun_color, 1, Qt::SolidLine));
  painter.rotate(12 + 0.2 * _oil);
  painter.drawLine(298, 0, 306, 0);
  painter.restore();

  painter.restore();
}

效果图

在这里插入图片描述

苏三爱吃炸酱面
关注
  • 9
    点赞
  • 踩
  • 86
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
专栏目录
Qwt 使用QwtDial绘制汽车仪表盘
希望能帮助大家，希望大家多多支持，你们的支持是我前进的动力。
11-01 274
QwtDial是Qwt库中的一个类，用于绘制一个可旋转的仪表盘。
Qt仪表盘控价QDial的使用介绍
琅嬛福地
07-25 2471
仪表盘控件QDial在Qt Designer的input widgets 模块，如下图： 仪表盘在车载行业用的比较多，显示车速，油量等信息， 拖拽一个QDial、QPressBar到界面上，如下图： QDial是一个Slider, 派生于QAbstractSlider，也继承了它的信号，例如当仪表盘的值变化时，就会触发 valueChanged，这些都是它的父类QAbstractSlider的信号，如下： Q_SIGNALS: void valu...
Qt自定义控件--仪表盘源码
08-17
源码使用Qt4.8.6和Qt5.7.1编译均没有问题。源码解释请参考博客：https://blog.csdn.net/baidu_33850454/article/details/81773323
QT控件仪表盘等.zip
03-26
QT精美控件含源码，约20个左右，包含头文件和实现文件，设计精美
【QT篇】汽车仪表盘
最新发布
m0_66492811的博客
04-14 353
QT项目
Qt汽车仪表控件（一）
wojiaoanchao的博客
01-22 6065
临近春节，单位工作比较空闲。所以拜读了一遍大佬们的控件代码。同时也想着自己制作一个。 在网上找到了一个汽车电子仪表的图片。感觉实现及效果都相对可以。所以花了半天时间写了个demo。后续还会增加功能，及尽可能完善该图功能，先上图。 图片来源于网络，如有...
QT学习——汽车仪表盘
weixin_60418924的博客
02-26 1309
是Qt框架中一个重要的事件类，专门用于处理绘图事件。当Qt视图组件需要重绘自己的一部分时，就会产生事件。这通常发生在以下几种情况：1.：当窗口或控件第一次出现在屏幕上时，系统会生成一个事件， 通知窗口进行自身的绘制。2.：当用户改变窗口的大小时，窗口的内容通常需要重新绘制以适应新的尺寸。3.：如果窗口被其他窗口遮挡，然后又重新露出来，被遮挡的部分通 常需要重新绘制。4.：通过调用QWidget的update()或repaint()方法，可以手动触发重绘事件。在Qt。
Qt自定义汽车仪表盘控件
10-28
qt绘制的汽车仪表盘，表盘还是比较漂亮的，使用Qt环形渐变进行表盘外围的颜色值置，简单Demo展示
C++ Qt5进阶之复杂控件自定义4 Qt 实现温度计，数字时钟，示波器，汽油表盘，机油表盘，时间进度，速度表控件大集合
chenchao的专栏
05-14 3341
Qt 实现温度计，数字时钟，示波器，汽油表盘，机油表盘，时间进度，速度表控件大集合。 这种控件没有前面几个那种复杂的交互，所以用Qt C++写起来非常简单，所以就不一一列举了。直接上图，干脆来个控件大集合。 要点： 利用Qt 的paintEvent绘图函数。 利用QPainter 的drawLine drawPie drawPixmap等函数 利用QPen QBrush画笔，填充 QP...
Qt 自定义控件 云台仪表盘控件
09-18
Qt 自定义控件 云台仪表盘控件
Qt编写的速度仪表盘
02-26
使用Qt4编写的动态仪表，注释详细，有详细的文章指导讲解-我的博客《QT实战开发》
Qt自定义控件实现简易仪表盘
12-23
本文实例为大家分享了Qt自定义控件实现简易仪表盘的具体代码，供大家参考，具体内容如下 Qt自定义控件12：简易仪表盘（根据liudianwu大神的界面自己写的代码，建议去学习刘大神，会受益良多的） 先看效果图： 思路...
Qt自绘汽车仪表盘-1
youyicc
09-05 4002
效果图
一、Qt汽车仪表盘之绘制背景-绘制饼图
weixin_45571586的博客
01-31 764
Qt汽车仪表盘之绘制背景-绘制饼图
HMI-14-[Qt 布局]：测速表和油表
DreamLife
09-25 2007
基于Qt的汽车仪表模拟 程序体验地址：https://pan.baidu.com/s/1rQFZx5JIud8lWdjMHl0tpg 目前版本还没有成功把字体打包的程序中，为了更好的效果体验，请先安装文件中的两个字体 效果图 车速表，对外的接口 /** * @brief selfInspection * 转速表自检程序 */ ...
Qt编写自定义控件12-进度仪表盘
chengye5264的博客
04-29 302
前言 进度仪表盘主要应用场景是标识一个任务进度完成的状况等，可以自由的设置范围值和当前值，为了美观还提供了四种指示器（圆形指示器/指针指示器/圆角指针指示器/三角形指示器），各种颜色都可以设置，其中的动画效果采用的QPropertyAnimation类来实现，主要是线性插值法，生成一定规则的数...
Qt自定义控件之仪表盘的完整实现
独行猫a 的沉淀、积累、总结。天天学习，好好向上...c/c++,嵌入式 linux,Android,HarmonyOS)
09-21 7082
基于QT的仪表盘有很多种办法，比如使用QWT或Echart组件，或者基于QT的绘图功能绘制，或者基于美工提供的图片的基础上增加动态效果。然而搞明白QT自定义控件的绘图后，这种实现是最简单的。且定制度高，想要什么效果就可以自己绘制个。这里介绍下Qt自定义控件之仪表盘的完整实现。
QT仪表控件
XZG195913346的博客
07-09 732
效果 头文件 #ifndef GAUGESPEED_H #define GAUGESPEED_H #include <QWidget> #include <QPainter> #include <QBrush> #include <QColor> #include <QPen> #include <QtMath> #include <QTimer> #include <QTextCodec> namespa
C++/Qt：C++test单元测试框架
热门推荐
炸酱面和他的博客们
07-02 1万+
本文简要描述了如何在C++test中进行mingw环境下qt的单元测试方法，以及一些c++test的使用小技巧。
QT：滑块滑动控制仪表盘
06-12
您好！要实现滑块滑动控制仪表盘，可以按照以下步骤进行： 1.在Qt Designer中设计界面，将滑块和仪表盘控件拖入界面中。 2.在代码中获取滑块和仪表盘的指针，可以使用以下代码： ```cpp QSlider* slider = ui->slider; // 获取滑块指针 QDial* dial = ui->dial; // 获取仪表盘指针 ``` 3.连接滑块的valueChanged()信号和仪表盘的setValue()槽，这样当滑块的值改变时，仪表盘的值也会随之改变。可以使用以下代码： ```cpp connect(slider, &QSlider::valueChanged, dial, &QDial::setValue); ``` 4.可以设置滑块的范围和初始值，以及仪表盘的范围和初始值，例如： ```cpp slider->setRange(0, 100); // 滑块的范围是0~100 slider->setValue(50); // 滑块的初始值是50 dial->setRange(0, 100); // 仪表盘的范围是0~100 dial->setValue(50); // 仪表盘的初始值是50 ``` 这样，就可以实现滑块滑动控制仪表盘的功能了。希望能对您有所帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值