QML 旋转量规针 - 正确旋转

Question

我正在尝试旋转 Gauge 针，但不是在针的底部旋转，针的底部有一个带十字的圆圈。针是围绕针尖旋转的。请参阅附图。图像是固定的/旋转的，但底座是旋转的。请建议如何纠正这个问题？

main.qml :--

import QtQuick 2.6
import QtQuick.Window 2.2
import QtQuick.Controls 2.5

Window
{
    visible: true
    x :0
    y :0
    width: 800
    height: 480
    color: "grey"

    Rectangle
    {
        id: cluster
        Speed_Needle{
          id: cluster_pointer_base
          x : 214+16
          y : 222
        }
     }

    Slider
    {
        id  : slide_1
        width: parent.width
        from: 0
        to: 360
        value: 0
        enabled: true
        onValueChanged:
        {
            cluster_pointer_base.value=slide_1.value
        }
    }

}

Speed_Needle.qml :--

import QtQuick 2.0

Item {

    property int value: 0
    width: 186
    height: 36

    Image
    {
        id: root
        source: "files/pointer_needle2.png"
        x : 0
        y : 0
        transform: Rotation  {
            id: needleRotation
            angle : value

            Behavior on angle  {

                SmoothedAnimation { velocity: 50 }
            }
        }



    }

}

Answer 1

你必须设置Rotation的origin：

Speed_Needle.qml :--

import QtQuick 2.0

Item {

    property int value: 0
    width: 186
    height: 36

    Image
    {
        id: root
        source: "files/REE Demo images/pointer_needle2.png"
        x : 0
        y : 0
        transform: Rotation  {
            id: needleRotation
            angle : value
            origin.x: root.width / 2    // here!
            origin.y: root.height / 2

            Behavior on angle  {

                SmoothedAnimation { velocity: 50 }
            }
        }
    }
}