[Stan]

Hi!

 

I am trying to manually position a rectangle within another rectangle. I have the following code:

 

Rectangle {
        id: area
        x: parent.width - area.width / 2
        height: 30
        color: "red"
        width: 400

        Rectangle {
            id: hitArea
            x: parent.x 
            y: parent.y
            height: 30
            width: 30
            color: "blue"
        }
    }

The problem is the rectangle hitArea’s x-co-ordinate is actually calculated as being parent.width – (area.width / 2) but is instead calculated as being parent.width. To make this work I need to set the hitArea‘s x property to be parent.x + area.width / 2.

While this works it doesn’t look very elegant. Why is the hitArea not taking its x property as I expect it would (i.e after the parent’s x property has been evaluated)?

BTW I don’t want to use anchors here because ultimately I want to be able to position the hit area randomly along width of the area according to some parameters.

[AlexFelgo Team]

Hi Stan,

x and y values are always relative to the container. If your “area” is in a scene and has the position x:50 and y:50, your code will cause the “hitArea” to have x:50 and y:50 relative to the “area”. So it will be x:100 and y:100 in total.

There are 2 solutions:

– Do not set the x and y coordinates of the “hitArea” (or set them to 0), because since it is a child, it will move with the parent if the parent position is changed.

– Do not make the “hitArea” a child of the “area”, but instead put it next to it and then your parent.x and parent.y will work as expected.

Cheers,
Alex

[Stan]

Thanks Alex. That has cleared it up for me.

[AlexFelgo Team]

I’m glad i could help 🙂

Cheers