QML 项目的偏移旋转

Question

在 QML 应用程序中，我有一个项目在屏幕上移动（不旋转）。我想显示一个围绕该项目旋转的指示器，指向远离屏幕中心的位置，与项目中心的距离固定。

以下简化的 QML 应用程序通过使指示器成为项目的子项并将其转换到所需位置来实现此目标。但是，当我尝试旋转指示器（注释掉的代码）时，我找不到任何适用于 origin.x 和 .y 的值。感觉 QML 场景图计算 X/Y 定位的方式与我经历过的任何方式都不一样。

import QtQuick 2.7
import QtQuick.Window 2.2

Window {
    id: win
    visible:true; width:600; height:300
    property real padding: 50
    property real angle: 0
    property real _rads: angle * Math.PI/180

    Timer {
      interval:50; running:true; repeat:true
      onTriggered:win.angle = (new Date/50) % 360
    }

    Rectangle {
        id:object; color:'blue'
        width:50; height:width
        property real xOffset: Math.cos(_rads)
        property real yOffset: Math.sin(_rads)
        x: win.width/2  + xOffset * (win.width/2 - padding*2)
        y: win.height/2 + yOffset * (win.height/2 - padding*2)

        Rectangle {
            id:indicator; color:'red'
            property real centerOffset: 40
            width:10; height:width*2
            x: object.width/2  + object.xOffset * centerOffset - width/2
            y: object.height/2 + object.yOffset * centerOffset - height/2
//          transform: Rotation { origin.x:0; origin.y:0; angle:win.angle }
        }
    }
}

我试过使指示器不是该项目的子项。我试过在 transform 堆栈中使用 Translate 而不是 X/Y 位置。所有这些都会导致有趣但不正确的旋转。

我怎样才能简单地围绕它自己的中心旋转指标，或者以其他方式实现我的目标？

Answer 1

您可能会把它想象成一个时钟，并为自己打造一个时钟指针。

import QtQuick 2.7
import QtQuick.Window 2.2

Window {
    id: win
    visible:true; width:600; height:300
    property real padding: 50
    property real angle: 0
    property real _rads: angle * Math.PI/180

    Timer {
        interval:50; running:true; repeat:true
        onTriggered:win.angle = (new Date/50) % 360
    }

    Rectangle {
        id:object; color:'blue'
        width:50; height:width
        property real xOffset: Math.cos(_rads)
        property real yOffset: Math.sin(_rads)
        x: win.width/2  + xOffset * (win.width/2 - padding*2)
        y: win.height/2 + yOffset * (win.height/2 - padding*2)


        Text {
            width: 250
            height: 250
            x: -100
            y: -100
            text: '▲'
            color: 'red'
            font.pixelSize: 20
            horizontalAlignment: Qt.AlignHCenter
            verticalAlignment: Qt.AlignTop

            transform: Rotation {
                angle: win.angle + 90
                origin.x: 125
                origin.y: 125
            }
        }

        Text {
            x: 15
            y: -125
            width: 20
            height: 20

            text: '▲'
            color: 'red'
            font.pixelSize: 20
            horizontalAlignment: Qt.AlignHCenter
            verticalAlignment: Qt.AlignVCenter

            transform: Rotation {
                angle: win.angle + 90
                origin.x: 10
                origin.y: 150
            }
        }


        Rectangle {
            id: clockhand
            width: 1
            height: 100
            color: 'black'
            anchors {
                centerIn: parent
            }

            rotation: win.angle + 90

            Text {
                text: '▲'
                color: 'red'
                anchors {
                    horizontalCenter: parent.horizontalCenter
                    bottom: parent.top
                    bottomMargin: -5
                }
                font.pixelSize: 20
            }
        }
    }
}

只需将 Clockhand 变成 Item 并移除颜色，使其不可见。

QML 项目的偏移旋转

Offset rotation for QML Item

qt

qml

qtquick2