Circular Gauge, not centralized needle (offset)



  • Hi, I want to style the CircularGauge as below:
    0_1548570346327_Preview.png

    As can be see, the needle and also tick origin centers are not sync (have some offset in vertical position). So this my problem. How can I implement this and create this offset in the needle component?

    this is my code until now:

    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
            tickmarkStepSize: 2;
            labelInset: outerRadius / 2.5
            tickmarkInset: outerRadius / 4.2
            minorTickmarkInset: outerRadius / 4.2
            minimumValueAngle: -50
            maximumValueAngle: 50
    
            background: Rectangle {
                implicitHeight: gauge.height
                implicitWidth: gauge.width
                color: "black"
                anchors.centerIn: parent
                radius: 360
    
                Image {
                    anchors.fill: parent
                    source: "qrc:/img/No4/backScreen.svg";
                    asynchronous: true
                    sourceSize {
                        width: width
                    }
                }
            }
    
            needle: Item {
    //            y: -outerRadius * 0.4;
                height: outerRadius * 0.8
                x: -needle.width / 2.0;
                antialiasing: true;
                Image {
                    id: needle
                    source: "qrc:/img/No4/needle.svg"
                    height: parent.height
                    width: height * 0.155
                    asynchronous: true
                    antialiasing: true
                }
            }
    
            foreground: Item {
    
                Image {
                    id: needleCntr
                    source: "qrc:/img/No4/needleTop.svg";
                    anchors.fill: parent;
                    antialiasing: true
                }
    
                Image {
                    id: glassImg
                    source: "qrc:/img/No4/glass.svg"
                    anchors.centerIn: parent
                    anchors.leftMargin: outerRadius * 0.12;
                    anchors.rightMargin: outerRadius * 0.12;
                    anchors.topMargin: outerRadius * 0.12;
                    anchors.bottomMargin:  outerRadius * 0.12;
                    antialiasing: true
                    anchors.fill: parent;
                    z: 20;
                }
            }
    
            tickmarkLabel:  null;
    
            tickmark: null;
    
            minorTickmark: null;
        }
    }
    

    and the result is:
    0_1548570612805_2019-01-27 09_58_00-gauge-example.png

    You can see that the needle center is synced with background center. How can I create the offset.



  • @alizadeh91 have you check the documentation about CircularGaugeStyle?

    When defining your own needle component, the only properties that the style requires you to set are the implicitWidth and implicitHeight.

    which looks like you're not setting.

    Also this document refers to styling the needle and those mentioned properties.