Position of mouse on image



  • 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();
                }
            }
    
        }
    

Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.