如何在 QML 中制作可调整大小的矩形? [英] How to make a resizable rectangle in QML?
问题描述
我正在寻找一种在 QQuickItem 中创建矩形的简单方法.我想调整大小，并像这样拖动这个矩形的边框(在 MouseArea 的属性.它可用于在 Rectangle 周围移动，并与 MouseX 和 MouseY 属性，调整大小.
拖动在 Rectangle 内处于活动状态，而在 Rectangle 两侧设置的旋钮上调整大小处于活动状态(为简洁起见，未设置鼠标光标变化).
导入QtQuick 2.4导入 QtQuick.Controls 1.3应用程序窗口{标题:qsTr(测试作物")宽度:640高度:480可见:真实属性变量选择:未定义图像 {编号:image1anchors.fill:父级来源:http://cdn.cutestpaw.com/wp-content/uploads/2013/01/l-Kitty-attack.jpg"鼠标区域{anchors.fill:父级已点击:{如果(！选择)selection = selectionComponent.createObject(parent, {"x": parent.width/4, "y": parent.height/4, "width": parent.width/2, "height": parent.width/2})}}}成分 {id:选择组件长方形 {编号:selComp边界 {宽度:2颜色:钢蓝"}颜色:#354682B4"属性整数标尺大小:18MouseArea {//拖动鼠标区域anchors.fill:父级拖{目标:父母最小X:0最小值:0maxX:parent.parent.width - parent.width最大值:parent.parent.height - parent.height平滑:真实}onDoubleClicked:{parent.destroy()//销毁组件}}长方形 {宽度:标尺尺寸高度:标尺尺寸半径:标尺大小颜色:钢蓝"anchors.horizontalCenter: parent.leftanchors.verticalCenter: parent.verticalCenter鼠标区域{anchors.fill:父级拖动{目标:父母；轴:Drag.XAxis }onMouseXChanged:{如果(拖动活动){selComp.width = selComp.width - mouseXselComp.x = selComp.x + mouseXif(selComp.width <30)selComp.width = 30}}}}长方形 {宽度:标尺尺寸高度:标尺尺寸半径:标尺大小颜色:钢蓝"anchors.horizontalCenter: parent.rightanchors.verticalCenter: parent.verticalCenter鼠标区域{anchors.fill:父级拖动{目标:父母；轴:Drag.XAxis }onMouseXChanged:{如果(拖动活动){selComp.width = selComp.width + mouseXif(selComp.width <50)selComp.width = 50}}}}长方形 {宽度:标尺尺寸高度:标尺尺寸半径:标尺大小x: 父.x/2y:0颜色:钢蓝"anchors.horizontalCenter: parent.horizontalCenteranchors.verticalCenter: parent.top鼠标区域{anchors.fill:父级拖动{目标:父级；轴:Drag.YAxis }onMouseYChanged:{如果(拖动活动){selComp.height = selComp.height - mouseYselComp.y = selComp.y + mouseYif(selComp.height <50)selComp.height = 50}}}}长方形 {宽度:标尺尺寸高度:标尺尺寸半径:标尺大小x: 父.x/2y:父母.y颜色:钢蓝"anchors.horizontalCenter: parent.horizontalCenteranchors.verticalCenter: parent.bottom鼠标区域{anchors.fill:父级拖动{目标:父母；轴:Drag.YAxis }onMouseYChanged:{如果(拖动活动){selComp.height = selComp.height + mouseYif(selComp.height <50)selComp.height = 50}}}}}}}示例截图:
I'm looking for a simple way to create a rectangle in a QQuickItem.
I want to resize, and drag the borders of this rectangle like this (found at resizable QRubberBand)
Has someone an idea?
There are probably several ways to achieve the desired result. Since I've considered the implementation of a similar Component for a cropping tool software of mine, I'm going to share a toy example which uses part of that code.
Differently from the rubber band in the example, my Rectangle is resizable only on a single axis at a time. I'm confident that you can build on that and customise the code to meet your needs.
The basic idea of the code is to exploit the drag property of MouseArea. It can be used to move around the Rectangle and, combined with MouseX and MouseY properties, resize it.
Dragging is active inside the Rectangle whereas resizing is active on the knobs set on the sides of the Rectangle (no mouse cursor change is set for the sake of brevity).
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
}
}
}
}
}
}
}
A screenshot of the example:
这篇关于如何在 QML 中制作可调整大小的矩形?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
