Question

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

enter image description here

有人有想法吗？

Answer 1

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

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

代码的基本思想是利用MouseArea的{{3}}属性。它可用于移动Rectangle，并与drag和MouseX属性结合使用，可以调整大小。

拖动在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
                        }
                    }
                }
            }
        }
    }
}

示例的屏幕截图： enter image description here

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中制作可调整大小的矩形？

2 个答案: