حرکت همزمان شکل روی دو تصویر

[ali_72]

سلام دوستان

دو تصویر یکسان دارم
یکی قابلیت بزرگنمایی داره و یکی نداره
روی یکی چند شکل ترسیم کردم (Canvas) ک قابلیت درگ کردن دارند
میخوام وقتی هر کدوم از این شکل ها روی تصویر که قابلیت بزرگنمایی داره جابه جا شدند (درگ شدند) شکلی که روی تصویر اول تعریف کردم هم جا به جا شه
در واقع میخوام با این کار کاربر در حالتی ک بزرگنمایی داره بتونه موقعیت ش رو روی تصویر در حالت عادی (بدون بزرگنمایی) هم ببینه
من از کد زیر استفاده کردم اما موقعیت صحیح نمایش داده نمیشه

اگه ب غیر از این روش بهتری برای بزرگ نمایی پیشنهاد میکنید هم ممنون میشم تا راهنمایی کنید

ممنون

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


}