Shapes example: adhere to guidelines
- Fix all qmllint warnings. (except for main.qml, interactive.qml, and sampling.qml) - Translate user facing strings when it makes sense to do so. - Mark readonly properties as 'readonly'. - Avoid binding on multiple properties on a single line. (except for tiger.qml). Pick-to: 6.5 Change-Id: Idbf8a472ca5ba5385d1368aadd608e95231a07f0 Reviewed-by: Shawn Rutledge <shawn.rutledge@qt.io>
This commit is contained in:
Oliver Eftevaag
parent
ba79f20f31
commit
e61d555a6d
|
|
@ -17,21 +17,28 @@ Rectangle {
|
|||
|
||||
Repeater {
|
||||
model: 2
|
||||
Shape {
|
||||
delegate: Shape {
|
||||
id: delegate
|
||||
|
||||
required property int index
|
||||
|
||||
anchors.fill: parent
|
||||
|
||||
ShapePath {
|
||||
fillColor: "transparent"
|
||||
strokeColor: model.index === 0 ? "red" : "blue"
|
||||
strokeColor: delegate.index === 0 ? "red" : "blue"
|
||||
strokeStyle: ShapePath.DashLine
|
||||
strokeWidth: 4
|
||||
|
||||
startX: 4; startY: 4
|
||||
startX: 4
|
||||
startY: 4
|
||||
PathArc {
|
||||
id: arc
|
||||
x: 96; y: 96
|
||||
radiusX: 100; radiusY: 100
|
||||
direction: model.index === 0 ? PathArc.Clockwise : PathArc.Counterclockwise
|
||||
x: 96
|
||||
y: 96
|
||||
radiusX: 100
|
||||
radiusY: 100
|
||||
direction: delegate.index === 0 ? PathArc.Clockwise : PathArc.Counterclockwise
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -41,11 +48,11 @@ Rectangle {
|
|||
Column {
|
||||
anchors.right: parent.right
|
||||
Text {
|
||||
text: "Clockwise (sweep 1)"
|
||||
text: qsTr("Clockwise (sweep 1)")
|
||||
color: "red"
|
||||
}
|
||||
Text {
|
||||
text: "Counter clockwise (sweep 0)"
|
||||
text: qsTr("Counter clockwise (sweep 0)")
|
||||
color: "blue"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,22 +11,29 @@ Rectangle {
|
|||
|
||||
Repeater {
|
||||
model: 2
|
||||
Shape {
|
||||
delegate: Shape {
|
||||
id: delegate1
|
||||
|
||||
required property int index
|
||||
|
||||
width: 200
|
||||
height: 200
|
||||
anchors.centerIn: parent
|
||||
|
||||
ShapePath {
|
||||
fillColor: "transparent"
|
||||
strokeColor: model.index === 0 ? "red" : "blue"
|
||||
strokeColor: delegate1.index === 0 ? "red" : "blue"
|
||||
strokeStyle: ShapePath.DashLine
|
||||
strokeWidth: 4
|
||||
|
||||
startX: 50; startY: 100
|
||||
startX: 50
|
||||
startY: 100
|
||||
PathArc {
|
||||
x: 150; y: 100
|
||||
radiusX: 50; radiusY: 20
|
||||
xAxisRotation: model.index === 0 ? 0 : 45
|
||||
x: 150
|
||||
y: 100
|
||||
radiusX: 50
|
||||
radiusY: 20
|
||||
xAxisRotation: delegate1.index === 0 ? 0 : 45
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -34,20 +41,27 @@ Rectangle {
|
|||
|
||||
Repeater {
|
||||
model: 2
|
||||
Shape {
|
||||
delegate: Shape {
|
||||
id: delegate2
|
||||
|
||||
required property int index
|
||||
|
||||
width: 200
|
||||
height: 200
|
||||
anchors.centerIn: parent
|
||||
|
||||
ShapePath {
|
||||
fillColor: "transparent"
|
||||
strokeColor: model.index === 0 ? "red" : "blue"
|
||||
strokeColor: delegate2.index === 0 ? "red" : "blue"
|
||||
|
||||
startX: 50; startY: 100
|
||||
startX: 50
|
||||
startY: 100
|
||||
PathArc {
|
||||
x: 150; y: 100
|
||||
radiusX: 50; radiusY: 20
|
||||
xAxisRotation: model.index === 0 ? 0 : 45
|
||||
x: 150
|
||||
y: 100
|
||||
radiusX: 50
|
||||
radiusY: 20
|
||||
xAxisRotation: delegate2.index === 0 ? 0 : 45
|
||||
direction: PathArc.Counterclockwise
|
||||
}
|
||||
}
|
||||
|
|
@ -57,11 +71,11 @@ Rectangle {
|
|||
Column {
|
||||
anchors.right: parent.right
|
||||
Text {
|
||||
text: "0 degrees"
|
||||
text: qsTr("0 degrees")
|
||||
color: "red"
|
||||
}
|
||||
Text {
|
||||
text: "45 degrees"
|
||||
text: qsTr("45 degrees")
|
||||
color: "blue"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,7 +6,8 @@ import QtQuick.Shapes
|
|||
|
||||
Rectangle {
|
||||
color: "lightGray"
|
||||
width: 256; height: 256
|
||||
width: 256
|
||||
height: 256
|
||||
|
||||
Shape {
|
||||
anchors.centerIn: parent
|
||||
|
|
@ -20,15 +21,29 @@ Rectangle {
|
|||
fillColor: "transparent"
|
||||
|
||||
property int capStyleIdx: 0
|
||||
property variant styles: [ ShapePath.FlatCap, ShapePath.SquareCap, ShapePath.RoundCap ]
|
||||
property variant styleTexts: [ "FlatCap", "SquareCap", "RoundCap" ]
|
||||
readonly property variant styles: [ ShapePath.FlatCap, ShapePath.SquareCap, ShapePath.RoundCap ]
|
||||
readonly property variant styleTexts: [ qsTr("FlatCap"), qsTr("SquareCap"), qsTr("RoundCap") ]
|
||||
|
||||
capStyle: styles[capStyleIdx]
|
||||
|
||||
startX: 40; startY: 30
|
||||
PathQuad { x: 50; y: 80; controlX: 0; controlY: 80 }
|
||||
PathLine { x: 150; y: 80 }
|
||||
PathQuad { x: 160; y: 30; controlX: 200; controlY: 80 }
|
||||
startX: 40
|
||||
startY: 30
|
||||
PathQuad {
|
||||
x: 50
|
||||
y: 80
|
||||
controlX: 0
|
||||
controlY: 80
|
||||
}
|
||||
PathLine {
|
||||
x: 150
|
||||
y: 80
|
||||
}
|
||||
PathQuad {
|
||||
x: 160
|
||||
y: 30
|
||||
controlX: 200
|
||||
controlY: 80
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -9,12 +9,24 @@ Rectangle {
|
|||
width: 1024
|
||||
height: 768
|
||||
|
||||
property color col: "lightsteelblue"
|
||||
readonly 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") }
|
||||
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")
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle {
|
||||
|
|
@ -22,7 +34,7 @@ Rectangle {
|
|||
width: 200
|
||||
height: 200
|
||||
x: 150
|
||||
property real centerY: parent.height / 2 - height / 2
|
||||
readonly property real centerY: parent.height / 2 - height / 2
|
||||
property real dy: 0
|
||||
y: centerY + dy
|
||||
clip: true
|
||||
|
|
@ -37,20 +49,26 @@ Rectangle {
|
|||
visible: status === Loader.Ready
|
||||
}
|
||||
|
||||
SequentialAnimation on dy {
|
||||
SequentialAnimation {
|
||||
loops: Animation.Infinite
|
||||
running: loader1.status === Loader.Ready && loader1.item.status === Shape.Ready
|
||||
running: loader1.status === Loader.Ready && (loader1.item as Shape)?.status === Shape.Ready
|
||||
NumberAnimation {
|
||||
target: scissorRect
|
||||
property: "dy"
|
||||
from: 0
|
||||
to: -scissorRect.centerY
|
||||
duration: 2000
|
||||
}
|
||||
NumberAnimation {
|
||||
target: scissorRect
|
||||
property: "dy"
|
||||
from: -scissorRect.centerY
|
||||
to: scissorRect.centerY
|
||||
duration: 4000
|
||||
}
|
||||
NumberAnimation {
|
||||
target: scissorRect
|
||||
property: "dy"
|
||||
from: scissorRect.centerY
|
||||
to: 0
|
||||
duration: 2000
|
||||
|
|
@ -66,9 +84,11 @@ Rectangle {
|
|||
id: stencilRect
|
||||
width: 300
|
||||
height: 200
|
||||
anchors.right: parent.right
|
||||
anchors.rightMargin: 100
|
||||
anchors.verticalCenter: parent.verticalCenter
|
||||
anchors {
|
||||
right: parent.right
|
||||
rightMargin: 100
|
||||
verticalCenter: parent.verticalCenter
|
||||
}
|
||||
clip: true // NB! still clips to bounding rect (not shape)
|
||||
|
||||
Loader {
|
||||
|
|
|
|||
|
|
@ -23,22 +23,53 @@ Rectangle {
|
|||
strokeColor: "black"
|
||||
fillGradient: ConicalGradient {
|
||||
id: conGrad
|
||||
centerX: 100; centerY: 75
|
||||
NumberAnimation on angle { from: 0; to: 360; duration: 10000; loops: Animation.Infinite }
|
||||
GradientStop { position: 0; color: "#00000000" }
|
||||
GradientStop { position: 0.10; color: "#ffe0cc73" }
|
||||
GradientStop { position: 0.17; color: "#ffc6a006" }
|
||||
GradientStop { position: 0.46; color: "#ff600659" }
|
||||
GradientStop { position: 0.72; color: "#ff0680ac" }
|
||||
GradientStop { position: 0.92; color: "#ffb9d9e6" }
|
||||
GradientStop { position: 1.00; color: "#00000000" }
|
||||
centerX: 100
|
||||
centerY: 75
|
||||
NumberAnimation on angle {
|
||||
from: 0
|
||||
to: 360
|
||||
duration: 10000
|
||||
loops: Animation.Infinite
|
||||
}
|
||||
GradientStop {
|
||||
position: 0
|
||||
color: "#00000000"
|
||||
}
|
||||
GradientStop {
|
||||
position: 0.10
|
||||
color: "#ffe0cc73"
|
||||
}
|
||||
GradientStop {
|
||||
position: 0.17
|
||||
color: "#ffc6a006"
|
||||
}
|
||||
GradientStop {
|
||||
position: 0.46
|
||||
color: "#ff600659"
|
||||
}
|
||||
GradientStop {
|
||||
position: 0.72
|
||||
color: "#ff0680ac"
|
||||
}
|
||||
GradientStop {
|
||||
position: 0.92
|
||||
color: "#ffb9d9e6"
|
||||
}
|
||||
GradientStop {
|
||||
position: 1.00
|
||||
color: "#00000000"
|
||||
}
|
||||
}
|
||||
|
||||
startX: 50; startY: 100
|
||||
startX: 50
|
||||
startY: 100
|
||||
PathCubic {
|
||||
x: 150; y: 100
|
||||
control1X: cp1.x; control1Y: cp1.y
|
||||
control2X: cp2.x; control2Y: cp2.y
|
||||
x: 150
|
||||
y: 100
|
||||
control1X: cp1.x
|
||||
control1Y: cp1.y
|
||||
control2X: cp2.x
|
||||
control2Y: cp2.y
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -46,7 +77,8 @@ Rectangle {
|
|||
Rectangle {
|
||||
id: cp1
|
||||
color: "red"
|
||||
width: 10; height: 10
|
||||
width: 10
|
||||
height: 10
|
||||
SequentialAnimation {
|
||||
loops: Animation.Infinite
|
||||
running: true
|
||||
|
|
@ -84,7 +116,8 @@ Rectangle {
|
|||
Rectangle {
|
||||
id: cp2
|
||||
color: "blue"
|
||||
width: 10; height: 10
|
||||
width: 10
|
||||
height: 10
|
||||
x: shape.width - width
|
||||
SequentialAnimation {
|
||||
loops: Animation.Infinite
|
||||
|
|
@ -122,8 +155,10 @@ Rectangle {
|
|||
}
|
||||
|
||||
Text {
|
||||
anchors.right: parent.right
|
||||
anchors.top: parent.top
|
||||
text: "Conical gradient angle: " + Math.round(conGrad.angle)
|
||||
anchors {
|
||||
right: parent.right
|
||||
top: parent.top
|
||||
}
|
||||
text: qsTr("Conical gradient angle: ") + Math.round(conGrad.angle)
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,38 +16,98 @@ Rectangle {
|
|||
strokeWidth: 4
|
||||
strokeColor: "red"
|
||||
fillGradient: RadialGradient {
|
||||
centerX: 100; centerY: 100; centerRadius: 100
|
||||
centerX: 100
|
||||
centerY: 100
|
||||
centerRadius: 100
|
||||
SequentialAnimation on focalRadius {
|
||||
loops: Animation.Infinite
|
||||
NumberAnimation { from: 1; to: 20; duration: 2000 }
|
||||
NumberAnimation { from: 20; to: 1; duration: 2000 }
|
||||
NumberAnimation {
|
||||
from: 1
|
||||
to: 20
|
||||
duration: 2000
|
||||
}
|
||||
NumberAnimation {
|
||||
from: 20
|
||||
to: 1
|
||||
duration: 2000
|
||||
}
|
||||
}
|
||||
SequentialAnimation on focalX {
|
||||
loops: Animation.Infinite
|
||||
NumberAnimation { from: 50; to: 150; duration: 3000 }
|
||||
NumberAnimation { from: 150; to: 50; duration: 3000 }
|
||||
NumberAnimation {
|
||||
from: 50
|
||||
to: 150
|
||||
duration: 3000
|
||||
}
|
||||
NumberAnimation {
|
||||
from: 150
|
||||
to: 50
|
||||
duration: 3000
|
||||
}
|
||||
}
|
||||
SequentialAnimation on focalY {
|
||||
loops: Animation.Infinite
|
||||
NumberAnimation { from: 50; to: 150; duration: 1000 }
|
||||
NumberAnimation { from: 150; to: 50; duration: 1000 }
|
||||
NumberAnimation {
|
||||
from: 50
|
||||
to: 150
|
||||
duration: 1000
|
||||
}
|
||||
NumberAnimation {
|
||||
from: 150
|
||||
to: 50
|
||||
duration: 1000
|
||||
}
|
||||
}
|
||||
GradientStop {
|
||||
position: 0
|
||||
color: "#ffffff"
|
||||
}
|
||||
GradientStop {
|
||||
position: 0.11
|
||||
color: "#f9ffa0"
|
||||
}
|
||||
GradientStop {
|
||||
position: 0.13
|
||||
color: "#f9ff99"
|
||||
}
|
||||
GradientStop {
|
||||
position: 0.14
|
||||
color: "#f3ff86"
|
||||
}
|
||||
GradientStop {
|
||||
position: 0.49
|
||||
color: "#93b353"
|
||||
}
|
||||
GradientStop {
|
||||
position: 0.87
|
||||
color: "#264619"
|
||||
}
|
||||
GradientStop {
|
||||
position: 0.96
|
||||
color: "#0c1306"
|
||||
}
|
||||
GradientStop {
|
||||
position: 1
|
||||
color: "#000000"
|
||||
}
|
||||
GradientStop { position: 0; color: "#ffffff" }
|
||||
GradientStop { position: 0.11; color: "#f9ffa0" }
|
||||
GradientStop { position: 0.13; color: "#f9ff99" }
|
||||
GradientStop { position: 0.14; color: "#f3ff86" }
|
||||
GradientStop { position: 0.49; color: "#93b353" }
|
||||
GradientStop { position: 0.87; color: "#264619" }
|
||||
GradientStop { position: 0.96; color: "#0c1306" }
|
||||
GradientStop { position: 1; color: "#000000" }
|
||||
}
|
||||
fillColor: "blue" // ignored with the gradient set
|
||||
strokeStyle: ShapePath.DashLine
|
||||
dashPattern: [ 1, 4 ]
|
||||
startX: 20; startY: 20
|
||||
PathLine { x: 180; y: 130 }
|
||||
PathLine { x: 20; y: 130 }
|
||||
PathLine { x: 20; y: 20 }
|
||||
startX: 20
|
||||
startY: 20
|
||||
PathLine {
|
||||
x: 180
|
||||
y: 130
|
||||
}
|
||||
PathLine {
|
||||
x: 20
|
||||
y: 130
|
||||
}
|
||||
PathLine {
|
||||
x: 20
|
||||
y: 20
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,26 +17,41 @@ Rectangle {
|
|||
ShapePath {
|
||||
fillGradient: LinearGradient {
|
||||
y2: shape.height
|
||||
GradientStop { position: 0; color: "yellow" }
|
||||
GradientStop { position: 1; color: "green" }
|
||||
GradientStop {
|
||||
position: 0
|
||||
color: "yellow"
|
||||
}
|
||||
GradientStop {
|
||||
position: 1
|
||||
color: "green"
|
||||
}
|
||||
}
|
||||
|
||||
startX: 10; startY: 100
|
||||
startX: 10
|
||||
startY: 100
|
||||
PathArc {
|
||||
relativeX: 50; y: 100
|
||||
radiusX: 25; radiusY: 25
|
||||
relativeX: 50
|
||||
y: 100
|
||||
radiusX: 25
|
||||
radiusY: 25
|
||||
}
|
||||
PathArc {
|
||||
relativeX: 50; y: 100
|
||||
radiusX: 25; radiusY: 35
|
||||
relativeX: 50
|
||||
y: 100
|
||||
radiusX: 25
|
||||
radiusY: 35
|
||||
}
|
||||
PathArc {
|
||||
relativeX: 50; y: 100
|
||||
radiusX: 25; radiusY: 60
|
||||
relativeX: 50
|
||||
y: 100
|
||||
radiusX: 25
|
||||
radiusY: 60
|
||||
}
|
||||
PathArc {
|
||||
relativeX: 50; y: 100
|
||||
radiusX: 50; radiusY: 120
|
||||
relativeX: 50
|
||||
y: 100
|
||||
radiusX: 50
|
||||
radiusY: 120
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -56,13 +71,21 @@ Rectangle {
|
|||
capStyle: ShapePath.RoundCap
|
||||
|
||||
PathAngleArc {
|
||||
centerX: 65; centerY: 95
|
||||
radiusX: 45; radiusY: 45
|
||||
centerX: 65
|
||||
centerY: 95
|
||||
radiusX: 45
|
||||
radiusY: 45
|
||||
startAngle: -180
|
||||
SequentialAnimation on sweepAngle {
|
||||
loops: Animation.Infinite
|
||||
NumberAnimation { to: 360; duration: 2000 }
|
||||
NumberAnimation { to: 0; duration: 2000 }
|
||||
NumberAnimation {
|
||||
to: 360
|
||||
duration: 2000
|
||||
}
|
||||
NumberAnimation {
|
||||
to: 0
|
||||
duration: 2000
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,12 +17,30 @@ Rectangle {
|
|||
strokeColor: "blue"
|
||||
fillColor: "magenta"
|
||||
strokeWidth: 2
|
||||
PathMove { x: 90; y: 50 }
|
||||
PathLine { x: 50 + 40 * Math.cos(0.8 * 1 * Math.PI); y: 50 + 40 * Math.sin(0.8 * 1 * Math.PI) }
|
||||
PathLine { x: 50 + 40 * Math.cos(0.8 * 2 * Math.PI); y: 50 + 40 * Math.sin(0.8 * 2 * Math.PI) }
|
||||
PathLine { x: 50 + 40 * Math.cos(0.8 * 3 * Math.PI); y: 50 + 40 * Math.sin(0.8 * 3 * Math.PI) }
|
||||
PathLine { x: 50 + 40 * Math.cos(0.8 * 4 * Math.PI); y: 50 + 40 * Math.sin(0.8 * 4 * Math.PI) }
|
||||
PathLine { x: 90; y: 50 }
|
||||
PathMove {
|
||||
x: 90
|
||||
y: 50
|
||||
}
|
||||
PathLine {
|
||||
x: 50 + 40 * Math.cos(0.8 * 1 * Math.PI)
|
||||
y: 50 + 40 * Math.sin(0.8 * 1 * Math.PI)
|
||||
}
|
||||
PathLine {
|
||||
x: 50 + 40 * Math.cos(0.8 * 2 * Math.PI)
|
||||
y: 50 + 40 * Math.sin(0.8 * 2 * Math.PI)
|
||||
}
|
||||
PathLine {
|
||||
x: 50 + 40 * Math.cos(0.8 * 3 * Math.PI)
|
||||
y: 50 + 40 * Math.sin(0.8 * 3 * Math.PI)
|
||||
}
|
||||
PathLine {
|
||||
x: 50 + 40 * Math.cos(0.8 * 4 * Math.PI)
|
||||
y: 50 + 40 * Math.sin(0.8 * 4 * Math.PI)
|
||||
}
|
||||
PathLine {
|
||||
x: 90
|
||||
y: 50
|
||||
}
|
||||
}
|
||||
NumberAnimation on rotation {
|
||||
from: 0
|
||||
|
|
@ -39,6 +57,6 @@ Rectangle {
|
|||
}
|
||||
Text {
|
||||
anchors.right: parent.right
|
||||
text: star.fillRule === ShapePath.OddEvenFill ? "OddEvenFill" : "WindingFill"
|
||||
text: star.fillRule === ShapePath.OddEvenFill ? qsTr("OddEvenFill") : qsTr("WindingFill")
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,10 +9,10 @@ Rectangle {
|
|||
width: 256
|
||||
height: 256
|
||||
Rectangle {
|
||||
border.color: "black"
|
||||
anchors.centerIn: parent
|
||||
width: 200
|
||||
height: 200
|
||||
anchors.centerIn: parent
|
||||
border.color: "black"
|
||||
|
||||
Shape {
|
||||
anchors.fill: parent
|
||||
|
|
@ -22,16 +22,36 @@ Rectangle {
|
|||
|
||||
fillGradient: LinearGradient {
|
||||
id: grad
|
||||
y1: 50; y2: 150
|
||||
GradientStop { position: 0; color: "black" }
|
||||
GradientStop { position: 1; color: "red" }
|
||||
y1: 50
|
||||
y2: 150
|
||||
GradientStop {
|
||||
position: 0
|
||||
color: "black"
|
||||
}
|
||||
GradientStop {
|
||||
position: 1
|
||||
color: "red"
|
||||
}
|
||||
}
|
||||
|
||||
startX: 10; startY: 10
|
||||
PathLine { relativeX: 180; relativeY: 0 }
|
||||
PathLine { relativeX: 0; relativeY: 180 }
|
||||
PathLine { relativeX: -180; relativeY: 0 }
|
||||
PathLine { relativeX: 0; relativeY: -180 }
|
||||
startX: 10
|
||||
startY: 10
|
||||
PathLine {
|
||||
relativeX: 180
|
||||
relativeY: 0
|
||||
}
|
||||
PathLine {
|
||||
relativeX: 0
|
||||
relativeY: 180
|
||||
}
|
||||
PathLine {
|
||||
relativeX: -180
|
||||
relativeY: 0
|
||||
}
|
||||
PathLine {
|
||||
relativeX: 0
|
||||
relativeY: -180
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -40,23 +60,37 @@ Rectangle {
|
|||
interval: 3000
|
||||
running: true
|
||||
repeat: true
|
||||
property variant spreads: [ ShapeGradient.PadSpread, ShapeGradient.RepeatSpread, ShapeGradient.ReflectSpread ]
|
||||
property variant spreadTexts: [ "PadSpread", "RepeatSpread", "ReflectSpread" ]
|
||||
readonly property variant spreads: [ ShapeGradient.PadSpread, ShapeGradient.RepeatSpread, ShapeGradient.ReflectSpread ]
|
||||
readonly property variant spreadTexts: [ qsTr("PadSpread"), qsTr("RepeatSpread"), qsTr("ReflectSpread") ]
|
||||
property int spreadIdx: 0
|
||||
onTriggered: { spreadIdx = (spreadIdx + 1) % spreads.length; grad.spread = spreads[spreadIdx] }
|
||||
onTriggered: function() {
|
||||
spreadIdx = (spreadIdx + 1) % spreads.length
|
||||
grad.spread = spreads[spreadIdx]
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Shape {
|
||||
anchors.fill: parent
|
||||
ShapePath {
|
||||
strokeColor: "gray"
|
||||
strokeWidth: 2
|
||||
fillColor: "transparent"
|
||||
PathMove { x: 0; y: 50 }
|
||||
PathLine { relativeX: 200; relativeY: 0 }
|
||||
PathMove { x: 0; y: 150 }
|
||||
PathLine { relativeX: 200; relativeY: 0 }
|
||||
PathMove {
|
||||
x: 0
|
||||
y: 50
|
||||
}
|
||||
PathLine {
|
||||
relativeX: 200
|
||||
relativeY: 0
|
||||
}
|
||||
PathMove {
|
||||
x: 0
|
||||
y: 150
|
||||
}
|
||||
PathLine {
|
||||
relativeX: 200
|
||||
relativeY: 0
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,6 +6,8 @@ import QtQuick.Controls
|
|||
import QtQuick.Layouts
|
||||
import QtQuick.Shapes
|
||||
|
||||
pragma ComponentBehavior: Bound
|
||||
|
||||
Rectangle {
|
||||
id: root
|
||||
width: 1024
|
||||
|
|
@ -59,7 +61,7 @@ Rectangle {
|
|||
fillColor: fillSwitch.checked ? "green" : "transparent"
|
||||
PathQuad {
|
||||
id: pathSegment
|
||||
x: quadShapePath.startx + 1
|
||||
x: quadShapePath.startX + 1
|
||||
y: quadShapePath.startY + 1
|
||||
controlX: quadShapePath.startX + 50
|
||||
controlY: quadShapePath.startY + 50
|
||||
|
|
@ -148,12 +150,24 @@ Rectangle {
|
|||
|
||||
property real halfWidth: width / 2
|
||||
property bool complete: false
|
||||
Binding { target: rect.target; property: xprop; value: x + halfWidth; when: complete }
|
||||
Binding { target: rect.target; property: yprop; value: y + halfWidth; when: complete }
|
||||
Binding {
|
||||
target: rect.target
|
||||
property: rect.xprop
|
||||
value: rect.x + rect.halfWidth
|
||||
when: rect.complete
|
||||
}
|
||||
Binding {
|
||||
target: rect.target
|
||||
property: rect.yprop
|
||||
value: rect.y + rect.halfWidth
|
||||
when: rect.complete
|
||||
}
|
||||
|
||||
DragHandler { }
|
||||
|
||||
HoverHandler { id: hh }
|
||||
HoverHandler {
|
||||
id: hh
|
||||
}
|
||||
|
||||
Component.onCompleted: {
|
||||
x = target[xprop] - halfWidth;
|
||||
|
|
|
|||
|
|
@ -23,15 +23,21 @@ Rectangle {
|
|||
capStyle: ShapePath.RoundCap
|
||||
|
||||
property int joinStyleIdx: 0
|
||||
property variant styles: [ ShapePath.BevelJoin, ShapePath.MiterJoin, ShapePath.RoundJoin ]
|
||||
property variant styleTexts: [ "BevelJoin", "MiterJoin", "RoundJoin" ]
|
||||
readonly property variant styles: [ ShapePath.BevelJoin, ShapePath.MiterJoin, ShapePath.RoundJoin ]
|
||||
readonly property variant styleTexts: [ qsTr("BevelJoin"), qsTr("MiterJoin"), qsTr("RoundJoin") ]
|
||||
|
||||
joinStyle: styles[joinStyleIdx]
|
||||
|
||||
startX: 30
|
||||
startY: 30
|
||||
PathLine { x: 100; y: 100 }
|
||||
PathLine { x: 30; y: 100 }
|
||||
PathLine {
|
||||
x: 100
|
||||
y: 100
|
||||
}
|
||||
PathLine {
|
||||
x: 30
|
||||
y: 100
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -11,22 +11,28 @@ Rectangle {
|
|||
|
||||
Repeater {
|
||||
model: 2
|
||||
Shape {
|
||||
delegate: Shape {
|
||||
id: delegate
|
||||
required property int index
|
||||
|
||||
anchors.centerIn: parent
|
||||
width: 200
|
||||
height: 200
|
||||
anchors.centerIn: parent
|
||||
|
||||
ShapePath {
|
||||
fillColor: "transparent"
|
||||
strokeColor: model.index === 0 ? "red" : "blue"
|
||||
strokeColor: delegate.index === 0 ? "red" : "blue"
|
||||
strokeStyle: ShapePath.DashLine
|
||||
strokeWidth: 4
|
||||
|
||||
startX: 50; startY: 100
|
||||
startX: 50
|
||||
startY: 100
|
||||
PathArc {
|
||||
x: 100; y: 150
|
||||
radiusX: 50; radiusY: 50
|
||||
useLargeArc: model.index === 1
|
||||
x: 100
|
||||
y: 150
|
||||
radiusX: 50
|
||||
radiusY: 50
|
||||
useLargeArc: delegate.index === 1
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -35,11 +41,11 @@ Rectangle {
|
|||
Column {
|
||||
anchors.right: parent.right
|
||||
Text {
|
||||
text: "Small"
|
||||
text: qsTr("Small")
|
||||
color: "red"
|
||||
}
|
||||
Text {
|
||||
text: "Large"
|
||||
text: qsTr("Large")
|
||||
color: "blue"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -27,13 +27,15 @@ Rectangle {
|
|||
PathArc {
|
||||
x: shape.width / 2 + p.xr
|
||||
y: shape.height / 2 + p.yr
|
||||
radiusX: p.xr; radiusY: p.yr
|
||||
radiusX: p.xr
|
||||
radiusY: p.yr
|
||||
useLargeArc: true
|
||||
}
|
||||
PathArc {
|
||||
x: shape.width / 2 - p.xr
|
||||
y: shape.height / 2 - p.yr
|
||||
radiusX: p.xr; radiusY: p.yr
|
||||
radiusX: p.xr
|
||||
radiusY: p.yr
|
||||
useLargeArc: true
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,10 +10,10 @@ Item {
|
|||
LauncherList {
|
||||
anchors.fill: parent
|
||||
Component.onCompleted: {
|
||||
addExample("Shape Gallery", "Simple path rendering examples", Qt.resolvedUrl("shapegallery.qml"))
|
||||
addExample("Interactive Shape", "Dynamic, interactive path rendering examples", Qt.resolvedUrl("interactive.qml"))
|
||||
addExample("Super- and multisampling", "Improving quality", Qt.resolvedUrl("sampling.qml"))
|
||||
addExample("Clip My Tiger!", "Clip examples, a.k.a. What Not To Do", Qt.resolvedUrl("clippedtigers.qml"))
|
||||
addExample(qsTr("Shape Gallery"), qsTr("Simple path rendering examples"), Qt.resolvedUrl("shapegallery.qml"))
|
||||
addExample(qsTr("Interactive Shape"), qsTr("Dynamic, interactive path rendering examples"), Qt.resolvedUrl("interactive.qml"))
|
||||
addExample(qsTr("Super- and multisampling"), qsTr("Improving quality"), Qt.resolvedUrl("sampling.qml"))
|
||||
addExample(qsTr("Clip My Tiger!"), qsTr("Clip examples, a.k.a. What Not To Do"), Qt.resolvedUrl("clippedtigers.qml"))
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -26,8 +26,10 @@ Rectangle {
|
|||
startX: 50
|
||||
startY: 50
|
||||
PathQuad {
|
||||
x: 150; y: 50
|
||||
controlX: cp.x; controlY: cp.y
|
||||
x: 150
|
||||
y: 50
|
||||
controlX: cp.x
|
||||
controlY: cp.y
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,27 +16,73 @@ Rectangle {
|
|||
strokeWidth: 4
|
||||
strokeColor: "red"
|
||||
fillGradient: LinearGradient {
|
||||
x1: 20; y1: 20
|
||||
x2: 180; y2: 130
|
||||
GradientStop { position: 0; color: "blue" }
|
||||
GradientStop { position: 0.2; color: "green" }
|
||||
GradientStop { position: 0.4; color: "red" }
|
||||
GradientStop { position: 0.6; color: "yellow" }
|
||||
GradientStop { position: 1; color: "cyan" }
|
||||
x1: 20
|
||||
y1: 20
|
||||
x2: 180
|
||||
y2: 130
|
||||
GradientStop {
|
||||
position: 0
|
||||
color: "blue"
|
||||
}
|
||||
GradientStop {
|
||||
position: 0.2
|
||||
color: "green"
|
||||
}
|
||||
GradientStop {
|
||||
position: 0.4
|
||||
color: "red"
|
||||
}
|
||||
GradientStop {
|
||||
position: 0.6
|
||||
color: "yellow"
|
||||
}
|
||||
GradientStop {
|
||||
position: 1
|
||||
color: "cyan"
|
||||
}
|
||||
}
|
||||
fillColor: "blue" // ignored with the gradient set
|
||||
strokeStyle: ShapePath.DashLine
|
||||
dashPattern: [ 1, 4 ]
|
||||
startX: 20; startY: 20
|
||||
PathLine { x: 180; y: 130 }
|
||||
PathLine { x: 20; y: 130 }
|
||||
PathLine { x: 20; y: 20 }
|
||||
startX: 20
|
||||
startY: 20
|
||||
PathLine {
|
||||
x: 180
|
||||
y: 130
|
||||
}
|
||||
PathLine {
|
||||
x: 20
|
||||
y: 130
|
||||
}
|
||||
PathLine {
|
||||
x: 20
|
||||
y: 20
|
||||
}
|
||||
}
|
||||
transform: Rotation { origin.x: 100; origin.y: 50; axis { x: 0; y: 1; z: 0 }
|
||||
transform: Rotation {
|
||||
origin.x: 100
|
||||
origin.y: 50
|
||||
axis {
|
||||
x: 0
|
||||
y: 1
|
||||
z: 0
|
||||
}
|
||||
SequentialAnimation on angle {
|
||||
NumberAnimation { from: 0; to: 75; duration: 2000 }
|
||||
NumberAnimation { from: 75; to: -75; duration: 4000 }
|
||||
NumberAnimation { from: -75; to: 0; duration: 2000 }
|
||||
NumberAnimation {
|
||||
from: 0
|
||||
to: 75
|
||||
duration: 2000
|
||||
}
|
||||
NumberAnimation {
|
||||
from: 75
|
||||
to: -75
|
||||
duration: 4000
|
||||
}
|
||||
NumberAnimation {
|
||||
from: -75
|
||||
to: 0
|
||||
duration: 2000
|
||||
}
|
||||
loops: Animation.Infinite
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,24 +9,38 @@ Rectangle {
|
|||
width: 1024
|
||||
height: 768
|
||||
|
||||
property color col: "lightsteelblue"
|
||||
readonly 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") }
|
||||
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")
|
||||
}
|
||||
}
|
||||
|
||||
Row {
|
||||
anchors.fill: parent
|
||||
anchors.margins: 20
|
||||
anchors {
|
||||
fill: parent
|
||||
margins: 20
|
||||
}
|
||||
spacing: 40
|
||||
|
||||
Column {
|
||||
spacing: 40
|
||||
|
||||
Text {
|
||||
text: "Original"
|
||||
text: qsTr("Original")
|
||||
}
|
||||
|
||||
// A simple Shape without anything special.
|
||||
|
|
@ -44,20 +58,38 @@ Rectangle {
|
|||
|
||||
ShapePath {
|
||||
strokeColor: "green"
|
||||
NumberAnimation on strokeWidth { from: 1; to: 20; duration: 5000 }
|
||||
NumberAnimation on strokeWidth {
|
||||
from: 1
|
||||
to: 20
|
||||
duration: 5000
|
||||
}
|
||||
fillColor: "transparent"
|
||||
capStyle: ShapePath.RoundCap
|
||||
|
||||
startX: 40; startY: 30
|
||||
PathQuad { x: 50; y: 80; controlX: 0; controlY: 80 }
|
||||
PathLine { x: 150; y: 80 }
|
||||
PathQuad { x: 160; y: 30; controlX: 200; controlY: 80 }
|
||||
startX: 40
|
||||
startY: 30
|
||||
PathQuad {
|
||||
x: 50
|
||||
y: 80
|
||||
controlX: 0
|
||||
controlY: 80
|
||||
}
|
||||
PathLine {
|
||||
x: 150
|
||||
y: 80
|
||||
}
|
||||
PathQuad {
|
||||
x: 160
|
||||
y: 30
|
||||
controlX: 200
|
||||
controlY: 80
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Text {
|
||||
text: "Supersampling (2x)"
|
||||
text: qsTr("Supersampling (2x)")
|
||||
}
|
||||
|
||||
// Now let's use 2x supersampling via layers. This way the entire subtree
|
||||
|
|
@ -83,14 +115,32 @@ Rectangle {
|
|||
|
||||
ShapePath {
|
||||
strokeColor: "green"
|
||||
NumberAnimation on strokeWidth { from: 1; to: 20; duration: 5000 }
|
||||
NumberAnimation on strokeWidth {
|
||||
from: 1
|
||||
to: 20
|
||||
duration: 5000
|
||||
}
|
||||
fillColor: "transparent"
|
||||
capStyle: ShapePath.RoundCap
|
||||
|
||||
startX: 40; startY: 30
|
||||
PathQuad { x: 50; y: 80; controlX: 0; controlY: 80 }
|
||||
PathLine { x: 150; y: 80 }
|
||||
PathQuad { x: 160; y: 30; controlX: 200; controlY: 80 }
|
||||
startX: 40
|
||||
startY: 30
|
||||
PathQuad {
|
||||
x: 50
|
||||
y: 80
|
||||
controlX: 0
|
||||
controlY: 80
|
||||
}
|
||||
PathLine {
|
||||
x: 150
|
||||
y: 80
|
||||
}
|
||||
PathQuad {
|
||||
x: 160
|
||||
y: 30
|
||||
controlX: 200
|
||||
controlY: 80
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -100,7 +150,7 @@ Rectangle {
|
|||
spacing: 40
|
||||
|
||||
Text {
|
||||
text: "Multisampling (4x)"
|
||||
text: qsTr("Multisampling (4x)")
|
||||
}
|
||||
|
||||
// Now let's use 4x MSAA, again via layers. This needs support for
|
||||
|
|
@ -123,14 +173,32 @@ Rectangle {
|
|||
|
||||
ShapePath {
|
||||
strokeColor: "green"
|
||||
NumberAnimation on strokeWidth { from: 1; to: 20; duration: 5000 }
|
||||
NumberAnimation on strokeWidth {
|
||||
from: 1
|
||||
to: 20
|
||||
duration: 5000
|
||||
}
|
||||
fillColor: "transparent"
|
||||
capStyle: ShapePath.RoundCap
|
||||
|
||||
startX: 40; startY: 30
|
||||
PathQuad { x: 50; y: 80; controlX: 0; controlY: 80 }
|
||||
PathLine { x: 150; y: 80 }
|
||||
PathQuad { x: 160; y: 30; controlX: 200; controlY: 80 }
|
||||
startX: 40
|
||||
startY: 30
|
||||
PathQuad {
|
||||
x: 50
|
||||
y: 80
|
||||
controlX: 0
|
||||
controlY: 80
|
||||
}
|
||||
PathLine {
|
||||
x: 150
|
||||
y: 80
|
||||
}
|
||||
PathQuad {
|
||||
x: 160
|
||||
y: 30
|
||||
controlX: 200
|
||||
controlY: 80
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4,149 +4,180 @@
|
|||
import QtQuick
|
||||
import QtQuick.Shapes
|
||||
|
||||
pragma ComponentBehavior: Bound
|
||||
|
||||
Rectangle {
|
||||
id: root
|
||||
width: 1024
|
||||
height: 768
|
||||
|
||||
property color col: "lightsteelblue"
|
||||
readonly 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"
|
||||
GradientStop {
|
||||
position: 0.0
|
||||
color: Qt.tint(root.col, "#20FFFFFF")
|
||||
}
|
||||
ListElement {
|
||||
name: "Stroke or fill only"
|
||||
shapeUrl: "strokeOrFill.qml"
|
||||
GradientStop {
|
||||
position: 0.1
|
||||
color: Qt.tint(root.col, "#20AAAAAA")
|
||||
}
|
||||
ListElement {
|
||||
name: "Dash pattern"
|
||||
shapeUrl: "linearGradient.qml"
|
||||
GradientStop {
|
||||
position: 0.9
|
||||
color: Qt.tint(root.col, "#20666666")
|
||||
}
|
||||
ListElement {
|
||||
name: "Linear gradient"
|
||||
shapeUrl: "radialGradient.qml"
|
||||
}
|
||||
ListElement {
|
||||
name: "Radial gradient"
|
||||
shapeUrl: "dashPattern.qml"
|
||||
}
|
||||
ListElement {
|
||||
name: "Fill rules"
|
||||
shapeUrl: "fillRules.qml"
|
||||
}
|
||||
ListElement {
|
||||
name: "Join styles"
|
||||
shapeUrl: "joinStyles.qml"
|
||||
}
|
||||
ListElement {
|
||||
name: "Cap styles"
|
||||
shapeUrl: "capStyles.qml"
|
||||
}
|
||||
ListElement {
|
||||
name: "Quadratic curve"
|
||||
shapeUrl: "quadraticCurve.qml"
|
||||
}
|
||||
ListElement {
|
||||
name: "Cubic curve"
|
||||
shapeUrl: "cubicCurve.qml"
|
||||
}
|
||||
ListElement {
|
||||
name: "Elliptical arc"
|
||||
shapeUrl: "ellipticalArcs.qml"
|
||||
}
|
||||
ListElement {
|
||||
name: "Gradient spread modes"
|
||||
shapeUrl: "gradientSpreadModes.qml"
|
||||
}
|
||||
ListElement {
|
||||
name: "Arc direction"
|
||||
shapeUrl: "arcDirection.qml"
|
||||
}
|
||||
ListElement {
|
||||
name: "Large/small arc"
|
||||
shapeUrl: "largeOrSmallArc.qml"
|
||||
}
|
||||
ListElement {
|
||||
name: "Arc rotation"
|
||||
shapeUrl: "arcRotation.qml"
|
||||
}
|
||||
ListElement {
|
||||
name: "Tiger"
|
||||
shapeUrl: "tigerLoader.qml"
|
||||
}
|
||||
ListElement {
|
||||
name: "Text"
|
||||
shapeUrl: "text.qml"
|
||||
GradientStop {
|
||||
position: 1.0
|
||||
color: Qt.tint(root.col, "#20000000")
|
||||
}
|
||||
}
|
||||
|
||||
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
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
readonly property int gridSpacing: 10
|
||||
|
||||
Rectangle {
|
||||
anchors.fill: parent
|
||||
anchors.margins: 10
|
||||
anchors {
|
||||
fill: parent
|
||||
margins: 10
|
||||
}
|
||||
color: "lightBlue"
|
||||
clip: true
|
||||
|
||||
GridView {
|
||||
id: grid
|
||||
anchors.fill: parent
|
||||
anchors.margins: root.gridSpacing
|
||||
anchors {
|
||||
fill: parent
|
||||
margins: root.gridSpacing
|
||||
}
|
||||
cellWidth: 300
|
||||
cellHeight: 300
|
||||
delegate: pathGalleryDelegate
|
||||
model: pathGalleryModel
|
||||
delegate: Rectangle {
|
||||
id: gridDelegate
|
||||
|
||||
required property string name
|
||||
required property string shapeUrl
|
||||
|
||||
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(gridDelegate.shapeUrl)
|
||||
anchors.fill: parent
|
||||
}
|
||||
}
|
||||
Text {
|
||||
id: delegText
|
||||
text: gridDelegate.name
|
||||
font.pointSize: 16
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
}
|
||||
}
|
||||
}
|
||||
model: ListModel {
|
||||
ListElement {
|
||||
name: qsTr("Stroke and fill")
|
||||
shapeUrl: "tapableTriangle.qml"
|
||||
}
|
||||
ListElement {
|
||||
name: qsTr("Stroke or fill only")
|
||||
shapeUrl: "strokeOrFill.qml"
|
||||
}
|
||||
ListElement {
|
||||
name: qsTr("Dash pattern")
|
||||
shapeUrl: "linearGradient.qml"
|
||||
}
|
||||
ListElement {
|
||||
name: qsTr("Linear gradient")
|
||||
shapeUrl: "radialGradient.qml"
|
||||
}
|
||||
ListElement {
|
||||
name: qsTr("Radial gradient")
|
||||
shapeUrl: "dashPattern.qml"
|
||||
}
|
||||
ListElement {
|
||||
name: qsTr("Fill rules")
|
||||
shapeUrl: "fillRules.qml"
|
||||
}
|
||||
ListElement {
|
||||
name: qsTr("Join styles")
|
||||
shapeUrl: "joinStyles.qml"
|
||||
}
|
||||
ListElement {
|
||||
name: qsTr("Cap styles")
|
||||
shapeUrl: "capStyles.qml"
|
||||
}
|
||||
ListElement {
|
||||
name: qsTr("Quadratic curve")
|
||||
shapeUrl: "quadraticCurve.qml"
|
||||
}
|
||||
ListElement {
|
||||
name: qsTr("Cubic curve")
|
||||
shapeUrl: "cubicCurve.qml"
|
||||
}
|
||||
ListElement {
|
||||
name: qsTr("Elliptical arc")
|
||||
shapeUrl: "ellipticalArcs.qml"
|
||||
}
|
||||
ListElement {
|
||||
name: qsTr("Gradient spread modes")
|
||||
shapeUrl: "gradientSpreadModes.qml"
|
||||
}
|
||||
ListElement {
|
||||
name: qsTr("Arc direction")
|
||||
shapeUrl: "arcDirection.qml"
|
||||
}
|
||||
ListElement {
|
||||
name: qsTr("Large/small arc")
|
||||
shapeUrl: "largeOrSmallArc.qml"
|
||||
}
|
||||
ListElement {
|
||||
name: qsTr("Arc rotation")
|
||||
shapeUrl: "arcRotation.qml"
|
||||
}
|
||||
ListElement {
|
||||
name: qsTr("Tiger")
|
||||
shapeUrl: "tigerLoader.qml"
|
||||
}
|
||||
ListElement {
|
||||
name: qsTr("Text")
|
||||
shapeUrl: "text.qml"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Text {
|
||||
anchors.right: parent.right
|
||||
Shape { id: dummyShape; ShapePath { } } // used only to get the renderer type
|
||||
// used only to get the renderer type
|
||||
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]
|
||||
readonly property variant rendererStrings: [ qsTr("Unknown"), qsTr("Generic (QtGui triangulator)"), qsTr("GL_NV_path_rendering"), qsTr("Software (QPainter)") ]
|
||||
text: qsTr("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 }
|
||||
NumberAnimation {
|
||||
from: 1
|
||||
to: 0
|
||||
duration: 5000
|
||||
}
|
||||
PauseAnimation {
|
||||
duration: 5000
|
||||
}
|
||||
NumberAnimation {
|
||||
from: 0
|
||||
to: 1
|
||||
duration: 1000
|
||||
}
|
||||
PauseAnimation {
|
||||
duration: 5000
|
||||
}
|
||||
loops: Animation.Infinite
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,7 +6,8 @@ import QtQuick.Shapes
|
|||
|
||||
Rectangle {
|
||||
color: "lightGray"
|
||||
width: 256; height: 256
|
||||
width: 256
|
||||
height: 256
|
||||
|
||||
Shape {
|
||||
id: circ1
|
||||
|
|
@ -36,19 +37,21 @@ Rectangle {
|
|||
}
|
||||
}
|
||||
|
||||
property real r: 60
|
||||
readonly property real r: 60
|
||||
startX: circ1.width / 2 - r
|
||||
startY: circ1.height / 2 - r
|
||||
PathArc {
|
||||
x: circ1.width / 2 + p1.r
|
||||
y: circ1.height / 2 + p1.r
|
||||
radiusX: p1.r; radiusY: p1.r
|
||||
radiusX: p1.r
|
||||
radiusY: p1.r
|
||||
useLargeArc: true
|
||||
}
|
||||
PathArc {
|
||||
x: circ1.width / 2 - p1.r
|
||||
y: circ1.height / 2 - p1.r
|
||||
radiusX: p1.r; radiusY: p1.r
|
||||
radiusX: p1.r
|
||||
radiusY: p1.r
|
||||
useLargeArc: true
|
||||
}
|
||||
}
|
||||
|
|
@ -60,8 +63,16 @@ Rectangle {
|
|||
|
||||
SequentialAnimation on opacity {
|
||||
loops: Animation.Infinite
|
||||
NumberAnimation { from: 1.0; to: 0.0; duration: 5000 }
|
||||
NumberAnimation { from: 0.0; to: 1.0; duration: 5000 }
|
||||
NumberAnimation {
|
||||
from: 1.0
|
||||
to: 0.0
|
||||
duration: 5000
|
||||
}
|
||||
NumberAnimation {
|
||||
from: 0.0
|
||||
to: 1.0
|
||||
duration: 5000
|
||||
}
|
||||
}
|
||||
|
||||
ShapePath {
|
||||
|
|
@ -87,19 +98,21 @@ Rectangle {
|
|||
}
|
||||
}
|
||||
|
||||
property real r: 40
|
||||
readonly property real r: 40
|
||||
startX: circ2.width / 2 - r
|
||||
startY: circ2.height / 2 - r
|
||||
PathArc {
|
||||
x: circ2.width / 2 + p2.r
|
||||
y: circ2.height / 2 + p2.r
|
||||
radiusX: p2.r; radiusY: p2.r
|
||||
radiusX: p2.r
|
||||
radiusY: p2.r
|
||||
useLargeArc: true
|
||||
}
|
||||
PathArc {
|
||||
x: circ2.width / 2 - p2.r
|
||||
y: circ2.height / 2 - p2.r
|
||||
radiusX: p2.r; radiusY: p2.r
|
||||
radiusX: p2.r
|
||||
radiusY: p2.r
|
||||
useLargeArc: true
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -10,7 +10,9 @@ Rectangle {
|
|||
color: th.pressed ? "steelBlue" : "lightGray"
|
||||
containmentMask: ctr
|
||||
|
||||
TapHandler { id: th }
|
||||
TapHandler {
|
||||
id: th
|
||||
}
|
||||
|
||||
Shape {
|
||||
id: ctr
|
||||
|
|
@ -23,15 +25,35 @@ Rectangle {
|
|||
|
||||
SequentialAnimation on strokeWidth {
|
||||
loops: Animation.Infinite
|
||||
NumberAnimation { from: 1; to: 30; duration: 5000 }
|
||||
NumberAnimation { from: 30; to: 1; duration: 5000 }
|
||||
PauseAnimation { duration: 2000 }
|
||||
NumberAnimation {
|
||||
from: 1
|
||||
to: 30
|
||||
duration: 5000
|
||||
}
|
||||
NumberAnimation {
|
||||
from: 30
|
||||
to: 1
|
||||
duration: 5000
|
||||
}
|
||||
PauseAnimation {
|
||||
duration: 2000
|
||||
}
|
||||
}
|
||||
|
||||
startX: 30; startY: 30
|
||||
PathLine { x: ctr.width - 30; y: ctr.height - 30 }
|
||||
PathLine { x: 30; y: ctr.height - 30 }
|
||||
PathLine { x: 30; y: 30 }
|
||||
startX: 30
|
||||
startY: 30
|
||||
PathLine {
|
||||
x: ctr.width - 30
|
||||
y: ctr.height - 30
|
||||
}
|
||||
PathLine {
|
||||
x: 30
|
||||
y: ctr.height - 30
|
||||
}
|
||||
PathLine {
|
||||
x: 30
|
||||
y: 30
|
||||
}
|
||||
}
|
||||
|
||||
// Besides ShapePath, Shape supports visual and non-visual objects too, allowing
|
||||
|
|
|
|||
|
|
@ -20,7 +20,13 @@ Rectangle {
|
|||
strokeWidth: 1
|
||||
fillColor: "black"
|
||||
|
||||
PathText { x: 0; y: 0; font.family: "Arial"; font.pixelSize: 150; text: "Qt!" }
|
||||
PathText {
|
||||
x: 0
|
||||
y: 0
|
||||
text: qsTr("Qt!")
|
||||
font.family: "Arial"
|
||||
font.pixelSize: 150
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,10 +14,10 @@ Rectangle {
|
|||
|
||||
Text {
|
||||
anchors.centerIn: parent
|
||||
text: "Loading"
|
||||
text: qsTr("Loading")
|
||||
// Phase #1: Loader loads tiger.qml. After this we have our item.
|
||||
// Phase #2: With some backends (generic) the item will start async processing. Wait for this too.
|
||||
visible: shapeLoader.status != Loader.Ready || shapeLoader.item.status === Shape.Processing
|
||||
visible: shapeLoader.status != Loader.Ready || (shapeLoader.item as Shape)?.status === Shape.Processing
|
||||
}
|
||||
|
||||
Loader {
|
||||
|
|
|
|||
Loading…
Reference in New Issue