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