Qt Quick 之 PathView 详解

    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 。

Path

    西安是十三朝古都，虽然尿骚味很重，还是值得一游。于是你从杭州的武陵广场出发，准备去看兵马俑。先打的去萧山机场，步行进入航站楼，过安检，坐飞机到咸阳机场，出站，乘机场大巴到火车站，然后坐游 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 来决定路径段的终点。

PathLine

    PathLine 是最简单的路径元素，在 Path 的起点或者上一段路径的终点，与本元素定义的终点之间绘制一条直线。

    一个最简的路径示例：

    Path {
        startX: 0;
        startY: 0;
        PathLine {
            x: root.width - 1;
            y: root.height - 1;
        }
    }

    上面的路径，是一条从界面左上角到右下角的直线。

PathQuad

    贝塞尔曲线( Bézier curve )，又称贝兹曲线或贝济埃曲线，是应用于二维图形应用程序的数学曲线。

    贝塞尔曲线于 1962 年，由法国工程师皮埃尔·贝塞尔（ Pierre Bézier ）所广泛发表，他运用贝塞尔曲线来为汽车的主体进行设计。贝塞尔曲线最初由 Paul de Casteljau 于 1959 年运用 de Casteljau 算法开发，以稳定数值的方法求出贝塞尔曲线。

    常见的贝塞尔曲线有线性贝塞尔曲线、二次方贝塞尔曲线、三次方贝塞尔曲线，当然也有四阶、五阶甚至更高阶的贝塞尔曲线。线性贝塞尔曲线其实只是两点之间的直线。二次方贝塞尔曲线，由两个端点和一个控制点以及一个函数来生成。三次方贝塞尔曲线，由两个端点和两个控制点以及一个函数来生成。
    在 Qt Quick 的 Path 主题中，提供了基于二次方贝塞尔曲线和三次方贝塞尔曲线的路径元素。
    在我们使用 Canvas 进行 2D 绘图时， Context2D 对象的 quadraticCurveTo(real cpx, real cpy, real x, real y) 方法可以在路径中添加一条二次方贝塞尔曲线， bezierCurveTo(real cp1x, real cp1y, real cp2x, real cp2y, real x, real y) 方法用来在路径中添加一条三次方贝塞尔曲线。
    PathQuad 元素定义一条二次贝塞尔曲线作为路径段。它的起点为上一个路径元素的终点（或者路径的起点），终点由 x 、 y 或 relativeX 、 relativeY 定义，控制点由 controlX 、 controlY 或 relativeControlX 、 relativeControlY 来定义。
    一个简单的二次方贝塞尔路径定义：

    Path {
        startX: 0;
        startY: 0;
        PathQuad {
            x: root.width - 1;
            y: root.height - 1;
            controlX: 0;
            controlY: root.height - 1;
        }
    }

    在 Qt Quick 中， Path 虽然描述了一条路径，但它是不可见的，不够形象化。这里我们通过使用 Canvas 来绘制同样的曲线，以求大家看了可以有个直观的印象。上面的路径定义，对应 qml 代码：

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