qml----Model/View入门PathView

Posted Qt王二狗

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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()
            }
        }
    }
}

 

以上是关于qml----Model/View入门PathView的主要内容,如果未能解决你的问题,请参考以下文章

qml----Model/View入门Repeater

qml----Model/View入门PathView

qml----Model/View入门ListView动画效果

qml----Model/View入门ListView分组显示

QML PathView 中的 SetRootIndex

入门设计模式之汇总篇