旋转一条线而不用QML移动它

Question

import QtQuick 2.0

Item
{
    width: 660
    height: 660

    Rectangle
    {
        id : dial
        width: 360
        height: 360

        color: "gray"

        Rectangle
        {
            id: dot
            height: 5
            width: 5
            color: "red"
            x: dial.x + (dial.width/2);
            y: dial.y + (dial.height/2);
        }

        Image
        {
            id: line
            source: "/home/.../documents/test/straightLine.jpg"
            height: 50
            width: 50
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.verticalCenter: parent.verticalCenter
            transform: Rotation
            {
                origin.x: dial.x + (dial.width/2);
                origin.y: dial.y + (dial.height/2);
                angle: 40
            }
        }
    }
}

dot是原点的表示。线的中心点应保持原点。

当我应用angle : 40时，该线会远离其原点。

如何在旋转时告诉它说那个原点？

Answer 1

如果您希望围绕其中心旋转，原点应该是您正在旋转的项目的宽度和高度的一半。请注意，点不是真正的起源;我稍微调整了你的代码：

import QtQuick 2.0

Rectangle {
    id: dial
    width: 360
    height: 360

    color: "gray"

    Rectangle {
        id: dot
        height: 5
        width: 5
        color: "red"
        anchors.centerIn: parent
        z: 1
    }

    Rectangle {
        id: line
        height: 5
        width: 50
        anchors.horizontalCenter: parent.horizontalCenter
        anchors.verticalCenter: parent.verticalCenter
        transform: Rotation {
            origin.x: line.width / 2
            origin.y: line.height / 2
            angle: 40
        }
    }
}

或者，如果你想变得更简单：

import QtQuick 2.0

Rectangle {
    id: dial
    width: 360
    height: 360
    color: "gray"

    Rectangle {
        id: line
        height: 5
        width: 50
        anchors.centerIn: parent
        rotation: 40
    }

    Rectangle {
        id: dot
        height: 5
        width: 5
        color: "red"
        anchors.centerIn: parent
    }
}