Drag coordinates of a QML shape - qt

Question

I want to draw a shape that has 4 sides with unequal length and the ability to drag its apexes. When I dragged an apex, the sides that are connected to it should resize accordingly.
I've found another question on SO but the proposed solution works for Rectangles whereas I would like to develop a solution for trapezoidal shapes, like in the following picture:
My current code:
property var selection: undefined
Image {
id: image1
anchors.fill: parent
source: "1.jpg"
MouseArea {
anchors.fill: parent
onClicked: {
if(!selection)
selection = selectionComponent.createObject(parent, {"x": parent.width / 4, "y": parent.height / 4, "width": parent.width / 2, "height": parent.width / 2})
}
}
}
Component {
id: selectionComponent
Rectangle {
id: selComp
border {
width: 2
color: "steelblue"
}
color: "#354682B4"
property int rulersSize: 18
MouseArea { // drag mouse area
anchors.fill: parent
drag{
target: parent
minimumX: 0
minimumY: 0
maximumX: parent.parent.width - parent.width
maximumY: parent.parent.height - parent.height
smoothed: true
}
onDoubleClicked: {
parent.destroy() // destroy component
}
}
Rectangle {
width: rulersSize
height: rulersSize
radius: rulersSize
color: "steelblue"
anchors.left: parent.left
anchors.top: parent.top
MouseArea {
anchors.fill: parent
drag{ target: parent; axis: Drag.XAxis }
onMouseXChanged: {
if(drag.active){
selComp.width = selComp.width - mouseX
selComp.height = selComp.height - mouseY
selComp.x = selComp.x + mouseX
selComp.y = selComp.y + mouseY
if(selComp.width < 30)
selComp.width = 30
}
}
}
}
Rectangle {
width: rulersSize
height: rulersSize
radius: rulersSize
color: "steelblue"
anchors.left: parent.left
anchors.bottom: parent.bottom
MouseArea {
anchors.fill: parent
drag{ target: parent; axis: Drag.XAxis }
onMouseXChanged: {
if(drag.active){
selComp.width = selComp.width - mouseX
selComp.height = selComp.height + mouseY
//selComp.x = selComp.x + mouseX
//selComp.y = selComp.y + mouseY
if(selComp.width < 30)
selComp.width = 30
}
}
}
}
Rectangle {
width: rulersSize
height: rulersSize
radius: rulersSize
color: "steelblue"
anchors.horizontalCenter: parent.left
anchors.verticalCenter: parent.verticalCenter
MouseArea {
anchors.fill: parent
drag{ target: parent; axis: Drag.XAxis }
onMouseXChanged: {
if(drag.active){
selComp.width = selComp.width - mouseX
selComp.x = selComp.x + mouseX
if(selComp.width < 30)
selComp.width = 30
}
}
}
}
Rectangle {
width: rulersSize
height: rulersSize
radius: rulersSize
color: "steelblue"
anchors.horizontalCenter: parent.right
anchors.verticalCenter: parent.verticalCenter
MouseArea {
anchors.fill: parent
drag{ target: parent; axis: Drag.XAxis }
onMouseXChanged: {
if(drag.active){
selComp.width = selComp.width + mouseX
if(selComp.width < 50)
selComp.width = 50
}
}
}
}
Rectangle {
width: rulersSize
height: rulersSize
radius: rulersSize
x: parent.x / 2
y: 0
color: "steelblue"
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.top
MouseArea {
anchors.fill: parent
drag{ target: parent; axis: Drag.YAxis }
onMouseYChanged: {
if(drag.active){
selComp.height = selComp.height - mouseY
selComp.y = selComp.y + mouseY
if(selComp.height < 50)
selComp.height = 50
}
}
}
}
Rectangle {
width: rulersSize
height: rulersSize
radius: rulersSize
x: parent.x / 2
y: parent.y
color: "steelblue"
anchors.horizontalCenter: parent.horizontalCenter
anchors.verticalCenter: parent.bottom
MouseArea {
anchors.fill: parent
drag{ target: parent; axis: Drag.YAxis }
onMouseYChanged: {
if(drag.active){
selComp.height = selComp.height + mouseY
if(selComp.height < 50)
selComp.height = 50
}
}
}
}
}
}

Answer 1

This will work:
Point.qml
import QtQuick 2.0
Item {
id: root
signal dragged()
Rectangle {
anchors.centerIn: parent
width: 20
height: 20
color: "blue"
opacity: 0.3
MouseArea {
anchors.fill: parent
drag.target: root
onPositionChanged: {
if(drag.active) {
dragged()
}
}
}
}
}
main.qml:
import QtQuick 2.5
import QtQuick.Window 2.2
Window {
visible: true
width: 600
height: 600
Point {
id: pointA
x: 50
y: 50
}
Point {
id: pointB
x: 250
y: 50
}
Point {
id: pointC
x: 250
y: 250
}
Point {
id: pointD
x: 50
y: 250
}
Item {
anchors.fill: parent
Canvas {
id: canvas
anchors.fill: parent
onPaint: {
var ctx = canvas.getContext('2d');
ctx.moveTo(pointA.x, pointA.y);
ctx.lineTo(pointB.x, pointB.y);
ctx.lineTo(pointC.x, pointC.y);
ctx.lineTo(pointD.x, pointD.y);
ctx.lineTo(pointA.x, pointA.y);
ctx.stroke();
}
Component.onCompleted: {
pointA.dragged.connect(repaint)
pointB.dragged.connect(repaint)
pointC.dragged.connect(repaint)
pointD.dragged.connect(repaint)
}
function repaint() {
var ctx = getContext("2d");
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
requestPaint()
}
}
}
}