Position of mouse on image

[neda]

Hi,
I have two images:
1- normal image
2- same image with the ability to zoom

I have 4 draggable shapes (A,B,C,D) on second image (image with the ability to zoom).

I want to display position of mouse on normal image (with draw a shape (canvas3)) when the position of A/B/C/D shapes changed on the zoomed image.
I used the following code but this does not show correct position.

property int xwheel: 0
    property int ywheel: 0    
    property alias source :image.source
    id:mywin
    property int highestZ: 0
    property real defaultSize: mywin.width
    property real surfaceViewportRatio: 1.5

    ScrollView {
        anchors.fill: parent
        flickableItem.interactive: true
        frameVisible: true
        highlightOnFocus: true
        style: ScrollViewStyle {
            transientScrollBars: true
            .........
        }

        Flickable {
            id: flick
            anchors.fill: parent
            contentWidth: parent.width
            contentHeight: parent.height

            Rectangle {
                id: photoFrame
                width: parent.width
                height: parent.height                
                scale:defaultSize / parent.width
                Behavior on scale { NumberAnimation { duration: 200 } }
                Behavior on x { NumberAnimation { duration: 200 } }
                Behavior on y { NumberAnimation { duration: 200 } }
                smooth: true
                antialiasing: true

                Image {
                    id:image
                    anchors.fill: parent
                    fillMode: Image.PreserveAspectFit
                    smooth: true
                }
                PinchArea {
                    anchors.fill: parent
                    pinch.target: photoFrame
                    pinch.minimumRotation: -360
                    pinch.maximumRotation: 360
                    pinch.minimumScale: 0.1
                    pinch.maximumScale: 10
                    pinch.dragAxis: Pinch.XAndYAxis
                    property real zRestore: 0
                    onSmartZoom: {
                        if (pinch.scale > 0) {
                            photoFrame.rotation = 0;
                            photoFrame.scale = Math.min(mywin.width, mywin.height) / Math.max(image.sourceSize.width, image.sourceSize.height) * 0.85
                            photoFrame.x = flick.contentX + (flick.width - photoFrame.width) / 2
                            photoFrame.y = flick.contentY + (flick.height - photoFrame.height) / 2
                            zRestore = photoFrame.z
                            photoFrame.z = ++mywin.highestZ;
                        } else {
                            photoFrame.rotation = pinch.previousAngle
                            photoFrame.scale = pinch.previousScale
                            photoFrame.x = pinch.previousCenter.x - photoFrame.width / 2
                            photoFrame.y = pinch.previousCenter.y - photoFrame.height / 2
                            photoFrame.z = zRestore
                            --mywin.highestZ
                        }
                    }

                    MouseArea {
                        id: dragArea
                        hoverEnabled: true
                        anchors.fill: parent
                        drag.target: photoFrame
                        scrollGestureEnabled: false 
                        onPressed: {
                            photoFrame.z = ++mywin.highestZ;
                        }

                        onWheel: {

                            if (wheel.modifiers & Qt.ControlModifier) {
                                photoFrame.rotation += wheel.angleDelta.y / 120 * 5;
                                if (Math.abs(photoFrame.rotation) < 4)
                                    photoFrame.rotation = 0;
                            } else {
                                photoFrame.rotation += wheel.angleDelta.x / 120;
                                if (Math.abs(photoFrame.rotation) < 0.6)
                                    photoFrame.rotation = 0;
                                var scaleBefore = photoFrame.scale;
                                photoFrame.scale += photoFrame.scale * wheel.angleDelta.y / 120 / 10;
                            }
                        }
                    }
                }

                Point {
                    id: pointA
                    x: image.width/4
                    y: image.height/4
                    onDragged: {
                        xwheel=pointA.x;
                        ywheel=pointA.y;
                        canvas3.requestPaint()
                    }
                }
                Point {
                    id: pointB
                    .....
                }

                Point {
                    id: pointD
                    .....
                }

                Point {
                    id: pointC
                    .....
                }
                
            }
        }
    }
    Image {
        id:mainimage
        width: parent.width/4
        height: parent.height/4
        smooth: true
        source: image.source

        Canvas {
            id: canvas3            
            width: parent.width
            height: parent.height
            onPaint: {
                var context = getContext("2d");

                // Make canvas all white
                ......				
                context.beginPath();
				//Style
				.......                
                context.moveTo(xwheel/4, ywheel/4);               
                context.arc(xwheel/4, ywheel/4, 5, 0, 2*Math.PI, true)
                context.fill();
                context.stroke();
            }
        }

    }