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 }
        }
    }
}

我试过让指标不是该项目的孩子。我尝试在Translate堆栈中使用transform而不是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项目的偏移旋转

1 个答案: