如何在qml中拖动矩形的角来制作可调整大小的矩形

Question

我正在寻找一个解决我的例子。我想拖动一个矩形的角落，它会改变比例但是当我拖动角落缩小矩形然后它会出错。

请解决。非常感谢！

=============================================== ================================================== ================================================== ===

我的代码：

import QtQuick 2.9
import QtQuick.Window 2.2

Window {
    title: qsTr("Test Crop")
    width: 640
    height: 480
    visible: true
    property double photohfake: selComp.height
    property double photowfake: selComp.width
    property double photowold: selComp.width
    property double photohold: selComp.height


    Image {
        id: image1
        anchors.fill: parent
        source: "http://dongdomobile.vn/wp-content/uploads/2014/09/Cute-Grey-Seamless-Pattern-For-Website-Background-300x136.jpg"
        Rectangle {
            x:parent.width / 4
            y: parent.height / 4
            width: parent.width / 2
            height: parent.width / 2
            id: selComp
            border {
                width: 2
                color: "steelblue"
            }
            color: "#354682B4"
            Rectangle {
                width: 18
                height: 18
                color: "steelblue"
                anchors.verticalCenter:parent.top
                anchors.horizontalCenter: parent.left
                MouseArea {
                    anchors.fill: parent
                    drag{ target: parent; axis: Drag.XAndYAxis }
                    onPositionChanged: {
                        console.log("mouseX "+mouseX)
                        console.log("mouseY "+mouseY)
                        if(drag.active){
                            photohfake=photohfake-mouseY //calculator new height
                            selComp.scale=selComp.scale/photohold*photohfake //calculator new scale
                            photowfake=photowold*photohfake/photohold //calculator new width
                            selComp.x+=(photowold-photowfake)/2
                            selComp.y+=mouseY/2
                            console.log("photohfake "+photohfake)
                            console.log("photohold "+photohold)
                            photohold=photohfake
                            photowold=photowfake
                            console.log("selComp.scale "+selComp.scale)
                            if(selComp.scale<0.5)
                                selComp.scale=0.5
                            else if(selComp.scale>4)
                                selComp.scale=4

                        }
                    }
                }
            }
        }
    }
}

Answer 1

如果出现错误，则表示调整大小时矩形移动很奇怪，这应该可以解决它：

import QtQuick 2.9
import QtQuick.Window 2.2

Window {
    title: qsTr("Test Crop")
    width: 640
    height: 480
    visible: true

    Rectangle {
        id: image1
        anchors.fill: parent
        color: "lightgrey"
        Rectangle {
            x:parent.width / 4
            y: parent.height / 4
            width: parent.width / 2
            height: parent.width / 2
            id: selComp
            border {
                width: 2
                color: "steelblue"
            }
            color: "#354682B4"
            Rectangle {
                width: 18
                height: 18
                color: "steelblue"
                anchors.verticalCenter:parent.top
                anchors.horizontalCenter: parent.left
                MouseArea {
                    anchors.fill: parent
                    drag{ target: parent; axis: Drag.XAndYAxis }
                    onPositionChanged: {
                        if(drag.active){
                            var delta = Math.max(mouseX, mouseY)
                            var newWidth = selComp.width - delta
                            var newHeight = selComp.height - delta;

                            if (newWidth < width || newHeight < height)
                                return

                            selComp.width = newWidth
                            selComp.x = selComp.x + delta

                            selComp.height = newHeight
                            selComp.y = selComp.y + delta
                        }
                    }
                }
            }
        }
    }
}