使用QML绘制汽车时速表

已于 2022-08-11 08:23:33 修改
阅读量906 收藏 5
点赞数
分类专栏： QML 文章标签： 汽车 qt c++
于 2022-08-10 17:33:10 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/shouqw/article/details/126264708
版权

目录

使用QML绘制仪表

Qt看了一段时间了，一直觉得适宜做仪表等显示界面。对于QML也只是看看网上的代码，不求甚解。现在模仿网友的例子，自己亲手试一试，记录一下过程，也是在这里的第一篇文章。
本文参考 https://blog.csdn.net/t01051/article/details/107518308
Here we go!

新建QML工程

新建一个空的Quick应用。
在这里插入图片描述在这里插入图片描述
完成后，得到一个HelloWorld的空项目。
在这里插入图片描述

添加自定义控件

添加一个.qml文件，用来定义自己的时速表，然后在main.qml中导入使用。

在工程树的多个位置都可使用Add New来添加新的文件，添加的文件会默认放在当前位置下。这里在Resources/qml.qrc/下添加
在这里插入图片描述
在这里插入图片描述

定义控件

这里编写qml文件了。
根据所引文章，首先绘制了两个重叠的圆弧。使用property定义控件的必要属性，并使用onXxxxxxChanged（格式：onChanged）的信号处理器，当某个属性的值变更时，会触发Canvas的重绘（即mycanvas.requestPaint()）

//Mymeter.qml
import QtQuick 2.0

Item {
    id: meterItem
    width: 100
    height: 100

    property int btm_lineWidth: 15
    property color btm_bgcolor: Qt.rgba(0,0,0,0.1)
    property int btm_r: 20
    property double btm_startangle: 0
    property double btm_endangle: 90

    onBtm_bgcolorChanged:mycanvas.requestPaint()
    onBtm_endangleChanged: mycanvas.requestPaint()
    onBtm_lineWidthChanged: mycanvas.requestPaint()
    onBtm_rChanged: mycanvas.requestPaint()
    onBtm_startangleChanged: mycanvas.requestPaint()

    property int top_lineWidth: 15
    property color top_bgcolor: "lightgreen"
    property int top_r: 20
    property double top_startangle: 0
    property double top_endangle: 90

    onTop_bgcolorChanged: mycanvas.requestPaint()
    onTop_endangleChanged: mycanvas.requestPaint()
    onTop_lineWidthChanged: mycanvas.requestPaint()
    onTop_startangleChanged: mycanvas.requestPaint()
    onTop_rChanged: mycanvas.requestPaint()

    Canvas{
        id: mycanvas
        width: parent.width
        height: parent.height

        onPaint: {
            var ctx = getContext("2d");
            ctx.clearRect(0,0,mycanvas.width,mycanvas.height);

            ctx.lineWidth = meterItem.btm_lineWidth;
            ctx.strokeStyle = meterItem.btm_bgcolor;
            ctx.beginPath();
            ctx.arc(meterItem.width/2,meterItem.width/2,meterItem.btm_r,meterItem.btm_startangle/180*Math.PI,meterItem.btm_endangle/180*Math.PI);
            ctx.stroke();

            ctx.lineWidth = meterItem.top_lineWidth;
            ctx.strokeStyle = meterItem.top_bgcolor;
            ctx.beginPath();
            ctx.arc(meterItem.width/2,meterItem.width/2,meterItem.top_r,meterItem.top_startangle/180*Math.PI,meterItem.top_endangle/180*Math.PI);
            ctx.stroke();
        }
    }
}

在main.qml中引用自定义的仪表控件

import QtQuick 2.12
import QtQuick.Window 2.12


Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Mymeter{
    }
}

切换到设计界面，自定义的仪表控件已经被载入到界面中，点击导航下方的Mymeter类，右方可以看到其属性，更改自定义属性，可以直接看到更改效果。
在这里插入图片描述
同时，在main.qml中，Mymeter的属性已经更新。

添加刻度盘

在仪表上绘制表盘，首先定义表盘的一些属性，然后进行绘制

    ...
    // 刻度盘
    property color dial_color: "#000000"
    property int dial_lineWidth: 3
    property int dial_addR: 2          // 刻度盘圆弧与底层圆弧的距离
    property int dial_longNum: 5       // 刻度盘长刻度线的数量
    property int dial_longLen: 10      // 刻度盘长刻度线的长度

    onDial_addRChanged: mycanvas.requestPaint()
    onDial_colorChanged: mycanvas.requestPaint()
    onDial_lineWidthChanged: mycanvas.requestPaint()
    onDial_longLenChanged: mycanvas.requestPaint()
    onDial_longNumChanged: mycanvas.requestPaint()
    ...
     Canvas{
		...	
        onPaint: {
            ...
            ctx.lineWidth = meterItem.dial_lineWidth;
            ctx.strokeStyle = meterItem.dial_color;
            ctx.beginPath();
            ctx.arc(meterItem.width/2, meterItem.height/2, meterItem.btm_r+meterItem.btm_lineWidth+meterItem.dial_addR, meterItem.btm_startangle/180*Math.PI, meterItem.btm_endangle/180*Math.PI);
            var tmp_step = (meterItem.btm_endangle-meterItem.btm_startangle)/meterItem.dial_longNum;
            for(var i=meterItem.btm_startangle;i<meterItem.btm_endangle+tmp_step;i+=tmp_step) {
                 var tmp_x = (meterItem.width/2)+(meterItem.btm_r+meterItem.btm_lineWidth+meterItem.dial_addR)*Math.cos(i/180*Math.PI);
                 var tmp_y = (meterItem.height/2)+(meterItem.btm_r+meterItem.btm_lineWidth+meterItem.dial_addR)*Math.sin(i/180*Math.PI);
                 ctx.moveTo(tmp_x, tmp_y);
                 // 绘制长刻度线
                 ctx.lineTo(tmp_x+meterItem.dial_longLen*Math.cos(i/180*Math.PI), tmp_y+(meterItem.dial_longLen*Math.sin(i/180*Math.PI)));
            }
            ctx.stroke();

           ...
        }

添加刻度

直接使用basic控件，设置好位置，文字等。

在这里插入图片描述

添加控件

为仪表盘添加几个控件，一个开关用来控制顶层圆弧的线宽，滑块用来模拟汽车的速度，文本框用来显示速度。。。

在这里插入图片描述
在这里插入图片描述

代码

main.qml完整代码如下

import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.3


Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")

    Mymeter{
        id: meter_car
        x: 195
        y: 49
        width: 228
        height: 213
        dial_longNum: 10
        top_startangle: 140
        btm_startangle: 140
        btm_r: 80
        top_r: 80
        top_lineWidth: 15
        top_endangle: slider.value*1.3+140
        btm_lineWidth: 13
        btm_endangle: 400

        Text {
            id: element5
            x: 106
            y: -11
            width: 12
            height: 13
            text: qsTr("100")
            font.pixelSize: 12
        }

        Text {
            id: element6
            x: 156
            y: -1
            width: 13
            height: 14
            text: qsTr("120")
            font.pixelSize: 12
        }

        Text {
            id: element7
            x: 194
            y: 28
            width: 12
            height: 14
            text: qsTr("140")
            font.pixelSize: 12
        }

        Text {
            id: element9
            x: 218
            y: 77
            width: 12
            height: 14
            text: qsTr("160")
            font.pixelSize: 12
        }

        Text {
            id: element12
            x: 23
            y: 171
            width: 12
            height: 14
            text: qsTr("0")
            font.pixelSize: 12
        }

        Text {
            id: speed_unit
            x: 102
            y: 112
            width: 22
            height: 13
            text: qsTr("Km/h")
            font.pixelSize: 12
        }

        Text {
            id: speed
            x: 101
            y: 94
            width: 22
            height: 12
            text: slider.value
            font.pixelSize: 15
            horizontalAlignment: Text.AlignHCenter
        }

        Slider {
            id: slider
            x: 12
            y: 218
            stepSize: 1
            to: 200
            value: 0

            onValueChanged: {
               if(value<60) {
                    speed.color = "black"
                }
                else if(value<120) {
                    speed.color = "#f2ac28"
                }
                else {
                    speed.color = "red"
                }
                speed_unit.color = speed.color
            }
        }

        Switch {
            id: swi
            x: 251
            y: -38
            width: 101
            height: 40
            text: qsTr("Switch")
            onClicked: {
            if(swi.position)
                meter_car.top_lineWidth = meter_car.btm_lineWidth*0.6;

            else
                meter_car.top_lineWidth = meter_car.btm_lineWidth;

        }
    }

    Text {
        id: element
        x: 15
        y: 37
        width: 12
        height: 14
        text: qsTr("60")
        font.pixelSize: 12
    }

    Text {
        id: element1
        x: -1
        y: 132
        width: 12
        height: 14
        text: qsTr("20")
        font.pixelSize: 12
    }

    Text {
        id: element2
        x: -5
        y: 82
        width: 12
        height: 14
        text: qsTr("40")
        font.pixelSize: 12
    }

    Text {
        id: element4
        x: 54
        y: 0
        width: 18
        height: 14
        text: qsTr("80")
        font.pixelSize: 12
    }

    Text {
        id: element10
        x: 218
        y: 127
        width: 12
        height: 14
        text: qsTr("180")
        font.pixelSize: 12
    }

    Text {
        id: element11
        x: 199
        y: 171
        width: 12
        height: 14
        text: qsTr("200")
        font.pixelSize: 12
    }
    }
}

