'How to Centered the Rectangle in qml Scroll View

I had created a video player in QML having zooming functionality. I want to add the Google Map like zooming functionality in it that is zoom from the center of the current visible frame. I can center the image using:

videoScrollControl1.flickableItem.contentX = (videoScrollControl1.flickableItem.contentWidth-imgVideo.width)/2
videoScrollControl1.flickableItem.contentY= (videoScrollControl1.flickableItem.contentHeight-imgVideo.height)/2

but the problem is that it always zoom to the center of the Image. I want to zoom from any point or from the center of current visible frame. my Code is as follows:

ScrollView {
    id: videoScrollControl1
    anchors.fill: parent
    
    anchors.margins: 5
    frameVisible: false
    contentItem: Rectangle {
        id: videoAreaMain1
        width: 620
        height: 470
        color: "#000000"        
        
        
        Image {
            id: imgVideo
            width: parent.width
            height: parent.height
            anchors.left: parent.left
            anchors.top: parent.top
            fillMode: Image.PreserveAspectFit
            
            MouseArea {
                id: zooingWheeler
                anchors.fill: parent
                hoverEnabled: true
            }
        }
        
    }
    
}

Thanks in advance.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source