How to resize a rectangle?

franziss

I am trying to resize a rectangle, by clicking its right border and dragging it to the right. But I could not do it and I am a newbie, below is my code, any idea where is my mistake? MAny thanks!

@ Rectangle {
id: left
width: 200
height: 700
color: "#343434"
radius: 0
border.width: 2
border.color: "#000000"
anchors.top: parent.top
anchors.topMargin: 0
anchors.leftMargin: 0

    MouseArea {
        id: mouseAreaLeft
        x: 191
        y: 395
        width: 19
        height: 306

        drag.target: parent
        drag.axis: Drag.XAxis
        drag.minimumX: 0
        onPressed: {
            left.state = 'clickedAndResize'
        }
    }

    states: [
        State {
            name: "clickedAndResize"
            PropertyChanges {
                target: left
                width: width + Drag.XAxis
                anchors.leftMargin: 0
            }
        }
    ]
}

@

mario

I'm not sure if you should use drag for doing resize. Drag is only used to update the coordinates (x/y) of an Item (the target).

I think you should be able to just use onPressed and mouseX/mouseY to calculate resize deltas.

Drag.XAxis is just an enumeration, not a value

franziss

Thank you for your reply, I tried using just mouseX, but it doesn't work. Can someone help me out? Thank you.
@
Rectangle {
id: left
width: 200
height: 700
color: "#343434"
radius: 0
border.width: 2
border.color: "#000000"
anchors.top: parent.top
anchors.topMargin: 0
anchors.leftMargin: 0

MouseArea {
    id: mouseAreaLeft
    x: 191
    y: 395
    width: 19
    height: 306

    onPressed: {
        left.state = 'clickedAndResize'
    }
}

states: [
    State {
        name: "clickedAndResize"
        PropertyChanges {
            target: left
            width: width + (MouseArea.mouseX - width);                
        }
    }
]

}
@

mario

Try this example:
@
Rectangle {
id: left
x: 100
width: 200
height: 200
color: "#343434"
radius: 0
border.width: 2
border.color: "#000000"
anchors.top: parent.top
anchors.topMargin: 0
anchors.leftMargin: 0

   MouseArea {
       id: mouseAreaLeft

       property int oldMouseX

       anchors.right: parent.right
       anchors.bottom: parent.bottom
       width: 30
       height: 30
       hoverEnabled: true

       onPressed: {
           oldMouseX = mouseX
       }

       onPositionChanged: {
           if (pressed) {
               left.width = left.width + (mouseX - oldMouseX)
           }
       }
   }

@

franziss

Hi Mario,

Many thanks for your help! You do not use state. If I use state to do this, then it is an overkill?

mario

It doesn't have to be overkill, sometimes states makes it easier to tell in what state the application/function is in.

In this simple example the signal handlers will do.

If you do it in a state you have to think about eventual property bindings that might be applied to width. Maybe this won't work in a state since it will try to bind the width property to itself.

franziss

Ok, thanks for your explanation and your help, Mario. I have a lot to learn.

Have a nice day.

shwt.saxena

@mario This code works for me also but, I want to limit the minimum and maximum width. so I can able to limit the width but not able to reduce the width.
here is the code

Rectangle {
id: left
x: 100
width: 200
height: 200
color: "#343434"
radius: 0
border.width: 2
border.color: "#000000"
anchors.top: parent.top
anchors.topMargin: 0
anchors.leftMargin: 0

  MouseArea {
      id: mouseAreaLeft

      property int oldMouseX

      anchors.right: parent.right
      anchors.bottom: parent.bottom
      width: 30
      height: 30
      hoverEnabled: true

      onPressed: {
          oldMouseX = mouseX
      }

      onPositionChanged: {
          if (pressed) {
             if(left.width < 150)
              left.width = left.width + (mouseX - oldMouseX)
          }
      }
  }

Vicky Sharma

You may set minimumHeight and width with the help of "Layout.minimumWidth: " and "Layout.minimumHeight: "