Trouble setting Qt- QML CoverFlow rotation angle

Question

I am running Qt 5.1 and QtQuick 2.0 on a Mac with OS-X 10.8.4.

I am having trouble setting a variable angle for the Transform: Rotation {} element, like this:

transform: Rotation {
   axis { x: 0; y: 1; z: 0 }
   angle: PathView.angle
}

where PathView.angle varies for each image element. I followed the code here for a cover-flow style container, but that example doesn't work either.

In summary, the code at the bottom produces (see Case 1 in the comments):

Which gets the angle of the delegate rectangles using the variable PathAttribute angle:

PathAttribute { name: "angle"; value: somevalue }

and then the angle is set using:

rotation: PathView.angle

But this is not what I want because the rotation axis is defined about the z-axis, (I need the rotation angle to be defined about y). So I would like something closer to (Case 2):

Now the rotation axis is correct but the angles for each rectangle are all constant (60 deg, as defined in the code).

Case 3 of my code below is what I am trying to get to work but this gives an error (once for each image container) because a variable angle doesn't seem to work with Transform: Rotation {}: (Why?)

Unable to assign [undefined] to double

Any suggestions on how to make this work?

Thanks!

Below is the simplest QML code that illustrates what I am trying to do:

import QtQuick 2.0

Rectangle {
    id: mainRect
    width: 1024; height: 300

    // Flow View:
    Rectangle {
        width: parent.width; height: parent.height
        color: "gray"

        PathView {
            id: myPV
            delegate: pathdelegate
            anchors.fill: parent
            model: 11 // provide a range of indices

            Keys.onLeftPressed: if (!moving && interactive) incrementCurrentIndex()
            Keys.onRightPressed: if (!moving && interactive) decrementCurrentIndex()

            preferredHighlightBegin: 0.5
            preferredHighlightEnd: 0.5
            focus: true
            interactive: true

            path: Path {
                id: pathElement
                startX: 0; startY: myPV.height / 2
                PathAttribute { name: "z"; value: 0 }
                PathAttribute { name: "angle"; value: 60 }
                PathAttribute { name: "scale"; value: 0.5 }
                PathLine { x: myPV.width / 2; y: myPV.height / 2;  }
                PathAttribute { name: "z"; value: 100 }
                PathAttribute { name: "angle"; value: 0 }
                PathAttribute { name: "scale"; value: 1.0 }
                PathLine { x: myPV.width; y: myPV.height / 2; }
                PathAttribute { name: "z"; value: 0 }
                PathAttribute { name: "angle"; value: -60 }
                PathAttribute { name: "scale"; value: 0.5 }
            }
        }

        // Delegate Component:
        Component {
            id: pathdelegate
            Rectangle {
                id: rect
                width: 256; height: 256
                z: PathView.z
                scale: PathView.scale
                color: "black"
                border.color: "white"
                border.width: 3

                // Case 1: This works:
                rotation: PathView.angle

                 //Case 2: This works:
                 //transform: Rotation {
                 //   axis { x: 0; y: 1; z: 0 }
                 //   angle: 60
                 //}

                // Case 3: This is the case that I need to work:
                // This DOES NOT work:
                // transform: Rotation {
                //    axis { x: 0; y: 1; z: 0 }
                //    angle: PathView.angle
                //}
            }

        } // End: Delegate Component

    } // End: Flow View:

} // End: mainRect

Answer 1

Try this http://habrahabr.ru/post/190090/

import QtQuick 2.0

Rectangle {
    property int itemAngle: 60
    property int itemSize: 300

    width: 1200
    height: 400

    ListModel {
        id: dataModel

        ListElement {
            color: "orange"
            text: "first"
        }
        ListElement {
            color: "lightgreen"
            text: "second"
        }
        ListElement {
            color: "orchid"
            text: "third"
        }
        ListElement {
            color: "tomato"
            text: "fourth"
        }
        ListElement {
            color: "skyblue"
            text: "fifth"
        }
        ListElement {
            color: "hotpink"
            text: "sixth"
        }
        ListElement {
            color: "darkseagreen"
            text: "seventh"
        }
    }

    PathView {
        id: view

        anchors.fill: parent
        model: dataModel
        pathItemCount: 6

        path: Path {
            startX: 0
            startY: height / 2

            PathPercent { value: 0.0 }
            PathAttribute { name: "z"; value: 0 }
            PathAttribute { name: "angle"; value: itemAngle }
            PathAttribute { name: "origin"; value: 0 }
            PathLine {
                x: (view.width - itemSize) / 2
                y: view.height / 2
            }
            PathAttribute { name: "angle"; value: itemAngle }
            PathAttribute { name: "origin"; value: 0 }
            PathPercent { value: 0.49 }
            PathAttribute { name: "z"; value: 10 }


            PathLine { relativeX: 0; relativeY: 0 }

            PathAttribute { name: "angle"; value: 0 }
            PathLine {
                x: (view.width - itemSize) / 2 + itemSize
                y: view.height / 2
            }
            PathAttribute { name: "angle"; value: 0 }
            PathPercent { value: 0.51 }

            PathLine { relativeX: 0; relativeY: 0 }

            PathAttribute { name: "z"; value: 10 }
            PathAttribute { name: "angle"; value: -itemAngle }
            PathAttribute { name: "origin"; value: itemSize }
            PathLine {
                x: view.width
                y: view.height / 2
            }
            PathPercent { value: 1 }
            PathAttribute { name: "z"; value: 0 }
            PathAttribute { name: "angle"; value: -itemAngle }
            PathAttribute { name: "origin"; value: itemSize }
        }
        delegate: Rectangle {
            id: rectDelegate
            width: itemSize
            height: width
            z: PathView.z
            color: model.color
            border {
                color: "black"
                width: 1
            }
            transform: Rotation {
                axis { x: 0; y: 1; z: 0 }
                angle: rectDelegate.PathView.angle
                origin.x: rectDelegate.PathView.origin
            }

            Text {
                anchors.centerIn: parent
                font.pointSize: 32
                text: model.text
            }
        }
    }
}

When referring to attached properties from a child object, you have to refer to the property through the parent. For more information, see the documentation.

Answer 2

Solved like mentioned here: https://habr.com/ru/post/190090/ - assigning to root delegate item property:

    delegate: Rectangle {
        property real rotationAngle: PathView.angle
        property real rotationOrigin: PathView.origin
        ...
    }

P.S. However solves only partially (QTBUG-28723) and sometimes happen again if pathItemCount dynamically changes. So need additioanlly check PathView.property against undefined.