我已经在QML中创建了一个包含Image
的组件,我希望对其进行缩放。我还想用鼠标移动Image
(就像在手机照相馆中一样),因此在不缩放时不能移动,在缩放时只能移动到边界为止。我有点被困在这里,因为我不知道如何正确设置“边界点”。
Zooming.qml
import QtQuick 2.9
Rectangle {
id: root
anchors.fill: parent
Flickable {
id: flick
anchors.fill: parent
contentWidth: width
contentHeight: height
boundsBehavior: Flickable.StopAtBounds
Rectangle {
id: testRect
width: flick.contentWidth
height: flick.contentHeight
Image {
anchors.fill: parent
source: "image.jpg"
}
PinchArea {
anchors.fill: parent
pinch.target: testRect
pinch.minimumRotation: 0 //No need for rotation
pinch.maximumRotation: 0
pinch.minimumScale: 1
pinch.maximumScale: 4
pinch.dragAxis: Pinch.XAndYAxis
property real initialWidth
property real initialHeight
MouseArea {
id: dragArea
hoverEnabled: true
anchors.fill: parent
drag.target: testRect
scrollGestureEnabled: false // 2-finger-flick gesture should pass through to the Flickable
//----------- Set bounds for dragging
drag.minimumX: root.width - (testRect.width * testRect.scale)
drag.minimumY: root.height - (testRect.height * testRect.scale)
drag.maximumX: testRect.scale == 1 ? -root.width : root.width * testRect.scale
drag.maximumY: testRect.scale == 1 ? -root.height : 0 + (testRect.scale / testRect.width)
// ----------
onDoubleClicked: { //Reset size and location of camera
testRect.x = 0
testRect.y = 0
testRect.scale = 1
}
onWheel: {
var scaleBefore = testRect.scale;
testRect.scale += testRect.scale * wheel.angleDelta.y / 120 / 10;
if(testRect.scale < 1)
testRect.scale = 1
else if(testRect.scale > 4)
testRect.scale = 4
}
}
}
}
}
}
我尝试用drag.maximumY / drag.minimumY / ..
来做到这一点,但没有成功-在不缩放时可以使用,但是我无法弄清楚缩放后的公式。
我应该使用什么公式,或者有什么更好的方法?