Using rotation in QML



  • Hi,
    I'm using a file dialog to get an image file and I would like to rotate it if its orientation is incorrect. I used the Documentation to create the code below:

    import VPlayApps 1.0
    import QtQuick 2.11
    import QtQuick.Dialogs 1.2
    import "Script.js" as JS
    
    App {
        id: app
    
        NavigationStack {
            signal rotate(string direction)
    
            Page {
                title: qsTr("Creating Pixmap")
    
                AppButton {
                    id: dial
                    text: "Choose a file"
                    onClicked: {
                        myFileDialog.visible = true
                    }
                }
    
                FileDialog {
                    id: myFileDialog
                    title: "Please choose a file."
                    onAccepted: {
                        console.log("You chose " + myFileDialog.fileUrl)
                    }
    
                    onRejected: {
                        console.log("Rejected")
                    }
                }
    
                Rectangle {
                    id: rotationContainer
                    width: 100
                    height: 50
    
                    anchors.bottom: imgPreview.top
                    anchors.right: imgPreview.right
    
                    Image {
                        id: rotateR
                        source: "images/rotate_right.png"
                        width: 50
                        height: 50
                        fillMode: Qt.KeepAspectRatio
                        anchors.right: parent.right
                    }
    
                    MouseArea {
                        id: rotateRight
                        anchors.fill: rotateR
    
                        signal rotate(string direction)
    
                        onClicked: {
                            console.log("Rotate right clicked")
                            onRotate: console.log("The rotate signal is triggered.")
                            rotateRight.rotate.connect(rotateImage)
                            rotateRight.rotate("right")
                        }
                    }
    
                    Image {
                        source: "images/rotate_left.png"
                        width: 50
                        height: 50
                        fillMode: Qt.KeepAspectRatio
                        anchors.right: rotateR.left
                    }
                }
    
                Rectangle {
                    id: imgPreview
                    width: 150
                    height: 150
                    anchors.centerIn: parent
                    border.color: "blue"
                    border.width: 1
    
    
                    Image {
                        source: myFileDialog.fileUrl
                        width: 150
                        height: 150
                        fillMode: Qt.KeepAspectRatio
    
                        function rotateImage(direction) {
                            console.log("Function rotateImage was called, the direction is " + direction)
    
                            var imgCoordinates = imgPreview.mapToItem(
                                        imgPreview.parent, 0, 0)
    
                            console.log("x: " + imgCoordinates.x + ", y: " + imgCoordinates.y)
                            var x = imgCoordinates.x + imgPreview.width / 2
                            var y = imgCoordinates.y - imgPreview.height / 2
    
                            if (direction === "right") {
                                console.log("if right")
                                transform: Rotation {origin.x: x;origin.y: y; angle: 90
    
                                }
                            }
                        }
    
                    }
                    MouseArea {
                        id: imgSpace
                        anchors.fill: parent
    
                        Image {
                            source: "images/enlarge.png"
                            width: 50
                            height: 50
    
                            fillMode: Qt.KeepAspectRatio
                        }
    
                        onClicked: {
                            var fileId = myFileDialog.fileUrl
                            PictureViewer.show(app, fileId)
                        }
                    }
                }
            }
        }
    }
    
    

    In the transform: Rotation line the error message requesting a "," after Rotation and a ":" after origin.. If I add them I get a message saying these items are unexpected. How can I avoid the problem?
    Thank you for your help.



  • hi @gabor53

    MouseArea {
                       id: rotateRight
                       anchors.fill: rotateR
    
                       signal rotate(string direction)
                           onRotate: console.log("The rotate signal is triggered.") // < 
                       onClicked: {
                           console.log("Rotate right clicked")
                          // onRotate: console.log("The rotate signal is triggered.")// not inside the function
                           rotateRight.rotate.connect(rotateImage)
                           rotateRight.rotate("right")
                       }
                   }
    
     if (direction === "right") {
                                console.log("if right")
                                transform: Rotation {}  // c'ant  use " : " to assign the value, use '='
    
                                }
    

  • Qt Champions 2017

    Looking at your code brings in general question. When shall we use ":" and '=' for assigning the values. Inside the signalhandlers/functions you should use the =. Now you are inside the function. Inside the function you should use the '=' to assign the values. @LeLev has already answered on how to assign the values.



  • Hi @LeLev ,

    I got the same error message when I changed the ":" to "=".

                            if (direction === "right") {
                                console.log("if right")
                                transform =  Rotation {origin.x: x; origin.y: y; angle: 90
                                }
                            }
    

    What else can be wrong?
    Thank you.


  • Qt Champions 2017

    You are trying to create the Rotation QML Object inside the function handler. That is the issue. Also function is part of image. You need to explicitly call with identity. You can try some thing like follows.

    Window {
        id : top
        visible: true;width: 640;height: 480
    
        function rotateImage(direction) {
            console.log("Rotation Dir=" + direction)
            if (direction === "right") {
                console.log("if right")
                img.transform = rot
            }
        }
        Column {
            id : col
            spacing: 10
            Button{text : "Right"
                onClicked: {
                    top.rotateImage("right")
                }
            }
            Button{text : "Left"}
        }
    
        Rotation{id : rot; origin.x : 10.0;origin.y : 10.0;angle : 90}
    
        Image{id : img;anchors.left: col.right;source :"my.jpg"}
    }
    


  • Hi @dheerendra ,
    Your recommendation worked nicely. I came up with the following code:

    import VPlayApps 1.0
    import QtQuick 2.11
    import QtQuick.Dialogs 1.2
    
    App {
        id: app
    
        NavigationStack {
    
            Page {
                id: first
                title: qsTr("Creating Pixmap")
    
                function rotateImage(direction) {
                    console.log("Rotation Dir: " + direction)
                    var imgCoordinates = choosenImg.mapToItem(choosenImg.parent, 0,
                                                              0)
    
                    var x = imgCoordinates.x + choosenImg.width / 2
                    var y = imgCoordinates.y - choosenImg.height / 2
    
                    if (direction === "right") {
                        console.log("if right")
                        choosenImg.transform = rot
                    }
                }
    
                AppButton {
                    id: dial
                    text: "Choose a file"
                    onClicked: {
                        myFileDialog.visible = true
                    }
                }
    
                FileDialog {
                    id: myFileDialog
                    title: "Please choose a file."
                    onAccepted: {
                        console.log("You chose " + myFileDialog.fileUrl)
                    }
    
                    onRejected: {
                        console.log("Rejected")
                    }
                }
    
                Image {
                    id: rotateR
                    source: "images/rotate_right.png"
                    width: 50
                    height: 50
                    fillMode: Qt.KeepAspectRatio
                    anchors.bottom: choosenImg.top
                    anchors.right: choosenImg.right
                    visible: false
                }
    
                MouseArea {
                    id: rotateRight
                    anchors.fill: rotateR
    
                    onClicked: {
                        console.log("Rotate right clicked")
                        first.rotateImage("right")
                        
                    }
                }
    
                Image {
                    id: rotateL
                    source: "images/rotate_left.png"
                    width: 50
                    height: 50
                    fillMode: Qt.KeepAspectRatio
                    anchors.bottom: choosenImg.top
                    anchors.right: rotateR.left
                    visible: false
                }
    
                Image {
                    id: enlarge
                    source: "images/enlarge.png"
                    width: 50
                    height: 50
                    fillMode: Qt.KeepAspectRatio
                    anchors.bottom: rotateL.bottom
                    anchors.right: rotateL.left
                    visible: false
                }
    
                MouseArea {
                    id: imgBigger
                    anchors.fill: enlarge
                    visible: false
    
                    onClicked: {
                        PictureViewer.show(app, myFileDialog.fileUrl)
                    }
                }
    
                Image {
                    id: choosenImg
                    source: myFileDialog.fileUrl
                    visible: true
                    width: 150
                    height: 200
                    anchors.centerIn: parent
    
                    onStatusChanged: {
                        if (choosenImg.status == Image.Ready) {
                            rotateR.visible = true
                            rotateL.visible = true
                            imgBigger.visible = true
                            enlarge.visible = true
                        }
                    }
                }
    
                Rotation {
                    id: rot
                    origin.x: x
                    origin.y: y
                    angle: 90
                }
            }
        }
    }
    
    

    The only problem is that the rotated image looses its anchors and ends up on the top of the page. How can I keep it anchored at the original location?
    Thank you for your help.


  • Qt Champions 2017

    It could be issue with x and y values you are supplying. Can you check with x & y values ?



  • Hi @dheerendra ,

    You are right. The problem is that it rotates around the top left corner, not the image center. Is there a quick way to define the center in my case?
    Thank you.


  • Qt Champions 2017

    Try to set the transformOrigin. It should help you.



  • Hi @dheerendra ,
    Would you show me how to use it in my case? It works within Image, but not, when I
    try to trigger it using onClicked.

    Thank you for your help.


  • Qt Champions 2017

    Can you try with simple program on rotation of image. Based on the example you can adjust your program.

    import QtQuick 2.11
    import QtQuick.Window 2.11
    import QtQuick.Controls 2.2

    Window {
    visible: true
    width: 440;height: 480
    title: qsTr("Hello World")
    Button{
    text : "Rotate"
    onClicked: {img.rotation++;}
    }

    Rectangle {
        width: 200;height: 200
        border.width: 2;border.color: "blue"
        anchors.centerIn: parent
        Image {
            id : img
            anchors.centerIn: parent
            transformOrigin: Item.TopLeft
            source :    Qt.resolvedUrl("Photo.jpg")
        }
    }
    

    }


Log in to reply
 

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