Setting a variable angle for the Transform: Rotation {} element?

bruce3141

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 of my model. I followed the "code here for a cover-flow style container":http://developer.nokia.com/Community/Wiki/Building_a_CoverFlow_component_with_QML but that example doesn't work either(!) - at least in terms of setting the rectangle angles correctly.

To help troubleshoot this issue, I have put together a simple QML code to illustrate the issue. See Case 3 in the comments, that is the case I would like to get to work except that this case gives an error (once for each image container):

Unable to assign [undefined] to double

because a variable angle doesn't seem to work with Transform: Rotation {}: Why?

Cases 1 & 2 are just test cases to help explore the issue, these work but are not what I want.

Note that Case 1 would be fine except that the rotation axis is about z (that must be the default) but what I really want is the rotation axis to be defined about y. That is what brings me to using the Transform: Rotation {} element (to change the rotation axis).

Any help or comments appreciated! Thanks.

Code:

@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@