Qt QML:防止flickable在触摸事件时捕捉到边界
我正在QML中构建一个收缩和缩放功能。出于性能原因,pinchArea是flickable项的子项 下面的代码设置为,如果用户在操作后双击图像,图像会重新居中,比例会重置为1 不需要的行为是:flickable项目有一个功能,如果用户在图像缩放/移动后点击屏幕中的某个位置,该项目会重新居中。我不希望在屏幕被点击后图像自动重新居中,而是希望通过双击来控制行为 我可以半解决这一问题的一种方法是使用鼠标区域,但当flickable项目移动时,鼠标区域会移动,并且在鼠标区域外单击会使项目重新居中。关于如何修改鼠标区域以防止此操作,或者如何关闭轻触可轻弹项目的行为,并在收缩和缩放后使其自身居中,有何想法 谢谢你的帮助/建议Qt QML:防止flickable在触摸事件时捕捉到边界,qt,qml,flickable,Qt,Qml,Flickable,我正在QML中构建一个收缩和缩放功能。出于性能原因,pinchArea是flickable项的子项 下面的代码设置为,如果用户在操作后双击图像,图像会重新居中,比例会重置为1 不需要的行为是:flickable项目有一个功能,如果用户在图像缩放/移动后点击屏幕中的某个位置,该项目会重新居中。我不希望在屏幕被点击后图像自动重新居中,而是希望通过双击来控制行为 我可以半解决这一问题的一种方法是使用鼠标区域,但当flickable项目移动时,鼠标区域会移动,并且在鼠标区域外单击会使项目重新居中。关于如
import QtQuick 2.0
Rectangle {
width: 640
height: 360
color: "gray"
Flickable {
id: flick
anchors.fill: parent
contentWidth: 500
contentHeight: 500
Rectangle {
width: flick.contentWidth
height: flick.contentHeight
id: imageFlick
gradient: Gradient {
GradientStop { position: 0.0; color: "red" }
GradientStop { position: 1.0; color: "white" }
}
}
PinchArea {
width: Math.max(flick.contentWidth, flick.width)
height: Math.max(flick.contentHeight, flick.height)
pinch.minimumScale: 1
pinch.maximumScale: 10
pinch.dragAxis: Pinch.XAndYAxis
pinch.target: imageFlick
property real initialWidth
property real initialHeight
onPinchStarted: {
initialWidth = flick.contentWidth
initialHeight = flick.contentHeight
flick.interactive = false
}
onPinchUpdated: {
flick.contentX += pinch.previousCenter.x - pinch.center.x
flick.contentY += pinch.previousCenter.y - pinch.center.y
}
onPinchFinished: {
flick.interactive = true
}
MouseArea {
anchors.fill: flick
width: flick.width
height: flick.height
//Prevents behaivor of recentering on tap within mouse area
// onClicked: {
// flick.cancelFlick()
// }
//For debugging - if tap inside area, recentering doesn't happen. If you tap
// outside of area, recentering happens
// Rectangle {
// anchors.fill:parent
// color: "blue"
// }
onDoubleClicked: {
flick.contentX = 0
flick.contentY = 0
imageFlick.scale = 1
}
}
}
}
}
我自己设法回答了这个问题。对于onPinchUpdated,flick.contentX和flick.contentY需要更改为flick.x和flick.y。我还更改了一些元素的顺序以及它们的嵌套方式 现在,单击时矩形重新居中的不必要行为不再发生
Rectangle {
width: 900
height: parent.height
Rectangle { // pinch area
id: test
width: 800
height: 500
anchors.centerIn: parent
color: "grey"
clip: true
Flickable {
id: flick
anchors.fill: parent
contentWidth: imageFlick.width
contentHeight: imageFlick.height
PinchArea {
id: pinchROI
width: Math.max(flick.contentWidth, flick.width)
height: Math.max(flick.contentHeight, flick.height)
pinch.minimumScale: 1
pinch.maximumScale: 10
pinch.dragAxis: Pinch.XAndYAxis
pinch.target: imageFlick
property real initialWidth
property real initialHeight
onPinchStarted: {
initialWidth = flick.contentWidth
initialHeight = flick.contentHeight
flick.interactive = false
}
onPinchUpdated: {
flick.x = pinch.previousCenter.x - pinch.center.x
flick.y = pinch.previousCenter.y - pinch.center.y
}
onPinchFinished: {
flick.interactive = true
}
MouseArea {
anchors.fill: parent
Rectangle {
id: imageFlick
width: 800
height: 500
gradient: Gradient {
GradientStop { position: 0.0; color: "red" }
GradientStop { position: 1.0; color: "yellow" }
}
}
onDoubleClicked: {
imageFlick.scale = 1
imageFlick.x = 0
imageFlick.y = 0
}
}
}
}
}
}