Zoom/Scale into a desired image mask

abdesai

Hi, I have an image being displayed within a rectangle viewport which allows the user to zoom-in and zoom-out using touch and mouse. When the page gets rendered currently the image is shown at scale with PreserveAspectFit setting![alt text](image url). Hence the image appears completely within the viewport rectangle.

I have an image mask which is a rectangle coordinates in pixel value of image coordinate system covering a desired region in the image. I would like to zoom/scale into this region based on the rectangle coordinates upon the page being loaded.

Is this possible? I have tried image transformations using scale and translate but havent had any success accurately focusing-in on the desired mask region.

Rectangle {
            id: imagerect
            width: parent.width
            height: parent.height

            Image {
                id: moveImages
                source: "image.png"
                width: parent.width
                height: parent.height
                fillMode: Image.PreserveAspectFit
                anchors {
                    horizontalCenter: parent.horizontalCenter
                    top: parent.top
                }
            }
        }
        PinchArea {
            id: pincharea
            anchors.fill: frame
            pinch.target: imagerect
            pinch.minimumScale: 0.5
            pinch.maximumScale: 10
       }
}

file:///home/allay.desai/Pictures/focus.png