qml drag coordinate of shape

hi

I want to draw a shape that has 4 sides with unequal length and the ability to drag its apex.

When I dragged apex, the sides that are connected to the apex were re-sized.

I write the program for a rectangle but I want develop to trapezium like below picture.

http://www.freeuploadsite.com/do.php?img=86241

code for rectangle:

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

I try to use Canvas for write this program but I could not conclude.

Code:

Canvas {
        width: 400
        height: 400
        Drag.active: dragArea.drag.active
        Drag.hotSpot.x: 10
        Drag.hotSpot.y: 10
 
        MouseArea {
            id: dragArea
            anchors.fill: parent
            onReleased: parent.Drag.drop()
            drag.target: parent
        }
 
        onPaint: {
            // Get drawing context
            var context = getContext("2d");
            // Draw a line
            context.beginPath();
            context.lineWidth = 2;
            context.moveTo(10, 10);
            context.strokeStyle = "blue"
            context.lineTo(10, 100);
            context.stroke();
 
            context.beginPath();
            context.lineWidth = 2;
            context.moveTo(10, 10);
            context.strokeStyle = "red"
            context.lineTo(100, 10);
            context.stroke();
 
            context.beginPath();
            context.lineWidth = 2;
            context.moveTo(100, 10);
            context.strokeStyle = "blue"
            context.lineTo(100, 100);
            context.stroke();
 
            context.beginPath();
            context.lineWidth = 2;
            context.moveTo(100, 100);
            context.strokeStyle = "red"
            context.lineTo(10, 100);
            context.stroke();
        }
    }