qml----Model/View入門（八）PathView

　　pathview由model 、delegate、path三部分組成。Path的startX、startY用於描述路徑的起點，而pathElements是個路徑元素的列表，常見的路徑元素有PathLine(直線) athQuad(賽貝爾二次曲線)、 PathCubic(賽貝爾三次曲線)、PathArc(橢圓上的一段弧)、PathCurve、PathSvg等。路徑元素的終點就是整個路徑的終點，終點可以和起點重合，如果重合那就表形成閉環。

　　關於路徑上點的坐標：除卻PathSbvg之外，都有x、y屬性。第一段路徑的起點，就是startX,startY.終點以絕對坐標的形式表示，另外還可以通過relativeX、relativeY以相對起點坐標的形式定義終點坐標，同時也可以用絕對坐標和相對坐標的形式混合表示

　　下面我們來看這幾種常用的路徑元素，元素路徑不可見，但為了使路徑可見，我用canvas畫出來了。
　　（1）PathLine　　

Canvas{
        id: lineCanvas
        width: rootItem.width
        height: rootItem.height

        onPaint: {
            var ctx = getContext("2d")
            ctx.lineWidth = 2
            ctx.strokeStyle = "red"
            ctx.beginPath()
            ctx.moveTo(1, 1)
            ctx.lineTo(width-1, height-1)
            ctx.stroke()
        }

        Rectangle{
            id: lineBall
            width: 32
            height: 32
            radius: 16
            color: "blue"

            PathAnimation{
                id: lineAnim
                target: lineBall
                duration: 3000
                anchorPoint: "16,16"
                easing.type: Easing.Linear
                path: Path{
                    startX: 16
                    startY: 16
                    PathLine{
                        x: width-16
                        y: height-16
                    }
                }
            }

            MouseArea{
                anchors.fill: parent
                onClicked: lineAnim.start()
            }
        }
    }

　　（2）PathQuad(貝塞爾曲線)。常見的貝塞爾曲線有二次方貝塞爾曲線、三次方曲線、四。。。貝塞爾曲線其實就是一條線，再加上幾個控制點，然后再經過一個函數計算得來的。比如二次方貝塞爾曲線，由兩個端點+一個控制點+一個函數生成；三次方貝塞爾曲線是由兩個端點+兩個控制點 +一個函數生成 貝塞爾曲線的起點是用startX.startY表示，用x,y表示終點，用controlX、controlY或者relativeControlX、relativeControlY來表示控制點
　　下面我們來看一個二次方貝塞爾曲線　　

Canvas{ //二次方貝塞爾曲線
        width: rootItem.width
        height: rootItem.height
        //visible: false

        onPaint: {
            var ctx = getContext("2d")
            ctx.lineWidth = 2
            ctx.strokeStyle = "red"
            ctx.beginPath()
            ctx.moveTo(0, 0)//下面的函數畫出二次方的貝塞爾曲線
            ctx.quadraticCurveTo(0, height-1, width-1, height-1)
            ctx.stroke()
        }

        Text {
            anchors.centerIn: parent
            font.pixelSize: 20
            text: "quadratic Bezier curve"
        }
    }//二次方貝塞爾曲線 is end

　　（3）PathCubic，它有兩個控制點。直接上代碼，在下面的代碼中添加了動畫處理　　

Canvas{ //三次方貝塞爾曲線
        id: root
        width: rootItem.width
        height: rootItem.height
        //visible: false

        onPaint: {
            var ctx = getContext("2d")
            ctx.lineWidth = 2
            ctx.strokeStyle = "red"
            ctx.beginPath()
            ctx.moveTo(16,16)//下面的函數畫出三次方的貝塞爾曲線
            ctx.bezierCurveTo(0, height-1 ,width-1, height/2, width-16, height-16);
            ctx.stroke()
        }

        Text{
            anchors.centerIn: parent
            font.pixelSize: 20
            text: "cubic Bezier curve"
        }

        Rectangle{
            id: ball
            width: 32
            height: 32
            radius: 16
            color: "blue"

            PathAnimation{
                id: pathAnim
                target: ball
                duration: 3000
                anchorPoint: "16, 16"
                easing.type: Easing.InCubic
                path: Path{
                    startX: 16
                    startY: 16
                    PathCubic{//這是三次方貝塞爾曲線
                        x: root.width -16
                        y: root.height-16
                        control1X: 0
                        control1Y: height-1
                        control2X: width-1
                        control2Y: height/2
                    }

//                    PathArc{//這是橢圓弧
//                        x: width /2
//                        y: height /2
//                        radiusX: 100
//                        radiusY: 100
//                        direction: PathArc.Clockwise
//                        useLargeArc: true
//                    }
                }
            }

            MouseArea{
                id: mouseArea
                anchors.fill: parent
                onClicked: pathAnim.start()
            }
        }
    }//三次方貝塞爾曲線 is end

　　

