用QT写一个车速表

news2025/6/2 8:46:55

主要包含以下绘制步骤:

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"));
    }

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2394075.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

数控技术应用理实一体化平台VR实训系统

::产品概述:: 目前我国本科类院校学生普遍存在的问题就是缺少对实际工作的了解&#xff0c;一直在学习相关专业的理论知识&#xff0c;对社会的相关企业的用人情况不了解。这也就直接导致了毕业的学生和社会上的用人单位需求有点脱节&#xff0c;这也是由于我国的现行本科教育侧…

C# 将HTML文档、HTML字符串转换为图片

在.NET开发中&#xff0c;将HTML内容转换为图片的需求广泛存在于报告生成、邮件内容存档、网页快照等场景。Free Spire.Doc for .NET作为一款免费的专业文档处理库&#xff0c;无需Microsoft Word依赖&#xff0c;即可轻松实现这一功能。本文将深入解析HTML文档和字符串转图片两…

界面控件DevExpress WinForms v24.2新版亮点:富文本编辑器功能全新升级

DevExpress WinForms拥有180组件和UI库&#xff0c;能为Windows Forms平台创建具有影响力的业务解决方案。DevExpress WinForms能完美构建流畅、美观且易于使用的应用程序&#xff0c;无论是Office风格的界面&#xff0c;还是分析处理大批量的业务数据&#xff0c;它都能轻松胜…

华为云Flexus+DeepSeek征文|华为云 Flexus X 加速 Dify 平台落地:高性能、低成本、强可靠性的云上选择

目录 前言 1 一键部署 Dify 平台的完整步骤 1.1 选择模板 1.2 参数配置 1.3 资源栈设置 1.4 配置确认与部署 2 Flexus X 服务器的技术优势 2.1 柔性算力随心配 2.2 一直加速一直快 2.3 越用越省降本多 2.4 安全可靠更放心 3 Flexus X 在 Dify 解决方案中的性能体验…

Jenkins 2.479.1安装和邮箱配置教程

1.安装 在JDK安装并设置环境变量完成后&#xff0c;下载官网对应的war版本&#xff0c;在对应目录下打开命令行窗口并输入 java -jar jenkins.war其余参数感兴趣可以自行查阅&#xff0c;这里启动的 jenkins 服务默认占用8080端口&#xff0c;在浏览器输入 localhost:8080进入…

DFS入门刷题c++

目录 821. 跳台阶 - AcWing题库 ​92. 递归实现指数型枚举 - AcWing题库 ​P1706 全排列问题 - 洛谷 (luogu.com.cn) P1157 组合的输出 - 洛谷 (luogu.com.cn) ​P1036 [NOIP 2002 普及组] 选数 - 洛谷 (luogu.com.cn) P2089 烤鸡 - 洛谷 (luogu.com.cn) P1088 [NOIP 2…

ToolsSet之:十六进制及二进制编辑运算工具

ToolsSet是微软商店中的一款包含数十种实用工具数百种细分功能的工具集合应用&#xff0c;应用基本功能介绍可以查看以下文章&#xff1a; Windows应用ToolsSet介绍https://blog.csdn.net/BinField/article/details/145898264 ToolsSet中Number菜单下的Hex Operate工具可以进…

【Python训练营打卡】day40 @浙大疏锦行

DAY 40 训练和测试的规范写法 知识点回顾&#xff1a; 1. 彩色和灰度图片测试和训练的规范写法&#xff1a;封装在函数中 2. 展平操作&#xff1a;除第一个维度batchsize外全部展平 3. dropout操作&#xff1a;训练阶段随机丢弃神经元&#xff0c;测试阶段eval模式关闭dropo…

MCP Server的五种主流架构:从原理到实践的深度解析

&#x1f525;「炎码工坊」技术弹药已装填&#xff01; 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】 在AI大模型与外部数据交互的浪潮中&#xff0c;MCP Server&#xff08;Model Context Protocol Server&#xff09;已成为连接模型与现实世界的桥梁。本文…

跨协议协同智造新实践:DeviceNet-EtherCAT网关驱动汽车焊接装配效能跃迁

在汽车制造领域&#xff0c;机器人协作对于提升生产效率与产品质量至关重要。焊接、装配等关键环节&#xff0c;需要机器人与各类设备紧密配合。JH-DVN-ECT疆鸿智能的devicenet从站转ethercat主站协议网关&#xff0c;成为实现这一高效协作的得力助手&#xff0c;尤其是在连接欧…

让 Deepseek 写一个尺码计算器

下面是一个简单的尺码计算器微信小程序的代码实现&#xff0c;包含页面布局、逻辑处理和样式。 1. 项目结构 size-calculator/ ├── pages/ │ ├── index/ │ │ ├── index.js │ │ ├── index.json │ │ ├── index.wxml │ │ └── inde…

代码随想录算法训练营第60期第五十三天打卡

大家好&#xff0c;我们今天来到了最后一章图论&#xff0c;其实图论比较难&#xff0c;涉及的算法也比较多&#xff0c;今天比较重要的就是深度优先搜索与广度优先搜索&#xff0c;后面的迪杰斯特拉算法等算法在我们求最短路都会涉及到&#xff0c;还有最近公共祖先&#xff0…

Nacos实战——动态 IP 黑名单过滤

1、需求分析 一些恶意用户&#xff08;‏可能是黑客、爬虫、DDoS ؜攻击者&#xff09;可能频繁请求服务器资​源&#xff0c;导致资源占用过高。针对这种问题&#xff0c;可以通过IP‏ 封禁&#xff0c;可以有效拉؜黑攻击者&#xff0c;防止资源​被滥用&#xff0c;保障合法…

实验设计与分析(第6版,Montgomery)第5章析因设计引导5.7节思考题5.14 R语言解题

本文是实验设计与分析&#xff08;第6版&#xff0c;Montgomery著&#xff0c;傅珏生译) 第5章析因设计引导5.7节思考题5.14 R语言解题。主要涉及方差分析&#xff0c;正态假设检验&#xff0c;残差分析&#xff0c;交互作用图。 dataframe<-data.frame( strengthc(9.60,9.…

在Ubuntu20.04上安装ROS Noetic

本章教程,主要记录在Ubuntu20.04上安装ROS Noetic。 一、添加软件源 sudo sh -c . /etc/lsb-release && echo "deb http://mirrors.tuna.tsinghua.edu.cn/ros/ubuntu/ `lsb_release -cs` main" > /etc/apt/sources.list.d/ros-latest.list二、设置秘钥 …

python里面导入yfinance的时候报错

我的代码&#xff1a; import yfinance as yf import os proxy http://127.0.0.1:7890 # 代理设置&#xff0c;此处修改 os.environ[HTTP_PROXY] proxy os.environ[HTTPS_PROXY] proxydata yf.download("AAPL",start"2010-1-1",end"2021-8-1&quo…

winform LiveCharts2的使用--图表的使用

介绍 对于图标&#xff0c;需要使用到livechart2中的CartesianChart 控件&#xff0c;是一个“即用型”控件&#xff0c;用于使用笛卡尔坐标系创建绘图。需要将Series属性分配一组ICartesianSeries。 例如下面代码&#xff0c;创建一个最简单的图表&#xff1a; cartesianCha…

【计算机网络】IPv6和NAT网络地址转换

IPv6 IPv6协议使用由单/双冒号分隔一组数字和字母&#xff0c;例如2001:0db8:85a3:0000:0000:8a2e:0370:7334&#xff0c;分成8段。IPv6 使用 128 位互联网地址&#xff0c;有 2 128 2^{128} 2128个IP地址无状态地址自动配置&#xff0c;主机可以通过接口标识和网络前缀生成全…

flutter简单自定义跟随手指滑动的横向指示器

ScrollController _scrollController ScrollController();double _scrollIndicatorWidth 60.w;//指示器的长度double _maxScrollPaddingValue 30.w;//指示器中蓝条可移动的最大距离double _scrollPaddingValue 0.0;//指示器中蓝条左边距(蓝条移动距离)overridevoid initSta…

有机黑鸡蛋与普通鸡蛋:差异剖析与选购指南

在我们的日常饮食结构里&#xff0c;鸡蛋始终占据着不可或缺的位置&#xff0c;是人们获取营养的重要来源。如今&#xff0c;市场上鸡蛋种类丰富&#xff0c;除了常见的普通鸡蛋&#xff0c;有机黑鸡蛋也逐渐崭露头角&#xff0c;其价格通常略高于普通鸡蛋。这两者究竟存在哪些…