Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

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



  • 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 }
            }
        }
    }
    

    }


Log in to reply