tl;dr. after scale contents of flickable have horizontal and vertical offsets.
I try to implement flickable with pincharea to zoom in/out flickable’s content and from documentation it looks fairly easy.
import QtQuick 2.2
import QtQuick.Window 2.1
import QtQuick.Controls 1.2
Window {
id: root
visible: true
width: 400
height: 640
color: "#EEE"
Item {
width: root.width
height: root.height
Flickable {
id: flickable
clip: true
anchors.fill: parent
contentWidth: board.width*board.scale
contentHeight: board.height*board.scale
Component.onCompleted: {
contentX = contentWidth / 2 - root.width / 2
contentY = contentHeight / 2 - root.height / 2
}
Rectangle {
id: board
width: 1000
height: 1000
color: "green"
}
PinchArea {
id: pinchArea
anchors.fill: parent
pinch.target: board
pinch.minimumScale: 0.8
pinch.maximumScale: 2
onPinchStarted: console.log("PINCH STARTED, SCALE", pinch.scale, pinch.previousScale)
onPinchUpdated: console.log("PINCH UPDATED, SCALE", pinch.scale, pinch.previousScale)
onPinchFinished: {
flickable.returnToBounds()
console.log("PINCH FINISHED, SCALE", pinch.scale, pinch.previousScale)
}
}
}
Column {
anchors.verticalCenter: parent.verticalCenter
anchors.right: parent.right
anchors.rightMargin: Screen.pixelDensity
spacing: Screen.pixelDensity*3
Button {
id: btnZoomin
text: "+"
width: Screen.pixelDensity*10
height: width
onClicked: {
board.scale += 0.1
flickable.returnToBounds()
}
}
Button {
id: btnZoomout
text: "-"
width: Screen.pixelDensity*10
height: width
onClicked: {
board.scale -= 0.1
flickable.returnToBounds()
}
}
}
}
}
As my laptop has no multitouch I have added 2 buttons to zoom in and out (pincharea operates on scale too). As a result after scale green rectangle has vertical and horizontal offsets.
I can’t find a way to compensate those offsets or a way to do scaling properly.
What should I do?
↧