Troubleshooting 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'm having trouble setting a variable angle for the Transform: Rotation {} element, for example:

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

where PathView.angle is changed for each image element. I have executed the code here for the stream coverage style container , but this example also does not work.

So the code below produces (see Case 1 in the comments):

What gets the angle of the rectangles of the delegate 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 with respect to the z axis (I need a rotation angle defined with respect to y). Therefore, I would like to approach (Case 2):

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

Case 3 of my code below is what I am trying to work, but it gives an error (once for each image container) because the variable angle does not seem to work with Transform: Rotation {}: (Why?)

 Unable to assign [undefined] to double 

Any suggestions on how to make this work?

Thanks!

The following is the simplest QML code that illustrates what I'm 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 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 accessing the attached properties of a child, you must reference the property through the parent. See the documentation for more information .