Offset rotation for QML Item

Question

In a QML application I have an item that is moving around the screen (not rotating). I want to display an indicator that rotates around this item, pointing away from the center of the screen, a fixed distance away from the center of the item.

The following simplified QML application performs this goal, by making the indicator a child of the item, and translating it to the desired location. However, when I try to rotate the indicator (the commented-out code) I cannot find any values for origin.x and .y that work. It feels like the QML scene graph calculates X/Y positioning in a way unlike any I've experienced.

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

I've tried making the indicator not be a child of the item. I've tried using Translate in the transform stack instead of X/Y positions. All of them result in amusing-but-incorrect rotations.

How can I simply rotate the indicator around it's own center, or otherwise achieve my goal?

derM derM · Accepted Answer · 2016-12-13T21:32:08

You might think of it as a clock and build yourself a clockhand.

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

Just turn the Clockhand into an Item and remove the color, to make it invisible.

Offset rotation for QML Item

1 Answers