后续

后续完善代码，增加C++交互。

引用

引用博客链接

MSh_I
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
[QML开发笔记]-QML绘制仪表盘属性设置
Qt自定义控件及应用开发
04-24 899
[QML开发笔记]-QML绘制仪表盘属性设置 在[QML开发笔记]-QML绘制仪表盘介绍了使用QML绘制仪表盘的方法，在此基础上增加属性设置，动态改变属性，同样通过creator也可以设置相应属性。 效果： ...
qml绘制雷达图（蜘蛛网图）
12-04
qml绘制的雷达图，又叫蜘蛛网图。在做项目时结合网上的js的例子，自己封装的图形控件测试demo，可直接运行，Qt5.10
360 qml qt实现
qq_27081181的博客
06-13 503
一： 360 qml实现（网上下载，非本人实现，我只是做个搬运工，让需要的朋友可以借鉴参考，如有冒犯，请见谅） 网上下载的360主界面的qml实现，自己改了一下，在qt5.10版本亲测可用（低版本可能需要降低部分模块的版本），现将工程附在下面。有需要的朋友可用看看。 链接：https://pan.baidu.com/s/1thbwCLIioqTeugwTOQtr8w 提取码：ff12 复...
第一个实例：QT实现汽车电子仪表盘
smartvxworks的博客
09-03 2051
本实例通过QT实现汽车电子仪表盘的UI设计与实现。Qt 是一个1991年由Qt Company开发的跨平台C++图形用户界面应用程序开发框架。它既可以开发GUI程序，也可用于开发非GUI程序，比如控制台工具和服务器。Qt是面向对象的框架，使用特殊的代码生成扩展（称为元对象编译器(Meta Object Compiler, moc)）以及一些宏，Qt很容易扩展，并且允许真正地组件编程。2008年，Qt Company科技被诺基亚公司收购，Qt也因此成为诺基亚旗下的编程语言工具。
Qt绘制的多彩仪表盘
10-28
Qt绘制的多彩仪表盘简单Demo，指针所指向的面积划过的区域设置填充渐变，相对比较漂亮，Qt5下载直接编译运行，源码可见
Qt Qml圆形进度条动画（4分之3圆） 带进度条动画，类似汽车仪表盘动画
01-19
Qt Qml圆形进度条动画（4分之3圆） 带进度条动画，类似汽车仪表盘动画
qml 虚线绘制 多种绘制方式
05-19
qml 虚线绘制 多种绘制方式
QML之加速器仪表盘
huzhifei的专栏
12-12 156
QML 实现仪表盘加速器代码
基于QML的飞行仪表
shouqw的博客
10-24 1926
搬来GitHub上一个基于QML的飞行仪表项目
Qt Qml实现仪表盘动画
qq_38159549的博客
08-25 1009
Qt Qml代码实现的仪表盘动画。
qml绘制仪表盘控件
t01051的博客
07-22 4268
刚开始上手qt，说实话迷得很啊。。。 不过qt做的界面是真的漂亮，之前在b站看qt官方发布的一些视频，仪表盘是真的好看 今天倒腾了一天，用qml绘制了一个简单的汽车仪表控件，趁现在还热着，先记下来 新建一个空的qml工程 创建工程的时候要注意，工程路径中不能有中文，否则会导致编译失败 创建完成后按例编译运行，确保工程能正常编译，否则等写得差不多却发现无法正常编译那就很尴尬了。。。 再添加一个单独的.qml文件，我们在里面编写自定义的控件，这样在别的工程中只要载入这个qml文件就能
使用QML进行界面开发
03-01
ESM6802是英创公司推出的基于Freescalei.MX6DL双核处理器(ARMCortex-A9，主频1GHz)的高性能工控主板，imx6dl内部带有硬件3D、2D图像处理模块，能够对图像界面绘制进行硬件加速，使得应用程序显示更加快速流畅。...
QML地图绘制虚线Demo
04-19
QML提供了MapPolyline用于在地图上绘制线段，该线段是实线，因此我使用Canvas自定义绘制的方式在地图上绘制线段, 鼠标在地图上点击后，在点击位置添加图标 ，当有多个图标被添加到地图上后，计算各个图标间的距离，...
风丘电动汽车热管理方案 为您的汽车研发保驾护航
WINDHILL_的博客
04-24 977
风丘科技专注热管理领域，涵盖汽车空调及电动车电池热管理系统，累积多年专业经验，从台架设计开发到实车路试，为您提供多方位的测试方案。
汽车组装3D电子说明书更通俗易懂
最新发布
VRARvrnew3d的博客
04-25 322
激光打印机3D产品说明书，以其沉浸式体验、强交互性、丰富内容、便捷查阅和绿色环保等优势，正逐渐成为产品说明的新趋势。让我们更加深入地了解产品，更加便捷地获取所需信息，更加环保地享受科技带来的便利。
汽车纵染压制专用液压机比例阀放大器
佰业机电
04-23 382
汽车纵染压制专用液压机比例阀放大器是一种专门用于汽车纵梁拉伸工艺的设备，它也可以用于其他金属薄板的压制成型及校正工艺。该类型的液压机通常具备独立的动力机构和电气系统，采用PLC技术进行控制，以确保操作的准确性和稳定性。除了纵梁拉伸，此液压机还能进行其他金属薄板的压制成型工作，以及必要的校正工序。
汽车雨量传感器PCB板围坝填充用胶方案
m0_70411061的博客
04-24 477
汽车雨量传感器作为现代汽车的重要组成部分，能够实时检测降雨量，并根据降雨情况自动调节雨刷速度，为驾驶者提供清晰的视野，确保行车安全。在此应用中，PCB板上的芯片和金线需要通过围坝胶和填充胶进行固定和保护，以确保传感器的稳定性和可靠性。
【threejs教程7】threejs聚光灯、摄影机灯和汽车运动效果
c_wengy的博客
04-23 794
这篇文章主要讲如何偏移地面的纹理，让外部加载的汽车模型看起来像在运动。同时列出聚光灯和摄像机灯光的加载方法。
汽车诊断仪算法保护芯片——LKT4305-GM
zntsbkhhh的博客
04-24 475
支持对比认证、参数保护、算法移植三大加密方案，同时支持SM1、SM2、SM3、SM4、AES、DES、TDES、RSA超高安全等级加密算法，加密芯片接口丰富、功能强大，为数据安全提供了可靠的保障。该产品目前具有40多种防破解，防剖片技术，具有极高的安全性，可以应用在物联网、控制访问、身份识别、安全监控、汽车电子等各种需要国密算法应用的电子产品终端及应用场合。硬件国密算法SM1、SM2、SM3、SM4、AES、DES、TDES、RSA协处理器；哈希算法引擎，支持SHA1、SHA256；RAM：32K字节；
qml 使用Shape绘制圆
06-02
可以使用QML中的Shape组件来绘制圆形。具体步骤如下： 1. 在QML文件中创建一个Shape组件，例如： ``` Shape { width: 100 height: 100 } ``` 2. 在Shape组件中添加一个ShapePath子组件，并设置其属性为圆形： ``` Shape { width: 100 height: 100 ShapePath { strokeWidth: 1 strokeColor: "black" fillColor: "red" PathArc { x: 50 y: 50 radiusX: 50 radiusY: 50 startAngle: 0 sweepLength: 360 } } } ``` 其中，PathArc表示一条弧线，通过x、y、radiusX、radiusY、startAngle和sweepLength属性来描述圆形的位置、大小和角度。 3. 在ShapePath组件中设置strokeWidth、strokeColor和fillColor属性，分别表示圆形的边框宽度、边框颜色和填充颜色。 通过以上步骤，就可以使用Shape组件在QML中绘制圆形了。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值