用QT写一个车速表

于 2025-05-28 15:31:25 发布
阅读量998 收藏 16
点赞数 28
CC 4.0 BY-SA版权
文章标签： qt python 信息可视化 汽车 arm开发
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lanxiao8888/article/details/148285023

主要包含以下绘制步骤：

1、绘制画布：

/*
 * 绘制画布
*/
void Widget::initCanvas(QPainter &painter)
{
    //消除锯齿
    painter.setRenderHint(QPainter::Antialiasing,true);
    //设置底色
    painter.setBrush(QColor(0,0,0));
    painter.drawRect(rect());
    //平移坐标系原点位置
    QPoint center(rect().width()/2, rect().height()*0.6);
    painter.translate(center);
}

2.画中心小圆

/*
 * 画小圆
*/
void Widget::drawMiddleCircle(QPainter &painter, int radius)
{
    //设置画笔颜色和宽度
    painter.setPen(QPen(QColor(255,255,255),3));
    //原点坐标（0，0）绘制半径为radius的圆
    painter.drawEllipse(QPoint(0,0), radius, radius);
}

3.画仪表盘刻度线

/*
 * 画刻度
*/
void Widget::drawScaleLine(QPainter &painter, int radius)
{
    //总计60个小刻度，每一个小刻度的角度值
    angle = 240*1.0 / 60;
    //保存当前坐标
    painter.save();
    painter.setPen(QPen(Qt::white, 5));
    //设置起始刻度位置
    painter.rotate(startAngle);
    for(int i=0; i <=60; i++)
    {
        if( i>=40 )
        {
            //第40个刻度后，绘制画笔修改成红色
            painter.setPen(QPen(Qt::red, 5));
        }
        if(i%5 == 0)
        {
            //绘制长刻度
            painter.drawLine(radius-20, 0, radius-3, 0);
        }
        else
        {
            //绘制短刻度
            painter.drawLine(radius-8, 0, radius-3, 0);
        }
        //绘制完一个刻度旋转一次坐标
        painter.rotate(angle);
    }
    //恢复坐标
    painter.restore();
    painter.setPen(QPen(Qt::white, 5));
}

4、绘制刻度值

/*
 * 画刻度值
*/
void Widget::drawScaleValue(QPainter &painter, int radius)
{
    //设置字体类型和大小
    QFont textFont("Arial",15);
    //设置粗体
    textFont.setBold(true);
    painter.setFont(textFont);
    int text_r = radius - 49;
    for(int i=0; i<=60; i++)
    {
        if(i%5 == 0)
        {
            if(i>=40)
            {
                painter.setPen(QPen(Qt::red, 5));
            }
            //保存当前坐标系
            painter.save();
            int delX = qCos((210-angle*i)*M_PI/180) * text_r;
            int delY = qSin(qDegreesToRadians(210-angle*i)) * text_r;
            //平移坐标系
            painter.translate(QPoint(delX,-delY));
            //旋转坐标系
            painter.rotate(-120+angle*i);
            //写上刻度值，文字居中
            painter.drawText(-25,-25,50,30,Qt::AlignCenter,QString::number(i*4));
            //恢复坐标系
            painter.restore();
        }
    }
    painter.setPen(QPen(Qt::white, 5));
}

5、绘制仪表指针

/*
 * 画指针
*/
void Widget::drawPoint(QPainter &painter, int radius)
{
    //保存当前坐标
    painter.save();
    //设置画刷颜色
    painter.setBrush(Qt::white);
    //设置画笔为无线条
    painter.setPen(Qt::NoPen);
    static const QPointF points[4] = {
        QPointF(0, 0.0),
        QPointF(radius*2.0/3, -1.1),
        QPointF(radius*2.0/3, 1.1),
        QPointF(0, 15.0)
    };
    //坐标选旋转
    painter.rotate(startAngle + angle * currentValue);
    //绘制多边形
    painter.drawPolygon(points, 4);
    //恢复坐标
    painter.restore();
}

6、绘制指针扫过的扇形

/*
 * 画扇形
*/
void Widget::drawSpeedSector(QPainter &painter, int radius)
{
    //定义矩形区域
    QRect rentangle(-radius, -radius, radius*2, radius*2);
    //设置画笔无线条
    painter.setPen(Qt::NoPen);
    //设置画刷颜色
    painter.setBrush(QColor(255,0,0,80));
    //绘制扇形
    painter.drawPie(rentangle, (360-startAngle)*16, -angle*currentValue*16);
}

