Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

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


  • Moderators

    @ligazetom
    use 2 rectangles and make only one visible at the time (depending on the rotation angle)


  • Moderators

    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: card

    states: 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


Log in to reply