QML Drag and PinchArea



  • Hi! I want to be able to drag and rotate a picture. When I release it, it should go back to it's original location. It functions so far, only that when I am pressing on it second time, it rotates to the angle of the first time rotation.

    @Image {
    id: rectangle
    source: "rectangle.png"
    width: parent.width0.65
    height: parent.height
    0.8

                                anchors {
                                    horizontalCenter: parent.horizontalCenter
                                    verticalCenter: parent.verticalCenter
                                    verticalCenterOffset: height*-0.02
                                }
    
                                PinchArea {
                                    anchors.fill: parent
                                    pinch.target: rectangle
                                    pinch.minimumRotation: -360
                                    pinch.maximumRotation: 360
    
                                    onPinchFinished: {
                                        parent.border.color = "orange"
                                    }
    
                                    MouseArea {
                                        id: dragMouseArea
                                        anchors.fill: parent;
    
                                        onPressed: {
                                           rectangle.anchors.horizontalCenter = undefined
                                           rectangle.anchors.verticalCenter = undefined
                                           parent.state = ""
                                        }
    
                                        Drag.active: dragMouseArea.drag.active
                                        Drag.hotSpot.x: 0
                                        Drag.hotSpot.y: 0
                                        drag.target: rectangle
                                        drag.minimumY: 0
                                        drag.maximumY: parent.height - 30 - rectangle.height
                                        drag.minimumX: 0
                                        drag.maximumX: parent.width - 30 - rectangle.width
    
                                        onEntered: parent.border.color = "#20e36f0f"
                                        onExited: parent.border.color = "#333333"
                                        onWheel: {
                                            if (wheel.modifiers & Qt.ControlModifier) {
                                                rectangle.rotation += wheel.angleDelta.y / 120 * 5;
                                                if (Math.abs(rectangle.rotation) < 4)
                                                    rectangle.rotation = 0;
                                            } else {
                                                rectangle.rotation += wheel.angleDelta.x / 120;
                                                if (Math.abs(rectangle.rotation) < 0.6)
                                                    rectangle.rotation = 0;
                                            }
                                        }
    
                                        onReleased: {
                                           parent.state = "snapBack"
                                        }
                                    }
                                }
                            }
                        }
    
                        states: [
                            State {
                                name: "snapBack"
    
                                PropertyChanges {
                                    target: rectangle
                                    x: rectangle2.x
                                    y: rectangle2.y
                                    rotation: rectangle2.rotation
                                }
                            },
    
                            State {
                                name: ""
    
                                PropertyChanges {
                                    target: rectangle
                                    x: rectangle2.x
                                    y: rectangle2.y
                                }
                            }
                        ]
    
                        transitions: [
                            Transition {
                                from: ""
                                to: "snapBack"
    
                                NumberAnimation {
                                    properties: "x,y"
                                    duration: 2000
                                }
    
                                RotationAnimation {
                                    direction: RotationAnimation.Shortest
                                    duration: 2000
                                }
                            }
                        ]@
    

    Hope, someone can help.

    Best regards


Log in to reply
 

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