Solved How to make front and backface of rectangle different
-
Hello,
I am learning with qml by making apps obviously, so I thought I'd make "Pick a pair" game. I'd like to use Rectangles as cards and whenever user will click on one it will rotate around X axis (so like fake 3D) and on the other side will be image, or text or whatever to distinguish it from other cards. I know there is possibility of the rotation, but is there some way how to set the "back" side of the rectangle to be different than front? Or do I have to change it while it is perpedicular to the screen when I can see only edge?
Thanks
-
@ligazetom
use 2 rectangles and make only one visible at the time (depending on the rotation angle) -
A small example of what @raven-worx said:
import QtQuick 2.9 import QtQuick.Window 2.2 import QtQuick.Controls 2.2 Window { visible: true width: 200 height: 200 property bool redTop: false onRedTopChanged: { aniRedTangle.start() aniBlueTangle.start() } Button{ id: btnSwitch anchors.left: parent.left anchors.right: parent.right onClicked: redTop = !redTop } NumberAnimation{ id:aniRedTangle target: redTangle property: "width" to: redTop ? 50 : 0 } NumberAnimation{ id:aniBlueTangle target: blueTangle property: "width" to: redTop ? 0 : 50 } Rectangle{ id: redTangle color: "red" y: parent.height-height height: 100 width: 50 anchors.horizontalCenter: parent.horizontalCenter } Rectangle{ id: blueTangle color: "blue" y: parent.height-height height: 100 width: 0 anchors.horizontalCenter: parent.horizontalCenter } }
-
This post is deleted! -
@J.Hilk Yes thank you, I got the idea but since I would like to use images I cannot really change width, I can just switch IsVisible bool I guess, but what is the problem now is how do I implement the 3D rotation to animation.
It seems I cannot make state using Rotation type. I did something like this.
CardForm {
id: cardstates: State{
name: "turned"; when: mouseArea.pressed === true
PropertyChanges {
target: frontRect
transform: Rotation {
origin.x: frontRect.Center
origin.y: frontRect.Center
axis { x: 0; y: 1; z: 0}
angle: 180
}
}
PropertyChanges {
target: backRect
transform: Rotation {
origin.x: backRect.Center
origin.y: backRect.Center
axis { x: 0; y: 1; z: 0}
angle: 180
}}
}
transitions: Transition{
from: ""; to: "turned"; reversible: false
SequentialAnimation{
NumberAnimation{
properties: "rotation"
duration: 400
easing.type: Easing.InOutQuad
}
}
} -
Nevermind
Flipable does exactly what I want