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() } } } }
