QML PathView之 PathQuad

qml中PathView元素自带一个很有意思的例子，效果如图：

其中Path段代码如下：

            path: Path {
                startX: 120;
                startY: 100
                PathQuad {
                    x: 120;
                    y: 25;
                    controlX: 260;//控制点由 controlX 、 controlY或 relativeControlX 、 relativeControlY 来定义
                    controlY: 75
                }

                PathQuad {
                    x: 120;
                    y: 100;
                    controlX: -20;
                    controlY: 75
                }
            }

对于Path中的PathQuad感觉到很抽象，于是百度了下js  canvas quadraticCurveTo() 方法，找到如下解释：

quadraticCurveTo() 方法通过使用表示二次贝塞尔曲线的指定控制点，向当前路径添加一个点。

提示：二次贝塞尔曲线需要两个点。第一个点是用于二次贝塞尔计算中的控制点，第二个点是曲线的结束点。曲线的开始点是当前路径中最后一个点。如果路径不存在，那么请使用 beginPath() 和 moveTo() 方法来定义开始点。

• 开始点：moveTo(20,20)
• 控制点：quadraticCurveTo(20,100,200,20)
• 结束点：quadraticCurveTo(20,100,200,20)

通过该示例图，一下就能看明白 PathQuad的意义，但是PathQuad虽然定义了路径，但是是不可见的，于是使用quadraticCurveTo画出路径：

 至此，对PathQuad有一个直观的认识。

使用 PathAttribute 

效果如下：

PathAttribute 官方说明：

The PathAttribute object allows attributes consisting of a name and a value to be specified for various points along a path. The attributes are exposed to the delegate as Attached Properties. The value of an attribute at any particular point along the path is interpolated from the PathAttributes bounding that point.

The example below shows a path with the items scaled to 30% with opacity 50% at the top of the path and scaled 100% with opacity 100% at the bottom. Note the use of the PathView.iconScale and PathView.iconOpacity attached properties to set the scale and opacity of the delegate.

下面摘抄一段 安晓辉老师写的《Qt Quick 核心编程》里面的一段介绍，能更好的让我们理解：

这本书我不但有纸质的还有电子的，第一次看是2018年了，当时还做了笔记，但是看的也是似懂非懂，今日再看，果然又是另一种韵味。