MVD（五-路径视图PathView）

• PathView创建了一个可以让子项沿着任意路径移动的视图
• 沿着相同的路径，使用缩放（scale），透明（opacity）等元素可以更加详细的控制过程
• 当使用PathView时，你必须定义一个代理和一个路径。在这些之上，PathView本身也可以自定义一些属性的区间
• 通常会使用pathItemCount属性，它控制了一次可见的子项总数
• preferredHighLightBegin属性控制了高亮区间
• preferredHighlightEnd与highlightRangeMode控制了当前项怎样沿着路径显示
• path属性使用一个path元素来定义PathView内代理的滚动路径
• path属性使用startx与starty属性来链接path元素，例如PathLine,PathQuad和PathCubic。这些元素都使用二维数组来构造路径
• 当 path 定义好之后，可以使用PathPercent和PathAttribute元素来进一步设置，它们被放置在path元素之间，并且为经过它们的路径和代理提供更加细致的控制
• PathPercent提供了如何控制每个元素之间覆盖区域部分的路径，然后反过来控制分布在这条路径上的代理元素，它们被按比例的分布播放
• preferredHightlightBegin与preferredHighlightEnd属性由PathView输入到图片元素中。它们的值在0~1之间。结束值大于等于开始值。例如设置这些属性值为0.5，当前项只会显示当前百分之50的图像在这个路径上
• 在Path中，PathAttribute元素也是被放置在元素之间的，就像PathPercent元素。它们可以让你指定属性的值然后插入到路径中去。这些属性与代理绑定可以用来控制任意的属性。

例子：

例子说明：

• 路径由PathLine元素组成
• 使用PathPercent元素，它确保了中间的元素居中，并且给其它的元素提供了足够的空间
• 使用PathAttribute元素来控制旋转，大小和深度值（z-value）。
• 的pathItemCount属 性。它控制了路径的浓密度
• 使用 preferredHighlightBegin与preferredHighlightEnd来控制可见的代理项
• 通常对于PathView.onPath这个属性都绑定为可见，这样允许 PathView 缓冲不可见的元素

import QtQuick 2.5
import QtQuick.Window 2.0

Window{
    width: 800
    height: 600
    visible: true
    title: "hello world!"

    Item {
        id: root
        anchors.fill: parent

        Rectangle {
            anchors.fill: parent
            gradient: Gradient {
                GradientStop { position: 0.0; color: "#f6f6f6" }
                GradientStop { position: 1.0; color: "#d7d7d7" }
            }

            PathView {
                anchors.fill: parent

                delegate: flipCardDelegate
                model: 100

                path: Path {
                    // 定义开始路径
                    startX: root.width
                    startY: 0

                    // 窗口层次值
                    PathAttribute { name: "itemZ"; value: 0 }
                    // 控制角度
                    PathAttribute { name: "itemAngle"; value: -90.0; }
                    // 控制缩放
                    PathAttribute { name: "itemScale"; value: 1; }

                    // 定义路径
                    PathLine { x: root.width*0.4; y: root.height*0.4; }
                    PathPercent { value: 0.48; }
                    PathLine { x: root.width*0.4; y: root.height*0.5; }

                    PathAttribute { name: "itemAngle"; value: 0.0; }
                    PathAttribute { name: "itemScale"; value: 1.0; }
                    PathAttribute { name: "itemZ"; value: 100 }

                    PathLine { x: root.width/2; y: root.height*0.6; }
                    PathPercent { value: 0.52; }
                    PathLine { x: root.width; y: root.height; }

                    PathAttribute { name: "itemAngle"; value: 90.0; }
                    PathAttribute { name: "itemScale"; value: 0.5; }
                    PathAttribute { name: "itemZ"; value: 0 }
                }

                // 一次可见的 item 总数
                pathItemCount: 16

                // 控制高亮区间
                preferredHighlightBegin: 0.5

                // 控制当前项怎样沿着路径显示
                preferredHighlightEnd: 0.5
            }

            Component {
                id: flipCardDelegate

                Rectangle {
                    id: wrapper

                    width: 284
                    height: 164
                    antialiasing: true

                    gradient: Gradient {
                        GradientStop { position: 0.0; color: "#2ed5fa" }
                        GradientStop { position: 1.0; color: "#2467ec" }
                    }

                    // 允许 PathView 缓冲不可见的元素
                    visible: PathView.onPath

                    // 缩放
                    scale: PathView.itemScale
                    // z 序
                    z: PathView.itemZ
                    // 视角
                    property variant rotX: PathView.itemAngle

                    transform: Rotation {
                        axis { x: 1; y: 0; z: 0 }
                        angle: wrapper.rotX;
                        origin { x: 5; y: 5; }
                    }

                    Image {
                        anchors.fill: parent
//                        fillMode: Image.PreserveAspectFit
                        source: "qrc:/new/preImg/images/" + (index%7 + 1) + ".jpg"
                    }
//                    Text {
//                        anchors.fill: parent
//                        text: index
//                    }
                }
            }
        }
    }
}