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 '=' }
-
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.
-
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. -
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. -
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.
-
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.2Window {
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") } }
}