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.<name> 提供给委托。
请注意,允许使用现有的 Item 属性名称(例如“opacity”)作为属性。这是因为路径属性添加了一个新的附加属性,它与现有属性没有任何冲突。
2、value : real
保存属性的值。指定的值可用于影响项目沿路径的视觉外观。
PathPercent
一、描述
PathPercent 可操纵 PathView 路径上项目之间的间距。