Flickable and scale

habamax

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?

p3c0

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
@

habamax

[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

habamax

[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.