Unsolved Using rotation in QML
-
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.
-
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. -
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") } }
}