使用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: