我正在寻找一种简单的方法来在QQuickItem. 我想调整大小，并像这样拖动这个矩形的边框（在resizableQRubberBand找到）
有人有想法吗？
问问题
12884 次
2 回答
37
可能有几种方法可以达到预期的结果。由于我已经考虑过为我的裁剪工具软件实现类似的实现Component，因此我将分享一个使用该代码的一部分的玩具示例。
与示例中的橡皮筋不同，myRectangle一次只能在一个轴上调整大小。我相信您可以在此基础上构建并自定义代码以满足您的需求。
代码的基本思想是drag利用MouseArea. 它可以用来移动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
}
}
}
}
}
}
}
示例截图：
于 2015-03-17T22:17:42.270 回答
3
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
}
}
}
}
}
}
希望它会帮助某人
于 2019-11-09T11:15:04.497 回答