　（4）PathArc它定義一段橢圓上的一段圓弧，其中起點和終點都一樣，另外，橢圓上的兩個半軸分別由radiusX、radiusY定義。direction控制圓弧的方向，默認值是PathArc,Clockwise（順時針），另外還有一個比較使用的屬性就是useLargeArc。因為即便是定義了各種屬性條件，但是仍有兩條弧滿足條件-大、小圓弧。那么就可以通過useLargeArc來確定使用大弧還是小弧
　　直接上弧的代碼　　

Path{
    startX: 100
    startY: 100
    PathArc{
        x: 100
        y: 100
        radiusX: 100
        radiusY: 100
        direction: PathArc.Clockwise
    }
}

　　(5)PathCurve,定義一條Catmull-room曲線。上代碼，用canvas畫出來的
　　

Canvas{
        width: rootItem.width
        height: rootItem.height
        contextType: "2d"
        visible: false

        Path{
            id: myPath
            startX: 4
            startY: 100

            PathCurve{x:75; y: 75}
            PathCurve{x:200; y: 150}
            PathCurve{x: 325; y: 25}
            PathCurve{x: 294; y: 100}
        }

        onPaint: {
            context.strokeStyle = Qt.rgba(.4, .6 ,.8)
            context.path = myPath
            context.stroke()
            context.sttrokeStyle = "green"
            context.fillRect(2, 98, 4, 4)
            context.fillRect(73, 73, 4, 4)
            context.fillRect(198, 148, 4, 4)
            context.fillRect(323, 23, 4, 4)
            context.fillRect(392, 98, 4, 4)
        }
    }//room is end

　　還有其它屬性介紹--------------　　

　　PathPercent，放在組成路徑的元素的后面，比如PathArc后面，指明它前面那部分路徑所放置的Item數量占整個路徑上所有Item數量的比率。需要注意的是在一個Path中使用PathPercent，PathPercent元素的value值是遞增的，某一段路徑如果在兩個PathPercent之間，那么這段路徑上面放置的Item數量占路徑上總Item數量的比率，是它后面PathPercent與它前面PathPercent的value的差

　　還有一個pathView，這個負責的有點多，好不知道怎么用，但下面的范例有點意思，留着以后用吧

　　

import QtQuick 2.2

Rectangle {
    id: root
    width: 480
    height: 320
    color: "black"

    Component{
        id: rectDelegate

        Item{
            id: wrapper
            z: PathView.zOrder
            opacity: PathView.itemAlpha
            scale: PathView.itemScale
            Rectangle{
                width: 100
                height: 60
                color: Qt.rgba(Math.random(), Math.random(), Math.random(), 1)
                border.width: 2
                border.color: wrapper.PathView.isCurrentItem ? "red" : "lightgray"
                Text{
                    anchors.centerIn: parent
                    font.pixelSize: 28
                    text: index
                    color: Qt.lighter(parent.color, 2)
                }
            }
        }
    }//rectDelegate is end

    PathView{
        id: pathView
        anchors.fill: parent
        interactive: true
        pathItemCount: 7
        preferredHighlightBegin: 0.5
        preferredHighlightEnd: 0.5
        highlightRangeMode: PathView.StrictlyEnforceRange

        delegate: rectDelegate
        model: 15
        focus: true
        Keys.onLeftPressed: decrementCurrentIndex()
        Keys.onRightPressed: incrementCurrentIndex()

        path:Path{
            startX: 10
            startY: 100
            PathAttribute{name: "zOrder"; value: 0;}
            PathAttribute{name: "itemAlpha"; value: 0.1;}
            PathAttribute{name: "itemScale"; value: 0.6}
            PathLine{
                x: root.width/2 - 40
                y: 100
            }

            PathAttribute{name: "zOrder"; value: 10;}
            PathAttribute{name: "itemAlpha"; value: 0.8;}
            PathAttribute{name: "itemScale"; value: 1.2}
            PathLine{
                x: root.width/2 - 60
                y: 0
            }

            PathAttribute{name: "zOrder"; value: 0;}
            PathAttribute{name: "itemAlpha"; value: 0.1;}
            PathAttribute{name: "itemScale"; value: 0.6}
        }

      MouseArea{
            anchors.fill: parent
            onWheel: {                
                if(wheel.angleDelta.y > 0)
                    pathView.decrementCurrentIndex()
                else
                    pathView.incrementCurrentIndex()
            }
        }
    }
}