How to resize a rectangle?



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

    @



  • 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



  • 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);                
            }
        }
    ]
    

    }
    @



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

    @



  • Hi Mario,

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



  • 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.



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

    Have a nice day.



  • @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)
              }
          }
      }
    


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


Log in to reply
 

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