gpt4 book ai didi

qt - QML : Prevent snap back to bounds on touch event for flickable

转载 作者:行者123 更新时间:2023-12-05 07:12:04 28 4
gpt4 key购买 nike

我正在 QML 中构建缩放功能。出于性能原因,pinchArea 是轻弹项的子项。

下面的代码是这样设置的,如果用户在操作后双击图像,图像会重新居中并且比例会重置为 1。

不需要的行为是:轻弹项目有一个功能,如果用户在缩放/移动图像后点击屏幕中的某处,该项目会重新居中。我不希望图像在点击屏幕后重新居中,而是想通过双击来控制行为

我可以半解决这个问题的一种方法是使用鼠标区域,但是鼠标区域会在可轻弹项目移动时移动,并且在鼠标区域外部单击会使项目重新居中。关于如何修改鼠标区域以阻止此操作,或关闭点击可轻弹项目并在捏合和缩放后它自行居中的行为的任何想法?

感谢您的帮助/建议!

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
}
}
}
}
}
}

关于qt - QML : Prevent snap back to bounds on touch event for flickable,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60547701/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com