QML类型：PathCurve、PathAttribute、PathPercent

PathCurve

一、描述

PathCurve 提供了一种简单的方法来指定直接通过一组点的曲线。

import QtQuick 2.14
import QtQuick.Window 2.2

Window
{
    id:win
    visible: true
    width: 800
    height: 600

    Rectangle
    {
        id: window
        anchors.fill: parent

        Canvas
        {
            id: canvas
            anchors.fill: parent
            smooth: true

            onPaint:
            {
                var context = canvas.getContext("2d")
                context.clearRect(0, 0, width, height)
                context.strokeStyle = "blue"
                context.path = path
                context.stroke()
            }
        }

        Path
        {
            id:path
            startX: 0; startY: 100

            PathCurve { x: 75; y: 75 }
            PathCurve { x: 200; y: 150 }
            PathCurve { x: 325; y: 25 }
            PathCurve { x: 400; y: 100 }
        }
    }
}

二、属性成员

见：

QML类型：Path、PathLine、PathPolyline、PathMultiline、PathQuad、PathCubic

QML类型：PathArc、PathAngleArc​​​​​​

---

PathAttribute

一、描述

PathAttribute 对象允许为路径上的各个点指定由名称和值组成的属性。属性作为附加属性公开给委托。

下面的示例显示了一条路径，其中项目缩放到 30%，在路径顶部不透明度为 50%，在底部缩放为 100%，不透明度为 100%。 请注意使用 PathView.iconScale 和 PathView.iconOpacity 附加属性来设置委托的比例和不透明度。

import QtQuick 2.12
import QtQuick.Window 2.12
import Qt.labs.qmlmodels 1.0

Window
{
    width: 400;height: 400
    visible: true

    Rectangle
    {
        anchors.fill: parent

        Component
        {
            id: delegate
            Item
            {
                width: 80; height: 80
                scale: PathView.iconScale
                opacity: PathView.iconOpacity
                Column
                {
                    Image { anchors.horizontalCenter: nameText.horizontalCenter; width: 64; height: 64; source: icon }
                    Text { id: nameText; text: name; font.pointSize: 16 }
                }
            }
        }

        PathView
        {
            anchors.fill: parent
            model: ListModel
            {
                ListElement
                {
                    name: "张三"
                    icon: "qrc:/www.jpg"
                }
                ListElement
                {
                    name: "李四"
                    icon: "qrc:/www.jpg"
                }
                ListElement
                {
                    name: "王五"
                    icon: "qrc:/www.jpg"
                }
            }
            delegate: delegate
            path: Path
            {
                startX: 120; startY: 100
                PathAttribute { name: "iconScale"; value: 1.0 }
                PathAttribute { name: "iconOpacity"; value: 1.0 }
                PathQuad { x: 120; y: 25; controlX: 260; controlY: 75 }
                PathAttribute { name: "iconScale"; value: 0.3 }
                PathAttribute { name: "iconOpacity"; value: 0.5 }
                PathQuad { x: 120; y: 100; controlX: -20; controlY: 75 }
            }
        }
    }
}

二、属性成员

1、name : string

要更改的属性的名称。此属性将作为 PathView. 提供给委托。

请注意，允许使用现有的 Item 属性名称（例如“opacity”）作为属性。这是因为路径属性添加了一个新的附加属性，它与现有属性没有任何冲突。

2、value : real

保存属性的值。指定的值可用于影响项目沿路径的视觉外观。

---

PathPercent

一、描述

PathPercent 可操纵 PathView 路径上项目之间的间距。