4

我在装有 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）：

在此处输入图像描述

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

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

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

rotation: PathView.angle

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

在此处输入图像描述

现在旋转轴是正确的，但每个矩形的角度都是恒定的（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
4

2 回答 2

4

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

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

于 2013-08-25T08:19:43.583 回答
0

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

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

PS然而，只能部分解决（QTBUG-28723pathItemCount ），如果动态变化，有时会再次发生。所以需要额外检查PathView.property。undefined

于 2020-11-26T01:54:10.083 回答