标签：qml qt quick pathview path canvas
开始的开始，请给我的决赛博文投票：点此进入投票页面，网页最下方有投票按钮，投我一票，谢谢。
PathView ，顾名思义，沿着特定的路径显示 Model 内的数据。 Model 可以是 QML 内建的 ListModel 、 XmlListModel ，也可以是在 C++ 中实现的 QAbstractListModel 的派生类。
PathView 恐怕是 Qt Quick 提供的 Model-View 类库中最复杂也最灵活的一个了。
要使用一个 PathView ，至少需要设置 model 、 delegate 、 path 三个属性。model 、 delegate 如果你学习过 ListView 肯定已经接触过，这里不再细说。 path 是 PathView 的专有特性，它指定 PathView 用来放置 item 的路径。要使用 PathView ，先要了解 Path 。
版权所有 foruok ，如需转载请注明出处：作者 foruok ，博客 http://blog.csdn.net/foruok 。
西安是十三朝古都，虽然尿骚味很重，还是值得一游。于是你从杭州的武陵广场出发，准备去看兵马俑。先打的去萧山机场，步行进入航站楼，过安检，坐飞机到咸阳机场，出站，乘机场大巴到火车站，然后坐游 5 公交到兵马俑……在这个过程中，换乘的中间点很多，相邻两个中间点之间的，就是路径段；多个路径段最终形成了从杭州武陵广场到西安临潼兵马俑之间的路径；武陵广场是起点，兵马俑是终点。
在 Qt 中 Path 就是直译为路径，一个路径是由多个路径元素组成的，从起点开始，首尾衔接，抵达终点。
Path 的属性 startX 、 startY 描述路径起点。 pathElements 属性是个列表，是默认属性，它保存组成路径的多个路径元素，常见的路径元素有 PathLine 、 PathQuad 、 PathCubic 、 PathArc 、 PathCurve 、 PathSvg 。路径上最后一个路径元素的终点就是整个路径的终点，如果终点与起点重合，那么 Path 的 closed 属性就为 true 。
路径元素除 PathSvg 外，都有 x 、 y 属性，以绝对坐标的形式指定本段路径的终点；而起点呢，就是前一个路径段的终点；第一个路径段的起点，就是 Path 的 startX 、 startY 所描述的整个路径的起点。另外还有 relativeX 、 relativeY 两个属性，以相对于起点的相对坐标的形式来指定终点。你还可以混合使用绝对坐标与相对坐标，比如使用 x 和 relativeY 来决定路径段的终点。
Path {
startX: 0;
startY: 0;
PathLine {
x: root.width - 1;
y: root.height - 1;
}
} Path {
startX: 0;
startY: 0;
PathQuad {
x: root.width - 1;
y: root.height - 1;
controlX: 0;
controlY: root.height - 1;
}
}import QtQuick 2.0
import QtQuick.Controls 1.1
Canvas {
width: 320;
height: 240;
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";
}
}
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 {
relativeX: root.width/2 - 60;
relativeY: 0;
}
PathAttribute { name: "zOrder"; value: 0 }
PathAttribute { name: "itemAlpha"; value: 0.1 }
PathAttribute { name: "itemScale"; value: 0.6 }
} Path {
startX: 10;
startY: 100;
PathLine {
x: root.width/2 - 40;
y: 100;
}
PathPercent { value: 0.28; }
PathLine {
relativeX: root.width/2 - 60;
relativeY: 0;
}
}import QtQuick 2.0
import QtQuick.Controls 1.1
Rectangle {
width: 480;
height: 300;
color: "black";
id: root;
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);
}
}
}
}
PathView {
id: pathView;
anchors.fill: parent;
interactive: true;
pathItemCount: 7;
preferredHighlightBegin: 0.5;
preferredHighlightEnd: 0.5;
highlightRangeMode: PathView.StrictlyEnforceRange;
delegate: rectDelegate;
model: 15;
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 {
relativeX: root.width/2 - 60;
relativeY: 0;
}
PathAttribute { name: "zOrder"; value: 0 }
PathAttribute { name: "itemAlpha"; value: 0.1 }
PathAttribute { name: "itemScale"; value: 0.6 }
}
focus: true;
Keys.onLeftPressed: decrementCurrentIndex();
Keys.onRightPressed: incrementCurrentIndex();
}
}
标签：qml qt quick pathview path canvas
原文地址：http://blog.csdn.net/foruok/article/details/38060495
