【发布时间】：2015-05-19 05:02:09
【问题描述】：
我正在寻找一种在QQuickItem 中创建矩形的简单方法。
我想调整大小，然后像这样拖动这个矩形的边框（在resizable QRubberBand 找到）
有人有想法吗？
【问题讨论】：
标签： qt qml qt5 qtquick2 qquickitem
【发布时间】：2015-05-19 05:02:09
【问题描述】：
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
}
}
}
}
}
}
希望对大家有所帮助
【讨论】：
可能有几种方法可以达到预期的效果。由于我已经考虑为我的裁剪工具软件实现类似的Component，因此我将分享一个使用该代码的一部分的玩具示例。
与示例中的橡皮筋不同，我的Rectangle 一次只能在一个轴上调整大小。我相信您可以在此基础上构建并自定义代码以满足您的需求。
代码的基本思想是利用MouseArea 的drag 属性。它可用于在Rectangle 周围移动，并结合MouseX 和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
}
}
}
}
}
}
}
示例截图：
【讨论】：
-
很好的例子和漂亮的小猫！
-
我已经测试了这段代码，在我的机器上似乎只能使用底部手柄进行拖动，其他 3 个手柄无法拖动/移动
-
目前无法在 Windows 上对其进行测试，但在我的 Fedora 29 笔记本电脑上进行的快速测试显示性能非常好。
-
@BaCaRoZzo 很好的例子。介意我在我的某个应用中重复使用它吗？
-
@user826955 当然。随时返回并通过改进更新代码 - 如果您从根本上更改代码，请提供您自己的答案。这样每个人都可以受益。事实上，这只是一个演示代码。 :)