当前位置： 首页 > article >正文

用QT写一个车速表

article 2025/8/23 20:51:08

主要包含以下绘制步骤：

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.lryc.cn/news/2394075.html

相关文章：

  • （19）java在区块链中的应用
  • 数控技术应用理实一体化平台VR实训系统
  • C# 将HTML文档、HTML字符串转换为图片
  • 界面控件DevExpress WinForms v24.2新版亮点：富文本编辑器功能全新升级
  • 华为云Flexus+DeepSeek征文｜华为云 Flexus X 加速 Dify 平台落地：高性能、低成本、强可靠性的云上选择
  • Jenkins 2.479.1安装和邮箱配置教程
  • MySQL 大战 PostgreSQL
  • DFS入门刷题c++
  • ToolsSet之：十六进制及二进制编辑运算工具
  • 服务器液冷：突破散热瓶颈，驱动算力革命的“冷静”引擎
  • 1.2 HarmonyOS NEXT分布式架构核心技术解析
  • 【Python训练营打卡】day40 @浙大疏锦行
  • MCP Server的五种主流架构：从原理到实践的深度解析
  • 跨协议协同智造新实践：DeviceNet-EtherCAT网关驱动汽车焊接装配效能跃迁
  • 在Linux上安装Docker并配置镜像加速器：从入门到实战
  • 让 Deepseek 写一个尺码计算器
  • 代码随想录算法训练营第60期第五十三天打卡
  • Nacos实战——动态 IP 黑名单过滤
  • 实验设计与分析（第6版，Montgomery)第5章析因设计引导5.7节思考题5.14 R语言解题
  • 在Ubuntu20.04上安装ROS Noetic
  • python里面导入yfinance的时候报错
  • winform LiveCharts2的使用--图表的使用
  • 【计算机网络】IPv6和NAT网络地址转换
  • flutter简单自定义跟随手指滑动的横向指示器
  • 项目日记 -Qt音乐播放器 -搜索模块
  • JavaScript 性能优化实战研讨
  • 有机黑鸡蛋与普通鸡蛋：差异剖析与选购指南
  • CTFHub-RCE 命令注入-无过滤
  • spring IOC控制反转
  • hot100 -- 1.哈希系列