qml 汽车仪表表盘圆形进度条

最新推荐文章于 2024-07-16 08:00:00 发布

huangzhizhi1995

最新推荐文章于 2024-07-16 08:00:00 发布

阅读量1.2k

点赞数 1

分类专栏： qml

本文链接：https://blog.csdn.net/huangzhizhi1995/article/details/84630542

版权

本文介绍如何利用 QML 技术设计一款汽车仪表盘风格的圆形进度条，涵盖了图形渲染、动画效果及自定义组件的实现细节。

摘要由CSDN通过智能技术生成

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Layouts 1.2
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4

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

    property real minimumValue: 0
    property real maximumValue: 116
    property real currentValue: 0
    property color secondaryColor: "blue"
    property real maxValue: 100

    onCurrentValueChanged:canvas.requestPaint()

    Canvas {
        id: canvas
        width: 640
        height: 480
        antialiasing: true

        property real centerWidth: width/2
        property real centerHeight: height/2
        property real radius: width/3

        // this is the angle that splits the circle in two arcs
        // first arc is drawn from 0 radians to angle radians
        // second arc is angle radians to 2*PI radians
        property real angle: (currentValue - minimumValue) / (maximumValue - minimumValue) * 2 * Mat