Zoom in the photo in flickable, the part outside the window cannot be dragged back

[jimfar]

this Code snippet：
import QtQuick.Window 2.2
import QtQuick 2.0
Window {
id:root1
visible: true
width: 600
height: 600
title: qsTr("Hello World")
property double lastContentXdelta:0
property double lastContentYdelta:0
MouseArea{
id: dragRegion1
anchors.fill: parent

    onWheel : {
        if (wheel.modifiers & Qt.ControlModifier){
            // prevcenter=tform.origin;
            if (wheel.angleDelta.y > 0)
            {

                tform.xScale += 0.01
                tform.yScale += 0.01
            }
            else
            {
                if( tform.xScale>0.01){
                    tform.xScale -= 0.01
                    tform.yScale -= 0.01

                }


            }


        }
        else{
            wheel.accepted=false
        }
    }
    // Attach scrollbars to the right and bottom edges of the view.
    ScrollBar {
        id: verticalScrollBar
        width: 12; height: flickview.height
        anchors.right: flickview.right
        opacity: 1
        z:1000;
        orientation: Qt.Vertical
        position: (flickview.contentY - flickview.originY) * (flickview.height / flickview.contentHeight)
        pageSize: flickview.visibleArea.heightRatio
        //targetflick:flickview

    }

    ScrollBar {
        id: horizontalScrollBar
        width: flickview.width; height: 12
        anchors.bottom: flickview.bottom
        opacity: 1
        z:1000;
        orientation: Qt.Horizontal
        position: (flickview.contentX - flickview.originX) * (flickview.width / flickview.contentWidth)
        pageSize: flickview.visibleArea.widthRatio
        // targetflick:flickview

    }

    // Create a flickable to view a large image.
    Flickable {
        id: flickview
        leftMargin: 10
        anchors.fill: parent
        contentWidth: picture.width*tform.xScale
        contentHeight: picture.height*tform.yScale
        onContentWidthChanged: {
            // flickview.originX-=(flickview.width-flickview.width*tform.xScale )/2

        }
        onContentHeightChanged: {
             //flickview.originY-=(flickview.height-flickview.height*tform.xScale )/2
        }
        Image {
            id: picture
            source: "./pics/niagara_falls.jpg"
            asynchronous: true
            transform: Scale {
                id: tform
                origin.x:  flickview.contentX +flickview.width/2
                origin.y: flickview.contentY +flickview.height/2
                xScale: 1
                yScale: 1
            }
            Component.onCompleted:
            {

            }
        }

        // Only show the scrollbars when the view is moving.
        states: State {
            name: "ShowBars"
            when: view.movingVertically || view.movingHorizontally
            PropertyChanges { target: verticalScrollBar; opacity: 1 }
            PropertyChanges { target: horizontalScrollBar; opacity: 1 }
        }

        transitions: Transition {
            NumberAnimation { properties: "opacity"; duration: 400 }
        }
    }
}

}