Unable to rotate in a right axis inside the image in Qml

Question

I'm trying to rotate my image needle for the respective speed values in a speedometer, but I'm not sure which are the right values for origin.x and origin.y, I have tried a lot of times with trial and error but couldn't able to achieve the output. Kindly help me if anyone knows it.

expected: needle should rotate in a circumference of circle indicating speed values.

I have tried this:

import QtQuick

import QtQuick.Controls 2.15

Window {
    id: root

    width: 637
    height: 750
    visible: true
    title: qsTr("Hello World")

    Image {
        id: img

        anchors.centerIn: parent
        source: "Speedometer.png"

        Image {
            id: needle

            property double needleAngle : 0

            anchors.left: parent.left
            anchors.leftMargin: 40
            anchors.bottom: parent.bottom
            anchors.bottomMargin: 100
            antialiasing: true

            source: "dial_with_meter.png"
            rotation: 240

            transform: Rotation { origin.x: needle.width/2; origin.y: needle.height/2
                angle: -36 + needle.needleAngle }
            Behavior on rotation {
                SmoothedAnimation {
                    velocity: 50
                }
            }

        }
    }

    Button {
        id: btn1

        anchors.left: parent.left
        anchors.leftMargin: 100
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 50
        text: "Btn1"

        onClicked: {
            needle.needleAngle += 1
        }

    }

    Button {
        id: btn2

        anchors.left: parent.left
        anchors.leftMargin: 250
        anchors.bottom: parent.bottom
        anchors.bottomMargin: 50
        text: "Btn2"

    }
}

And I'm trying to achieve needle rotation for this UI

After your suggestions Jurgen, needle is rotating backwards, but i want that should be shown towards the speed values, as i mentioned in the image above, here is the output of your suggestion i used:

Answer 1

One solution is to put the needle onto a Item and center and rotate the Item. The needle is put at the top center. So it is rotating correctly with the rotated item.

A short example based on your code:

Image {
    id: img

    anchors.centerIn: parent
    source: "qrc://qt/images/background.png"

    Item {
        id: rectangle

        width: 300
        height: 300

        anchors.centerIn: parent

        property double needleAngle : 0

        transform: Rotation {
            origin.x: rectangle.width / 2;
            origin.y: rectangle.height / 2
            angle: rectangle.needleAngle
        }

        Timer {
            running: true
            interval: 100
            repeat: true

            onTriggered: {
                rectangle.needleAngle += 10
            }
        }

        Image {
            id: needle
            x: (rectangle.width - needle.width) / 2
            source: "qrc://qt/images/arrow.png"
        }
    }
}

Better approaches will be based on a Dial item, I guess.