Solved CircularGauge Style
-
Hi, I'm learning how to design dashboard and when I'm trying to use code from documentation for styling background, it doesn't work, every other part of this code works, but when i try to change background it doesn't work, it looks like it.
And it should look like this, so I'm wondering what's the problem?
import QtQuick 2.14 import QtQuick.Window 2.14 import QtQuick.Controls 2.14 import QtQuick.Controls.Styles 1.4 import QtQuick.Extras 1.4 import QtQuick.Extras.Private 1.0 Window { visible: true width: 640 height: 480 title: qsTr("Dashboard") Rectangle { width: 300 height: 300 color: "#494d53" CircularGauge { id: gauge anchors.centerIn: parent style: CircularGaugeStyle { id: style function degreesToRadians(degrees) { return degrees * (Math.PI / 180); } 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: { var ctx = getContext("2d"); ctx.reset(); ctx.beginPath(); ctx.strokeStyle = "black" ctx.lineWidth = outerRadius ctx.arc(outerRadius, outerRadius, outerRadius - ctx.lineWidth / 2, degreesToRadians(valueToAngle(gauge.value) - 90), degreesToRadians(valueToAngle(gauge.maximumValue + 1) - 90)); ctx.stroke(); } } } tickmark: Rectangle { visible: styleData.value < 80 || styleData.value % 10 == 0 implicitWidth: outerRadius * 0.02 antialiasing: true implicitHeight: outerRadius * 0.06 color: styleData.value >= 80 ? "#e34c22" : "#e5e5e5" } minorTickmark: Rectangle { visible: styleData.value < 80 implicitWidth: outerRadius * 0.01 antialiasing: true implicitHeight: outerRadius * 0.03 color: "#e5e5e5" } tickmarkLabel: Text { font.pixelSize: Math.max(6, outerRadius * 0.1) text: styleData.value color: styleData.value >= 80 ? "#e34c22" : "#e5e5e5" antialiasing: true } needle: Rectangle { y: outerRadius * 0.15 implicitWidth: outerRadius * 0.03 implicitHeight: outerRadius * 0.9 antialiasing: true color: "#e5e5e5" } foreground: Item { Rectangle { width: outerRadius * 0.2 height: width radius: width / 2 color: "#e5e5e5" anchors.centerIn: parent } } } } } }
-
@Traust I think you need to set "anchors.fill :" so your gauge is actually using the whole space
-
@Traust I think you need to set "anchors.fill :" so your gauge is actually using the whole space
-
Thanks, I'm surprised it was so easy
-