Question

我在运行OS-X 10.8.4的Mac上运行Qt 5.1和QtQuick 2.0。

我无法为Transform：Rotation {}元素设置可变角度，如下所示：

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

其中PathView.angle因每个图像元素而异。我遵循了代码here for a cover-flow style container，但该示例也不起作用。

总之，底部的代码产生（参见评论中的案例1）：

enter image description here

使用变量PathAttribute角度获取委托矩形的角度：

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

然后使用以下方法设置角度：

rotation: PathView.angle

但这不是我想要的，因为旋转轴是围绕z轴定义的（我需要围绕y定义旋转角度）。所以我想更接近（案例2）：

enter image description here

现在旋转轴是正确的，但每个矩形的角度都是常数（60度，如代码中所定义）。

下面我的代码的案例3是我想要开始工作的但是这给出了一个错误（每个图像容器一次）因为变量角度似乎不适用于Transform：Rotation {} :(为什么？）

Unable to assign [undefined] to double

有关如何使这项工作的任何建议？

谢谢！

下面是最简单的QML代码，说明了我要做的事情：

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

试试这个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
            }
        }
    }
}

当引用子对象的附加属性时，您必须通过父对象引用该属性。有关详细信息，请参阅documentation。

Answer 2

解决了这里提到的问题：https://habr.com/ru/post/190090/-分配给根委托项目属性：

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

PS ，但是只能部分解决（QTBUG-28723），如果pathItemCount动态变化，有时会再次发生。因此，需要针对PathView.property再次检查undefined。

故障设置Qt-QML CoverFlow旋转角度

2 个答案: