如何在 QML 中制作可调整大小的矩形？

Question

我正在寻找一种在 QQuickItem 中创建矩形的简单方法。我想调整大小，并像这样拖动这个矩形的边框（在 resizable QRubberBand 找到）

有人有想法吗？

Answer 1

可能有几种方法可以达到预期的效果。由于我已经考虑过为我的裁剪工具软件实现类似的 Component，因此我将分享一个使用部分代码的玩具示例。

与示例中的橡皮筋不同，我的 Rectangle 一次只能在一个轴上调整大小。我相信您可以在此基础上进行构建并自定义代码以满足您的需求。

代码的基本思想是利用 drag property of MouseArea. It can be used to move around the Rectangle and, combined with MouseX and MouseY 属性，调整它的大小。

拖动在 Rectangle 内处于活动状态，而在 Rectangle 两侧设置的旋钮上调整大小处于活动状态（为简洁起见，未设置鼠标光标更改）。

import QtQuick 2.4
import QtQuick.Controls 1.3

ApplicationWindow {
    title: qsTr("Test Crop")
    width: 640
    height: 480
    visible: true
    property var selection: undefined

    Image {
        id: image1
        anchors.fill: parent
        source: "http://cdn.cutestpaw.com/wp-content/uploads/2013/01/l-Kitty-attack.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.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 2

MouseArea {
            id:roiRectArea
            anchors.fill: parent

            onPressed: {
                pressX = mouse.x
                pressY = mouse.y
            }

            onReleased: {
                releaseX = mouse.x
                releaseY = mouse.y
                rectWidth = releaseX
                widthRect = releaseX - pressX
                rectHeight = releaseY
                heightRect = releaseY - pressY
            }

            onPositionChanged: {
                releaseX = mouse.x
                releaseY = mouse.y
                widthRect = releaseX - pressX
                heightRect = releaseY - pressY
            }

            Rectangle {
                id:rectRoi
                antialiasing: true
                opacity: 0.4
                x: pressX
                y: pressY
                width: widthRect
                height: heightRect
                border {
                    width: 2
                    color: "blue"
                }
                color: "#00F0F8FF"

                MouseArea {
                    anchors.fill: parent
                    drag{
                        target: rectRoi
                        minimumX: 0
                        minimumY: 0
                        maximumX: parent.parent.width - parent.width
                        maximumY: parent.parent.height - parent.height
                        smoothed: true
                    }
                    onDoubleClicked: {
                        parent.destroy()
                    }
                }

                Rectangle {
                    width: rulersSize
                    height: rulersSize
                    color: "white"
                    anchors.horizontalCenter: parent.left
                    anchors.verticalCenter: parent.top
                    id: selComp
                    MouseArea {
                        anchors.fill: parent
                        drag{ target: parent; axis: Drag.XAxis }
                        onMouseXChanged: {
                            if(drag.active){
                                var newWidth = rectRoi.width - mouseX
                                if (newWidth < 30)
                                    return
                                rectRoi.width = newWidth
                                rectRoi.x = rectRoi.x + mouseX
                            }
                        }
                        drag{ target: parent; axis: Drag.YAxis }
                        onMouseYChanged: {
                            if(drag.active){
                                var newHeight = rectRoi.height - mouseY;

                                if (newHeight < 30)
                                    return
                                rectRoi.height = newHeight
                                rectRoi.y = rectRoi.y + mouseY
                            }
                        }
                    }
                }

                Rectangle {
                    width: rulersSize
                    height: rulersSize
                    color: "red"
                    anchors.horizontalCenter: parent.left
                    anchors.verticalCenter: parent.bottom

                    MouseArea {
                        anchors.fill: parent
                        drag{ target: parent; axis: Drag.XAxis; }
                        onMouseXChanged: {
                            if(drag.active) {
                                var newWidth = rectRoi.width - mouseX
                                if (newWidth < 30)
                                    return
                                rectRoi.width = newWidth
                                rectRoi.x = rectRoi.x + mouseX
                            }
                        }
                        drag{ target: parent; axis: Drag.YAxis }
                        onMouseYChanged: {
                            if(drag.active){

                                var newHeight = rectRoi.height + mouseY;

                                if (newHeight < 30)
                                    return
                                rectRoi.height = newHeight
                            }
                        }
                    }
                }

                Rectangle {
                    width: rulersSize
                    height: rulersSize
                    color: "orange"
                    anchors.horizontalCenter: parent.right
                    anchors.verticalCenter: parent.bottom
                    MouseArea {
                        anchors.fill: parent
                        drag{ target: parent; axis: Drag.XAxis }
                        onMouseXChanged: {
                            if(drag.active){

                                var newWidth = rectRoi.width + mouseX
                                if (newWidth < 30)
                                    return
                                rectRoi.width = newWidth
                            }
                        }
                        drag{ target: parent; axis: Drag.YAxis }
                        onMouseYChanged: {
                            if(drag.active){

                                var newHeight = rectRoi.height + mouseY;

                                if (newHeight < 30)
                                    return
                                rectRoi.height = newHeight
                            }
                        }
                    }
                }

                Rectangle {
                    width: rulersSize
                    height: rulersSize
                    color: "green"
                    anchors.horizontalCenter: parent.right
                    anchors.verticalCenter: parent.top
                    MouseArea {
                        anchors.fill: parent
                        drag{ target: parent; axis: Drag.XAxis; }
                        onMouseXChanged: {
                            if(drag.active){

                                var newWidth = repeater.itemAt(index).width + mouseX
                                if (newWidth < 30)
                                    return
                                repeater.itemAt(index).width = newWidth
                            }
                        }
                        drag{ target: parent; axis: Drag.YAxis }
                        onMouseYChanged: {
                            if(drag.active) {
                                var newHeight = repeater.itemAt(index).height - mouseY;
                                if (newHeight < 30)
                                    return
                                repeater.itemAt(index).height = newHeight
                                repeater.itemAt(index).y = repeater.itemAt(index).y + mouseY
                            }
                        }
                    }
                }
            }
        }

希望对大家有所帮助

如何在 QML 中制作可调整大小的矩形？

How to make a resizable rectangle in QML?

qt

qml

qt5

qtquick2

qquickitem