Flickable and scale
-
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.1import 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?
-
Hi,
Could "transform:Scale":http://qt-project.org/doc/qt-5/qml-qtquick-scale.html be useful to you ?
You can set origin.x and origin.y values as 500 viz. is center of Rectangle.@
Rectangle {
id: board
width: 1000
height: 1000
color: "green"
transform: Scale { id: scale; origin.x: 500; origin.y: 500 }
}
@To use:
@
scale.xScale += 0.1
scale.yScale += 0.1
@ -
[quote author="p3c0" date="1406713166"]Hi,
Could "transform:Scale":http://qt-project.org/doc/qt-5/qml-qtquick-scale.html be useful to you ?
[/quote]Well, ideally I would like to pinch zoom stuff in Flickable. And pinch zoom operates on scale as far as I know
-
[quote author="p3c0" date="1406713166"]Hi,
@
Rectangle {
id: board
width: 1000
height: 1000
color: "green"
transform: Scale { id: scale; origin.x: 500; origin.y: 500 }
}
@To use:
@
scale.xScale += 0.1
scale.yScale += 0.1
@[/quote]The same behaviour. Try to zoom in (+) and drag the rectangle downright.