shapegallery.qml Example File
shapes/content/shapegallery.qml
import QtQuick 2.9
import QtQuick.Shapes 1.0
Rectangle {
id: root
width: 1024
height: 768
property color col: "lightsteelblue"
gradient: Gradient {
GradientStop { position: 0.0; color: Qt.tint(root.col, "#20FFFFFF") }
GradientStop { position: 0.1; color: Qt.tint(root.col, "#20AAAAAA") }
GradientStop { position: 0.9; color: Qt.tint(root.col, "#20666666") }
GradientStop { position: 1.0; color: Qt.tint(root.col, "#20000000") }
}
ListModel {
id: pathGalleryModel
ListElement {
name: "Stroke and fill"
shapeUrl: "tapableTriangle.qml"
}
ListElement {
name: "Stroke or fill only"
shapeUrl: "item2.qml"
}
ListElement {
name: "Dash pattern"
shapeUrl: "item4.qml"
}
ListElement {
name: "Linear gradient"
shapeUrl: "item5.qml"
}
ListElement {
name: "Radial gradient"
shapeUrl: "item3.qml"
}
ListElement {
name: "Fill rules"
shapeUrl: "item6.qml"
}
ListElement {
name: "Join styles"
shapeUrl: "item7.qml"
}
ListElement {
name: "Cap styles"
shapeUrl: "item8.qml"
}
ListElement {
name: "Quadratic curve"
shapeUrl: "item9.qml"
}
ListElement {
name: "Cubic curve"
shapeUrl: "item10.qml"
}
ListElement {
name: "Elliptical arc"
shapeUrl: "item11.qml"
}
ListElement {
name: "Gradient spread modes"
shapeUrl: "item12.qml"
}
ListElement {
name: "Arc direction"
shapeUrl: "item13.qml"
}
ListElement {
name: "Large/small arc"
shapeUrl: "item14.qml"
}
ListElement {
name: "Arc rotation"
shapeUrl: "item15.qml"
}
ListElement {
name: "Tiger"
shapeUrl: "item17.qml"
}
}
property int gridSpacing: 10
Component {
id: pathGalleryDelegate
Rectangle {
border.color: "purple"
width: grid.cellWidth - root.gridSpacing
height: grid.cellHeight - root.gridSpacing
Column {
anchors.fill: parent
anchors.margins: 4
Item {
width: parent.width
height: parent.height - delegText.height
Loader {
source: Qt.resolvedUrl(shapeUrl)
anchors.fill: parent
}
}
Text {
id: delegText
text: model.name
font.pointSize: 16
anchors.horizontalCenter: parent.horizontalCenter
}
}
}
}
Rectangle {
anchors.fill: parent
anchors.margins: 10
color: "lightBlue"
clip: true
GridView {
id: grid
anchors.fill: parent
anchors.margins: root.gridSpacing
cellWidth: 300
cellHeight: 300
delegate: pathGalleryDelegate
model: pathGalleryModel
}
}
Text {
anchors.right: parent.right
Shape { id: dummyShape; ShapePath { } }
color: "darkBlue"
font.pointSize: 12
property variant rendererStrings: [ "Unknown", "Generic (QtGui triangulator)", "GL_NV_path_rendering", "Software (QPainter)" ]
text: "Active Shape backend: " + rendererStrings[dummyShape.rendererType]
SequentialAnimation on opacity {
NumberAnimation { from: 1; to: 0; duration: 5000 }
PauseAnimation { duration: 5000 }
NumberAnimation { from: 0; to: 1; duration: 1000 }
PauseAnimation { duration: 5000 }
loops: Animation.Infinite
}
}
}