Strange offset after rotating a rectangle



  • What happens to the space surrounding a Rectangle after it's rotated? I have observed that if I rotate +/- 90 degrees a Rectangle with these anchors:
    @
    anchors.left: parent.left
    anchors.verticalCenter: parent.verticalCenter
    @

    or these anchors
    @
    anchors.right: parent.right
    anchors.verticalCenter: parent.verticalCenter
    @

    the Rectangle is offset from the edge of its parent. However, if I create a Rectangle of the same size but with the width and height swapped, the Rectangle is drawn at the edge of its parent as I intended.

    The code and screenshot below illustrates the situation. The 150 X 40 yellow "Configure" Rectangle is not rotated. It is drawn where it should be: at the right edge of the Blue rectangle and centered on the blue Rectangle's vertical center. The 40 X 150 green "Help" Rectangle is rotated. While it is centred on the blue Rectangle's vertical center, it is many pixels to the right of the left edge of the blue Rectangle.

    !http://farm6.static.flickr.com/5037/5836913375_cb01db8918_d.jpg(Screenshot of the Rectangle example)!

    @
    import QtQuick 1.0

    Rectangle {
    id: container
    height: 480
    width: 800
    color: "blue"

    Rectangle {
    

    id: rightButton
    anchors.right: parent.right
    anchors.verticalCenter: parent.verticalCenter
    width: 40
    height: 150
    color: "yellow"

    Text {
    id: rightButtonText
    text: "Configure"
    rotation: 90
    anchors.centerIn: parent
    }
    }

    Rectangle {
    

    id: leftButton
    rotation: -90
    anchors.left: parent.left
    anchors.verticalCenter: parent.verticalCenter
    width: 150
    height: 40
    color: "green"

    Text {
    id: leftButtonText
    text: "Help"
    anchors.centerIn: parent
    }
    }

    Text {
    

    text: "Click to Exit"
    anchors.centerIn: parent
    }

    MouseArea {
    

    anchors.fill: parent
    onClicked: {
    Qt.quit();
    }
    }
    }
    @



  • Try horizontally centering also. And then adjust your child rectangle size.



  • Such behavior is ok. It's all because of transformOrigin property is Center by default, so your rotation is done from center of your rectangle. In your case you need TopLeft value and don't forget to set correct verticalCenterOffset (because your rectangle will be a bit higher than needed)



  • I get it. Thanks. These kinds of transformations have always confused me.


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.