Using rotation in QML

[gabor53]

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.

[ODБOï]

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 '='

                            }

[dheerendra]

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.

[gabor53]

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.

[dheerendra]

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"}
}

[gabor53]

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.

[dheerendra]

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

[gabor53]

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.

[dheerendra]

Try to set the transformOrigin. It should help you.

[gabor53]

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.

[dheerendra]

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")
    }
}

}