拖动QML形状的坐标

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 Rectangle s 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()
            }
        }
    }
}