2013-03-07

QML Resizable rectangle from scratch


It has been forever since I've posted anything on my blog.  Apologies to my follower...  Meanwhile, I have learned quite a lot about QML and QtQuick over the past 6 months or so.  I will have to go dig through my code and find some snippets that I think will be helpful to those joining the Qt universe.

This is a (relatively) simple Item I created which allows the user to click any one of the four walls and drag it to resize the rectangle.  You can also left click on the rectangle and drag it around.  This example does NOT include any limitations to dragging, so if you can pretty much destroy the rectangle by dragging one wall right over the opposite wall.  However, I thought it best to post something simple rather than something more complicated and hard to read for newcomers.  Relationships between anchors and QML objects can get quite confusing fast, and you have to avoid anchor loops.  This is nothing more than an example of multiple anchors working together which actually works, but is not finished product.  


Maybe someone will get some use out of it.


Cheers!
-----------------------------------------------------------------------------

//import QtQuick 2.0
import QtQuick 1.1

 Item {
    id: resizeRectItem
    property real rectWidth
    property real rectHeight

    rectWidth: rightWall.x - leftWall.x
    rectHeight: bottomWall.y - topWall.y
    //opacity: 1

    Rectangle {
        id: resizeRect
        width: rectWidth
        height: rectHeight
        color: "blue"
        anchors.right: rightWall.left
        anchors.bottom: bottomWall.top
        anchors.top: topWall.bottom
        anchors.left: leftWall.right
    }
    MouseArea {
        id: resizeRectDragMA
        width: rectWidth -5
        height: rectHeight -5
        anchors.centerIn: parent
        drag.target: resizeRectItem
        drag.axis: Drag.XandYAxis

        onPressed: {
            resizeRect.color = "green"
            resizeRectItem.anchors.centerIn = null
        }
        onReleased: {
            resizeRect.color = "blue"
        }
    }

    Rectangle {
        id: topWall
        x: -100
        y: -100
        width: rectWidth
        height: 4
        color: "red"
    }
    MouseArea {
        id: topWallMA
        anchors.fill: topWall
        drag.target: topWall
        drag.axis: Drag.YAxis
        onPressed: {
            leftWall.anchors.top = topWall.bottom
            rightWall.anchors.top = topWall.bottom
        }
    }
    Rectangle {
        id: bottomWall
        x:-100
        y: 100
        width: rectWidth
        height: 4
        color: "purple"
    }
    MouseArea {
        id: bottomWallMA
        anchors.fill: bottomWall
        drag.target: bottomWall
        drag.axis: Drag.YAxis
        onPressed: {
            leftWall.anchors.bottom = bottomWall.top
            rightWall.anchors.bottom = bottomWall.top
        }
    }
    Rectangle {
        id: leftWall
        x: -100
        y: -100
        width: 4
        height: rectHeight
        color: "yellow"
    }
    MouseArea {
        id: leftWallMA
        anchors.fill: leftWall
        drag.target: leftWall
        drag.axis: Drag.XAxis
        onPressed: {
            topWall.anchors.left = leftWall.right
            bottomWall.anchors.left = leftWall.right
        }
    }
    Rectangle {
        id: rightWall
        x: 100
        y: -100
        width: 4
        height: rectHeight
        color: "orange"
    }
    MouseArea {
        id: rightWallMA
        anchors.fill: rightWall
        drag.target: rightWall
        drag.axis: Drag.XAxis
        onPressed: {
            topWall.anchors.right = rightWall.left
            bottomWall.anchors.right = rightWall.left
        }
    }
    states: [
        State {
             name: "hide"
             PropertyChanges {
                 target: resizeRectItem
                 opacity: 0.0
             }
        }
    ]
}