7、绘制渐变的内圆

/*
 * 画渐变内圆
*/
void Widget::drawInnerEllipse(QPainter &painter, int radius)
{
    QRadialGradient radial(0,0,radius);
    //中心颜色
    radial.setColorAt(0.0,QColor(255,0,0,200));
    //外围颜色
    radial.setColorAt(1.0,QColor(0,0,0,100));
    //设置画刷渐变色
    painter.setBrush(radial);
    //画圆形
    painter.drawEllipse(QPoint(0,0), radius, radius);
}

Qt实现汽车仪表盘

在UI界面显示中，仪表盘的应用相对比较广泛，经常用于显示速度值，电压电流值等等，最终实现效果如下动态图片（文末提供给源工程下载）：

主要包含以下绘制步骤：

  1. 绘制画布

    复制代码

    /*
 * 绘制画布
*/
void Widget::initCanvas(QPainter &painter)
{
    //消除锯齿
    painter.setRenderHint(QPainter::Antialiasing,true);
    //设置底色
    painter.setBrush(QColor(0,0,0));
    painter.drawRect(rect());
    //平移坐标系原点位置
    QPoint center(rect().width()/2, rect().height()*0.6);
    painter.translate(center);
}

    复制代码

    实现效果：

  2. 画中心小圆

    复制代码

    /*
 * 画小圆
*/
void Widget::drawMiddleCircle(QPainter &painter, int radius)
{
    //设置画笔颜色和宽度
    painter.setPen(QPen(QColor(255,255,255),3));
    //原点坐标（0，0）绘制半径为radius的圆
    painter.drawEllipse(QPoint(0,0), radius, radius);
}

    复制代码

    实现效果：

  3. 画仪表盘刻度线

    复制代码

    /*
 * 画刻度
*/
void Widget::drawScaleLine(QPainter &painter, int radius)
{
    //总计60个小刻度，每一个小刻度的角度值
    angle = 240*1.0 / 60;
    //保存当前坐标
    painter.save();
    painter.setPen(QPen(Qt::white, 5));
    //设置起始刻度位置
    painter.rotate(startAngle);
    for(int i=0; i <=60; i++)
    {
        if( i>=40 )
        {
            //第40个刻度后，绘制画笔修改成红色
            painter.setPen(QPen(Qt::red, 5));
        }
        if(i%5 == 0)
        {
            //绘制长刻度
            painter.drawLine(radius-20, 0, radius-3, 0);
        }
        else
        {
            //绘制短刻度
            painter.drawLine(radius-8, 0, radius-3, 0);
        }
        //绘制完一个刻度旋转一次坐标
        painter.rotate(angle);
    }
    //恢复坐标
    painter.restore();
    painter.setPen(QPen(Qt::white, 5));
}

    复制代码

    实现效果：

  4. 绘制刻度值

    复制代码

    /*
 * 画刻度值
*/
void Widget::drawScaleValue(QPainter &painter, int radius)
{
    //设置字体类型和大小
    QFont textFont("Arial",15);
    //设置粗体
    textFont.setBold(true);
    painter.setFont(textFont);
    int text_r = radius - 49;
    for(int i=0; i<=60; i++)
    {
        if(i%5 == 0)
        {
            if(i>=40)
            {
                painter.setPen(QPen(Qt::red, 5));
            }
            //保存当前坐标系
            painter.save();
            int delX = qCos((210-angle*i)*M_PI/180) * text_r;
            int delY = qSin(qDegreesToRadians(210-angle*i)) * text_r;
            //平移坐标系
            painter.translate(QPoint(delX,-delY));
            //旋转坐标系
            painter.rotate(-120+angle*i);
            //写上刻度值，文字居中
            painter.drawText(-25,-25,50,30,Qt::AlignCenter,QString::number(i*4));
            //恢复坐标系
            painter.restore();
        }
    }
    painter.setPen(QPen(Qt::white, 5));
}

    复制代码

    实现效果：

  5. 绘制仪表指针

    复制代码

    /*
 * 画指针
*/
void Widget::drawPoint(QPainter &painter, int radius)
{
    //保存当前坐标
    painter.save();
    //设置画刷颜色
    painter.setBrush(Qt::white);
    //设置画笔为无线条
    painter.setPen(Qt::NoPen);
    static const QPointF points[4] = {
        QPointF(0, 0.0),
        QPointF(radius*2.0/3, -1.1),
        QPointF(radius*2.0/3, 1.1),
        QPointF(0, 15.0)
    };
    //坐标选旋转
    painter.rotate(startAngle + angle * currentValue);
    //绘制多边形
    painter.drawPolygon(points, 4);
    //恢复坐标
    painter.restore();
}

    复制代码

    实现效果：

  6. 绘制指针扫过的扇形

    复制代码

    /*
 * 画扇形
*/
void Widget::drawSpeedSector(QPainter &painter, int radius)
{
    //定义矩形区域
    QRect rentangle(-radius, -radius, radius*2, radius*2);
    //设置画笔无线条
    painter.setPen(Qt::NoPen);
    //设置画刷颜色
    painter.setBrush(QColor(255,0,0,80));
    //绘制扇形
    painter.drawPie(rentangle, (360-startAngle)*16, -angle*currentValue*16);
}

    复制代码

    实现效果：

  7. 绘制渐变的内圆

    复制代码

    /*
 * 画渐变内圆
*/
void Widget::drawInnerEllipse(QPainter &painter, int radius)
{
    QRadialGradient radial(0,0,radius);
    //中心颜色
    radial.setColorAt(0.0,QColor(255,0,0,200));
    //外围颜色
    radial.setColorAt(1.0,QColor(0,0,0,100));
    //设置画刷渐变色
    painter.setBrush(radial);
    //画圆形
    painter.drawEllipse(QPoint(0,0), radius, radius);
}

    复制代码

    实现效果：

  8. 绘制黑色内圈（用于显示速度值和单位的背景圆） 
    /*
 * 画黑色内圈
*/
void Widget::drawInnerEllipseBlack(QPainter &painter, int radius)
{
    //设置画刷
    painter.setBrush(Qt::black);
    //绘制圆形
    painter.drawEllipse(QPoint(0,0), radius, radius);
}
  9. 绘制当前数值 
    /*
 * 绘制当前数值
*/
void Widget::drawCurrentSpeed(QPainter &painter)
{
    painter.setPen(Qt::white);
    //绘制数值
    QFont font("Arial", 28);
    font.setBold(true);
    painter.setFont(font);
    painter.drawText(QRect(-60,-60,120,70),Qt::AlignCenter,QString::number(currentValue*4));
    //绘制单位
    QFont font_u("Arial", 13);
    painter.setFont(font_u);
    painter.drawText(QRect(-60,-60,120,160),Qt::AlignCenter,"km/h");
}
  10. 绘制发光外壳 
    /*
 * 画外壳，发光外圈
*/
void Widget::drawEllipseOutSkirts(QPainter &painter, int radius)
{
    //设置扇形绘制区域
    QRect outAngle(-radius, -radius, 2*radius, 2*radius);
    painter.setPen(Qt::NoPen);
    //设置渐变色
    QRadialGradient radia(0,0,radius);
    radia.setColorAt(1,QColor(255,0,0,200));
    radia.setColorAt(0.97,QColor(255,0,0,120));
    radia.setColorAt(0.9,QColor(0,0,0,0));
    radia.setColorAt(0,QColor(0,0,0,0));
    painter.setBrush(radia);
    //绘制圆形
    painter.drawPie(outAngle,(360-150)*16,-angle*61*16);
}
  11. 绘制Logo图标
  12. /*
 * 画LOGO
*/
void Widget::drawLogo(QPainter &painter, int radius)
{
    //定义Logo绘制区域
    QRect rectLogo(-65,radius*0.38,130,50);
    painter.drawPixmap(rectLogo,QPixmap("./logo2.png"));
}
lanxiao8888
关注
Qt示例6：用Qt画一个多彩色的汽车速度表
DICA的SEOer专栏
03-20 641
打开Qt Creator，选择“File” -> “New File or Project”，在“New Project”对话框中选择“Application” -> “Qt Widgets Application”。在设计模式下，选择“Main Window Form”中的“QWidget”，拖动到主窗口中。在QSlider的valueChanged()函数中，更新速度值并更新QLabel的显示。在QTimer的timeout()函数中，更新速度值并更新QLabel的显示。
基于Qt的速度仪表盘控件实现
最新发布
专注于 Qt/C++ 应用开发和机器视觉领域的开源项目分享。期待与您共同进步！
10-07 975
本文将详细讲解一个基于Qt的速度仪表盘控件的实现过程，并对代码进行详细的注释说明。该控件可以模拟汽车仪表盘的外观，并通过滑动条动态改变速度显示。本文将从代码结构、绘制组件到实现细节进行讲解，帮助您理解如何使用Qt框架自定义绘制控件。
QT 自定义控件之速度表盘
黑塞的博客
08-07 4019
近期由于工作不忙，就来做做自定义控件，做的不好，请给建议，以后会改。 那就直接本入正题吧： 头文件： #ifndef MAINWINDOW_H #define MAINWINDOW_H #include #include #include namespace Ui { class MainWindow; } class MainWindow : public QMainW
Qt编写的速度仪表盘
12-07
使用Qt4编写的动态仪表，注释详细，有详细的文章指导讲解-我的博客《QT实战开发》
Qt-Speedometer-Widget:Qt 车速表小部件
07-04
Qt-Speedometer-Widget 与 Qt Designer 兼容的 Qt Speedometer 小部件。 Speedometer wiget 需要 Qt 5.4。 要在 Qt Designer 中安装它，请按照的说明进行操作。
qt车速仪表盘源代码.7z
06-15
QT车速仪表盘源代码是基于QT框架开发的一款模拟汽车速度表的应用程序。QT是一个流行的、跨平台的C++图形用户界面应用程序开发框架，广泛应用于桌面、移动和嵌入式设备。这个源代码项目旨在帮助开发者了解如何在QT...
基于QT的汽车时速表
06-06
在本文中，我们将深入探讨如何使用Qt框架创建一个模拟汽车时速表的应用程序。Qt是一个跨平台的应用程序开发框架，广泛用于GUI（图形用户界面）设计，支持多种操作系统，如Windows、Linux和macOS等。"基于QT的汽车...
Qt车速表小部件：兼容Qt Designer的开发教程
资源摘要信息:"Qt-Speedometer-Widget是一个针对Qt框架设计的车速表小部件，它能够与Qt Designer兼容。这一小部件允许开发者在图形用户界面(GUI)设计中快速地添加车速表功能。Qt-Speedometer-Widget的设计目标是提供...
QT编写的速度仪表盘
03-07
用QT4编写了动态的速度仪表盘，纯代码绘制，画仪表盘可以借鉴
Qt实现自定义速度表盘控件
04-26
使用Qt框架实现自定义速度表盘控件，控件的大小，颜色，刻度值以及当前值可自定义，不过要自己进行扩展，基础框架都已搭建好。
Qt汽车仪表界面
11-14
【Qt汽车仪表界面】是一个基于Qt框架开发的模拟汽车仪表盘的应用程序示例。Qt是一个跨平台的C++图形用户界面应用程序开发框架，被广泛应用于桌面、移动和嵌入式设备上，尤其在创建GUI（图形用户界面）方面表现突出。...
Qt实现速度仪表盘
DarcyCode的博客
08-21 380
首先，我们设置绘图选项，如抗锯齿。然后，我们将坐标系移到窗口的中心，并进行比例缩放，以使绘制操作不受窗口大小的影响。在上述代码中，我们首先定义了一个名为Speedometer的自定义QWidget类，用于显示仪表盘。在main()函数中，我们创建了一个QApplication对象，并实例化了Speedometer类的一个对象。我们首先绘制了仪表盘的底部圆形背景，然后根据当前速度值旋转指针，并绘制红色的三角形指针。最后，我们绘制了刻度线，其中偶数刻度使用长线，奇数刻度使用短线，并在需要时旋转画布。
速度仪表的QT实现
08-15 2209
参考https://www.cnblogs.com/feiyangqingyun/p/10739099.html内容实现仪表自定义。 上面博客作者提供了SDK免费下载，可以直接在电脑上使用，测试过效果很赞。 但因为最后要实现在嵌入式上运行，需要编译源码，因为使用的控件不多，因此考虑自己根据上面的显示效果自己来实现。最后实现效果如下： 这里主要记录一下速度表 的实现，其他部件的实现大同小异，速度表主要有以下几个部件的绘制 ： 背景的绘制 刻度及刻度值的绘制 指针的绘制 增加显示...
Qt官方示例-速度仪表盘
Qt君
09-26 2157
该刻度盘控件为一个速度仪表盘。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值