Qt Qml实现仪表盘动画

Leyeeeee

已于 2023-08-25 13:41:11 修改

阅读量1.1k

点赞数 1

分类专栏： Qt开发文章标签： qt Qml C++

于 2023-08-25 11:44:21 首次发布

本文链接：https://blog.csdn.net/qq_38159549/article/details/132492388

版权

Qt开发专栏收录该内容

10 篇文章 1 订阅

订阅专栏

Qt Qml代码实现的仪表盘动画

效果：

Qt Qml 仪表盘动画

Qt Qml 代码实现仪表盘动画

Qt Qml 仪表盘动画

部分Qml代码：

import QtQuick 2.0

Item {
    width: 2 * radius
    height: 2 * radius

    required property double radius
    property double airspeed: 0
    property double angle: 0

    onAirspeedChanged: update();

    function update(){
        angle = airspeed

        if      (angle <   0.0) angle =   0.0
        else if (angle > 235.0) angle = 235.0

        if      (angle <  40.0) angle =          0.9 *  angle
        else if (angle <  70.0) angle =   36.0 + 1.8 * (angle -  40.0)
        else if (angle < 130.0) angle =   90.0 + 2.0 * (angle -  70.0)
        else if (angle < 160.0) angle =  210.0 + 1.8 * (angle - 130.0)
        else                    angle =  264.0 + 1.2 * (angle - 160.0)

    }

    CustomImage {
        anchors.fill: parent
        source: "../Resources/asi/asi_face.svg"
    }

    CustomImage {
        anchors.fill: parent
        source: "../Resources/asi/asi_case.svg"
    }

    CustomImage {
        anchors.fill: parent
        source: "../Resources/asi/asi_hand.svg"
        rotation: angle
    }

}