QML一个漂亮的仪表盘

最新推荐文章于 2024-07-14 17:31:10 发布

hp_cpp

最新推荐文章于 2024-07-14 17:31:10 发布

阅读量4.5k

点赞数 2

分类专栏： QML学习之路

本文链接：https://blog.csdn.net/hp_cpp/article/details/97614828

版权

使用QML中的CircularGauge控件，需要import QtQuick.Extras 1.4
Gauge.qml：

import QtQuick 2.7
import QtQuick.Controls 2.0
import QtQuick.Controls.Styles 1.4
import QtQuick.Extras 1.4
import QtQuick.Extras.Private 1.0
import QtGraphicalEffects 1.0

CircularGauge {
   
    id: gauge

    style: CircularGaugeStyle {
   
        labelStepSize: 10
        labelInset: outerRadius / 2.2
        tickmarkInset: outerRadius / 4.2
        minorTickmarkInset: outerRadius / 4.2
        minimumValueAngle: -144
        maximumValueAngle: 144

        background: Rectangle {
   
            implicitHeight: gauge.height
            implicitWidth: gauge.width
            color: "black"
            anchors.centerIn: parent
            radius: 360

            Image {
   
                anchors.fill: parent
                source: "qrc:/img/background.svg"
                asynchronous: true
                sourceSize {
   
                    width: width
                }
            }

            Canvas {
   
                property int value: gauge.value

                anchors.fill: parent
                onValueChanged: requestPaint()

                function degreesToRadians(degrees) {
   
                  return degrees * (Math.PI / 180);
                }

                onPaint: