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


  • Moderators

    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.


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.