Unsolved Position of mouse on image
-
Hi,
I have two images:
1- normal image
2- same image with the ability to zoomI 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(); } } }