A bug of Item position in Qt Quick2

? Offline

If you think it's a bug, then please report it in jira.

The guide for how to report bug:
http://qt-project.org/wiki/ReportingBugsInQt

? Offline

I don't think it is a bug, it is just the way rotation has been implemented. Maybe you will get better results if instead of directly using the rotation property you use a Rotation element:

@Rectangle {
id: tester
//rotation: 40
transform: Rotation {
angle: 40
}@

That should work as expected.

Jens

You need to set the transformOrigin. See

http://qt-project.org/doc/qt-5.0/qtquick/qml-qtquick2-item.html#transformOrigin-prop

? Offline

The explanation for this "bug" is quite logical - the rotation property always rotates around the center, and with the rotation angle being restrained to a fixed value resizing an element moves its origin, since the size itself is not relative to the center but to the top left.

? Offline

Thank you , this really helps.

But I have one more question, what do x and y stand for, at first I thought it stands for the position of the topleft corner, but obviously it is not. I tried to search the documents but can't get the result.

[quote author="utcenter" date="1363773915"]The explanation for this "bug" is quite logical - the rotation property always rotates around the center, and with the rotation angle being restrained to a fixed value resizing an element moves its origin, since the size itself is not relative to the center but to the top left.[/quote]

? Offline

Perhaps I didn't worded that explanation quite as accurately as I wanted. But like most people here, I am not a native English speaker.

x and y is indeed the top left corner - you could easily verify that by putting a 10 by 10 rectangle at position 10 10. That is where the mismatch comes from - rotation uses the center and position and size use the top left.

Adding a Rotation element as in my first post solves that by creating an additional origin of rotation so the position of the Rectangle is undisturbed.

? Offline

Thank you for your patience. I am not a native English speaker either : )

I want to rotate the item around the center point, so I write the code below, but still get the same problem.

@import QtQuick 2.0

Rectangle {
id: root
width: 800
height: 800
color: "yellow"
Rectangle {
id: tester
transform: Rotation{
id: rotationItem
angle: 40
origin.x: tester.width/2
origin.y: tester.height/2
// NumberAnimation on angle {
// loops: Animation.Infinite
// from: 0
// to: 360
// duration: 1000
// }
}

    width: 50
    height: 50
    x:200
    y:200
    color: "black"
    NumberAnimation on width {
        loops: Animation.Infinite
        from: 50
        to: 300
        duration: 1000
    }
    onWidthChanged: {
        var pos = mapToItem(tester.parent,0, 0)
        console.log("this is the position of the topleft corner of item tester:"+pos.x)
        console.log("this is the x pos of item tester:"+tester.x)
    }
}

}
@

I think I could modify x and y value when width changes so I can make the item not move, but I don't know how to modify the x and y value(this is not the right way to achieve the effect, but I can't find out another way)

Maybe you have noticed that I have added two "console.log" function, I don't know why mapToItem(tester.parent,0, 0).x does not equal to tester.x

[quote author="utcenter" date="1363776949"]Perhaps I didn't worded that explanation quite as accurately as I wanted. But like most people here, I am not a native English speaker.

x and y is indeed the top left corner - you could easily verify that by putting a 10 by 10 rectangle at position 10 10. That is where the mismatch comes from - rotation uses the center and position and size use the top left.

Adding a Rotation element as in my first post solves that by creating an additional origin of rotation so the position of the Rectangle is undisturbed.[/quote]

? Offline

What is it that you want to achieve exactly?

Have the black rectangle rotate around its center while its width changes proportional to both sides plus the ability to move the item?

Or something else?

? Offline

I think I have known how to do it. The key point is just to keep one transformOrigin - the TopLeft one, then I can adjust x and y to make the black rect can both rotate around its center and adjust the width and height.

Thank you.

[quote author="utcenter" date="1363780500"]What is it that you want to achieve exactly?

Have the black rectangle rotate around its center while its width changes proportional to both sides plus the ability to move the item?

Or something else?[/quote]

? Offline

Just use a placeholder to center your rotating item into. Here is an example - the rotating item will move with the mouse cursor as it rotates around its center and changes width:

@Rectangle {
id: root
width: 800
height: 800
color: "yellow"

MouseArea {
    id: cursorLocation
    hoverEnabled: true
    anchors.fill: parent
}

Item { // placeholder
    width: 50
    height: 50
    x: cursorLocation.mouseX - width/2
    y: cursorLocation.mouseY - height/2

    Rectangle {
        id: tester
        anchors.centerIn: parent
        width: 50
        height: 50
        color: "black"

        NumberAnimation on rotation {
            loops: Animation.Infinite
            from: 0
            to: 360
            duration: 1000
        }

        NumberAnimation on width {
            loops: Animation.Infinite
            from: 50
            to: 300
            duration: 1000
        }
    }
}

}@