QmlBook in chinese 编程之十三 ---（ 路径视图（The PathView））

路径视图（The PathView）

       路径视图（PathView） 非常强大，但也非常复杂，这个视图由QtQuick提供。它创建了一个可以让子项沿着任意路径移动的视图。沿着相同的路径，使用缩放（scale） ，透明（opacity） 等元素可以更加详细的控制过程。
       当使用路径视图（PathView） 时，你必须定义一个代理和一个路径。在这些之上，路径视图（PathView） 本身也可以自定义一些属性的区间。通常会使用pathItemCount属性，它控制了一次可见的子项总数。preferredHighLightBegin属性控制了高亮区间，preferredHighlightEnd与highlightRangeMode，控制了当前项怎样沿着路径显示。

     在关注高亮区间之前，我们必须先看看路径（path） 这个属性。路径（path） 属性使用一个路径（path） 元素来定义路径视图（PathView） 内代理的滚动路径。路径使用startx与starty属性来链接路径（path） 元素，例如PathLine,PathQuad和PathCubic。这些元素都使用二维数组来构造路径。

     当路径定义好之后，可以使用PathPercent和PathAttribute元素来进一步设置。它们被放置在路径元素之间，并且为经过它们的路径和代理提供更加细致的控制。PathPercent提供了如何控制每个元素之间覆盖区域部分的路径，然后反过来控制分布在这条路径上的代理元素，它们被按比例的分布播放。
     preferredHightlightBegin与preferredHighlightEnd属性由PathView（路径视图） 输入到图片元素中。它们的值在0~1之间。结束值大于等于开始值。例如设置这些属性值为0.5，当前项只会显示当前百分之50的图像在这个路径上。
    在Path中，PathAttribute元素也是被放置在元素之间的，就像PathPercent元素。它们可以让你指定属性的值然后插入的路径中去。这些属性与代理绑定可以用来控制任意的属性。 

import QtQuick 2.0

import "../common"
Background {
    id:root
    width: 100
    height: 300
    //new view
    PathView{
        anchors.fill: parent

        delegate: flipCardDelegate
        model: 100

        path: Path{
            startX: root.width/2
            startY: 0

            PathAttribute { name: "itemZ"; value: 0 }
            PathAttribute { name: "itemAngle"; value: -90.0; }
            PathAttribute { name: "itemScale"; value: 0.5; }
            PathLine { x: root.width/2; y: root.height*0.4; }
            PathPercent { value: 0.48; }
            PathLine { x: root.width/2; 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/2; y: root.height; }
            PathAttribute { name: "itemAngle"; value: 90.0; }
            PathAttribute { name: "itemScale"; value: 0.5; }
            PathAttribute { name: "itemZ"; value: 0 }

        }

         pathItemCount: 16
         preferredHighlightBegin: 0.5
         preferredHighlightEnd: 0.5
    }


    //代理部分
    Component{
        id: flipCardDelegate

        BlueBox{
              id: wrapper
              width: 64
              height: 64
              antialiasing: true  //反锯齿

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

               visible: PathView.onPath
               scale: PathView.itemScale
               z: PathView.itemZ


               property variant rotX: PathView.itemAngle
               transform: Rotation {
                   axis { x: 1; y: 0; z: 0 }
                   angle: wrapper.rotX;
                   origin { x: 32; y: 32; }
               }
               text: index
        }
    }
}

 本例子为qml book书中的例子，根据对应动画来写，记录数据。