Using rotation in QML

ODБOï

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

}