QMLでピンチとズーム機能を構築しています。パフォーマンス上の理由から、pinchArea はフリック可能なアイテムの子です。
以下のコードは、操作後にユーザーが画像をダブルクリックすると、画像が再び中央に配置され、スケールが 1 にリセットされるように設定されています。
望ましくない動作は次のとおりです。フリック可能なアイテムには、画像がズーム/移動された後にユーザーが画面のどこかをタップすると、アイテムが再び中央に移動するという機能があります。画面がタップされた後に画像を再センタリングしたくない代わりに、ダブルクリックで動作を制御したい
これをある程度解決できる 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
}
}
}
}
}