159 lines
4.6 KiB
QML
159 lines
4.6 KiB
QML
import QtQuick
|
|
import QtQuick.Shapes
|
|
|
|
Rectangle {
|
|
width: 320
|
|
height: 480
|
|
|
|
ListModel {
|
|
id: renderers
|
|
ListElement { renderer: Shape.GeometryRenderer }
|
|
ListElement { renderer: Shape.CurveRenderer }
|
|
}
|
|
|
|
Row {
|
|
padding: 10
|
|
spacing: 20
|
|
Repeater {
|
|
model: renderers
|
|
Rectangle {
|
|
width: 140
|
|
height: 400
|
|
color: "lightgray"
|
|
|
|
property int step: 0
|
|
NumberAnimation on step {
|
|
to: 3
|
|
duration: 300
|
|
}
|
|
|
|
onStepChanged: {
|
|
var d;
|
|
|
|
// Remove first
|
|
d = shapes.itemAt(0).data;
|
|
d.splice(0, d.length).slice(1).map(x => d.push(x));
|
|
|
|
// Remove first, leave one
|
|
if (step < 3) {
|
|
d = shapes.itemAt(1).data;
|
|
d.splice(0, d.length).slice(1).map(x => d.push(x));
|
|
}
|
|
|
|
// Remove last
|
|
d = shapes.itemAt(2).data;
|
|
d.pop();
|
|
|
|
// Remove last, leave one
|
|
if (step < 3) {
|
|
d = shapes.itemAt(3).data;
|
|
d.pop();
|
|
}
|
|
|
|
// Remove middle
|
|
if (step === 1) {
|
|
d = shapes.itemAt(4).data;
|
|
d.splice(0, d.length).filter((p) => p.objectName != "Green2").map(x => d.push(x));
|
|
}
|
|
|
|
// Remove all
|
|
if (step === 1) {
|
|
d = shapes.itemAt(5).data;
|
|
d.length = 0;
|
|
}
|
|
|
|
// Remove all, then add
|
|
d = shapes.itemAt(6).data;
|
|
if (step === 1)
|
|
d.length = 0;
|
|
else if (step === 2)
|
|
d.push(new1);
|
|
|
|
// Replace one, leaving list same length
|
|
if (step === 1) {
|
|
d = shapes.itemAt(7).data;
|
|
d.pop();
|
|
d.push(new2);
|
|
}
|
|
|
|
//print("Objects left:", d.map(p => p.objectName));
|
|
}
|
|
|
|
ShapePath {
|
|
id: new1
|
|
objectName: "Orange1"
|
|
fillColor: "orange"
|
|
|
|
PathRectangle {
|
|
height: 30
|
|
width: 30
|
|
x: 0
|
|
y: 0
|
|
}
|
|
}
|
|
|
|
ShapePath {
|
|
id: new2
|
|
objectName: "Black1"
|
|
fillColor: "black"
|
|
|
|
PathRectangle {
|
|
height: 30
|
|
width: 30
|
|
x: 80
|
|
y: 0
|
|
}
|
|
}
|
|
|
|
Repeater {
|
|
id: shapes
|
|
model: 8
|
|
|
|
Shape {
|
|
width: parent.width
|
|
x: 10
|
|
y: 10 + 40 * index
|
|
preferredRendererType: renderer
|
|
|
|
ShapePath {
|
|
objectName: "Red1"
|
|
fillColor: "red"
|
|
|
|
PathRectangle {
|
|
height: 30
|
|
width: 30
|
|
x: 0
|
|
y: 0
|
|
}
|
|
}
|
|
ShapePath {
|
|
objectName: "Green2"
|
|
fillColor: "green"
|
|
|
|
PathRectangle {
|
|
height: 30
|
|
width: 30
|
|
radius: 5
|
|
x: 40
|
|
y: 0
|
|
}
|
|
}
|
|
ShapePath {
|
|
objectName: "Blue3"
|
|
fillColor: "blue"
|
|
|
|
PathRectangle {
|
|
height: 30
|
|
width: 30
|
|
radius: width / 2
|
|
x: 80
|
|
y: 0
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|