pinch/scroll zoom like google map

ynatynat

I would like to zoom image like google maps.
With Google Maps, the location user want to enlarge (the location where the cursor is placed) is always displayed at the same position and zoomed.
How to do?

                    Rectangle{
                        id:image_wrapper
                        width:parent.width*0.8
                        height:parent.height
                        anchors.left: btn_back.right

                        color:"cyan"
                        border.color:"blue"
                        clip:true
                        Image {
                            id: image
                            anchors.centerIn: parent
                            fillMode: Image.PreserveAspectFit
                            source: contextLoadImages.imageSource
                            antialiasing: true
                        }
                    }


                    Flickable{
                        id:flick2
                        anchors.fill:image_wrapper

                        PinchArea{
                            anchors.fill: parent
                            pinch.target: image
                            pinch.minimumScale: 0.1
                            pinch.maximumScale: 10
                            pinch.dragAxis: Pinch.XAndYAxis
                            onPinchStarted:{
                                 // not called
                            }
                            onSmartZoom: {
                                // not called

                            }
                            MouseArea{
                                id:mousearea
                                anchors.fill: parent
                                drag.target: image
                                drag.axis: Drag.XAndYAxis
                                hoverEnabled: true
                                scrollGestureEnabled: false// 2-finger-flick gesture should pass through to the Flickable (@ Example:photo surface)
                                onPressed:{
                                    image.anchors.centerIn=undefined
                                    
                                }
                                onPositionChanged: {
                                    //console.log("xy=",mouse.x, mouse.y  )
                                    //let pos = mapToItem(image, mouse.x, mouse.y)

                                }

                                onWheel: {
                                    console.log("flick2 wheel", image.scale )
                                    image.scale += image.scale * wheel.angleDelta.y / 120 / 10;
                                    if(image.scale<0.1)
                                    {
                                        image.scale=0.1
                                    }
                                    else if(image.scale>10)
                                    {
                                        image.scale=10
                                    }
                                }
                            }
                        }
                    }

sierdzio

Your Image should be inside of your Flickable.

ynatynat

@sierdzio
Thank you. I understand correct coding: Image should be placed inside Flickable.
But previous style could zoom for now.