鼠标在图像上的位置

Question

我有两张图片：  正常形象  2.具有缩放能力的相同图像。 我在第二张图像上有4个可拖动的形状（A，B，C，D）（具有缩放功能的图像）。 我想在缩放图像上改变A / B / C / D形状的位置时，在正常图像上显示鼠标的位置（绘制形状（canvas3））。 我使用了以下代码但它没有显示正确的位置。事实上，我希望用户可以看到鼠标的位置。

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: {
                    .....
                }

                MouseArea {
                    id: dragArea
                    hoverEnabled: true
                    anchors.fill: parent
                    drag.target: photoFrame
                    scrollGestureEnabled: false 
                    onPressed: {
                        photoFrame.z = ++mywin.highestZ;
                    }
                    onWheel: {
                        ...
                }
            }
            Point {
                id: pointA                    
                onDragged: {
                    xwheel=pointA.x;
                    ywheel=pointA.y;
                    canvas3.requestPaint()
                }
            }
            //Point B
            //Point D
            //Pint C
        }
    }
}
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();
        }
    }
}