aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorUlf Hermann <ulf.hermann@qt.io>2019-09-27 17:01:27 +0200
committerUlf Hermann <ulf.hermann@qt.io>2019-10-02 11:20:05 +0200
commit291d118b0f4cc2f53e2fb8ca0778d421fcf5c845 (patch)
tree5c1d86b6039388215a50667a755e4e7cb61734f0
parentabc0fc64b3d797af4d47cd2f7e3df68a3114c120 (diff)
Examples: Avoid Qt.createQmlObject()
We don't want to encourage Qt.createQmlObject(). It's the equivalent of eval() in JavaScript. This has the added benefit that the shapes actually react to changes in the parameters now. Before, once a shape was drawn, it didn't get updated when you manipulated the line width or fill controls. Change-Id: I8d5b7598799b52043f86fd1f617e31de09331891 Reviewed-by: Simon Hausmann <simon.hausmann@qt.io> Reviewed-by: Fabian Kosmale <fabian.kosmale@qt.io>
-rw-r--r--examples/quick/shapes/content/interactive.qml113
1 files changed, 86 insertions, 27 deletions
diff --git a/examples/quick/shapes/content/interactive.qml b/examples/quick/shapes/content/interactive.qml
index 55a1d16299..78413db3f9 100644
--- a/examples/quick/shapes/content/interactive.qml
+++ b/examples/quick/shapes/content/interactive.qml
@@ -170,14 +170,45 @@ Rectangle {
property variant resizers: []
property variant funcs
+ property Component mouseArea: Component {
+ Rectangle {
+ id: rr
+
+ property variant obj
+ property string xprop
+ property string yprop
+
+ width: 20
+ height: 20
+
+ MouseArea {
+ property bool a: false
+
+ anchors.fill: parent
+ hoverEnabled: true
+ onEntered: color = "yellow"
+ onExited: color = rr.color
+ onPressed: a = true
+ onReleased: a = false
+ onPositionChanged: {
+ if (a) {
+ var pt = mapToItem(rr.parent, mouse.x, mouse.y);
+ rr.obj[rr.xprop] = pt.x
+ rr.obj[rr.yprop] = pt.y
+ rr.x = pt.x - 10
+ rr.y = pt.y - 10
+ }
+ }
+ }
+ }
+ }
+
function genResizer(obj, x, y, xprop, yprop, color) {
- var ma = Qt.createQmlObject('import QtQuick 2.9; import QtQuick.Shapes 1.0; Rectangle { id: rr; property variant obj; color: "' + color + '"; width: 20; height: 20;'+
- 'MouseArea { anchors.fill: parent; hoverEnabled: true;' +
- 'onEntered: color = "yellow"; onExited: color = "' + color + '";' +
- 'property bool a: false; onPressed: a = true; onReleased: a = false; ' +
- 'onPositionChanged: if (a) { var pt = mapToItem(rr.parent, mouse.x, mouse.y);' +
- 'obj.' + xprop + ' = pt.x; obj.' + yprop + ' = pt.y; rr.x = pt.x - 10; rr.y = pt.y - 10; } } }',
- canvas, "resizer_item");
+ var ma = mouseArea.createObject(canvas, {
+ color: color,
+ xprop: xprop,
+ yprop: yprop
+ });
ma.visible = root.showResizers;
ma.obj = obj;
ma.x = x - 10;
@@ -186,15 +217,55 @@ Rectangle {
return ma;
}
+ property Component linePath: Component {
+ ShapePath {
+ id: lineShapePath
+ strokeColor: "black"
+ strokeWidth: widthSlider.value
+ fillColor: "transparent"
+ PathLine {
+ x: lineShapePath.startX + 1
+ y: lineShapePath.startY + 1
+ }
+ }
+ }
+
+ property Component cubicPath: Component {
+ ShapePath {
+ id: cubicShapePath
+ strokeColor: "black"
+ strokeWidth: widthSlider.value
+ fillColor: root.fill ? 'green' : 'transparent'
+ PathCubic {
+ x: cubicShapePath.startX + 1
+ y: cubicShapePath.startY + 1
+ control1X: cubicShapePath.startX + 50;
+ control1Y: cubicShapePath.startY + 50;
+ control2X: cubicShapePath.startX + 150;
+ control2Y: cubicShapePath.startY + 50;
+ }
+ }
+ }
+
+ property Component quadPath: Component {
+ ShapePath {
+ id: quadShapePath
+ strokeColor: "black"
+ strokeWidth: widthSlider.value
+ fillColor: root.fill ? 'green' : 'transparent'
+ PathQuad {
+ x: quadShapePath.startx + 1
+ y: quadShapePath.startY + 1
+ controlX: quadShapePath.startX + 50
+ controlY: quadShapePath.startY + 50
+ }
+ }
+ }
+
Component.onCompleted: {
funcs = [
{ "start": function(x, y) {
- var p = Qt.createQmlObject('import QtQuick 2.9; import QtQuick.Shapes 1.0; ShapePath {' +
- 'strokeColor: "black"; fillColor: "transparent";'+
- 'strokeWidth: ' + widthSlider.value + ';' +
- 'startX: ' + x + '; startY: ' + y + ';' +
- 'PathLine { x: ' + x + ' + 1; y: ' + y + ' + 1 } }',
- root, "dynamic_visual_path");
+ var p = linePath.createObject(root, { startX: x, startY: y });
shape.data.push(p);
activePath = p;
}, "move": function(x, y) {
@@ -211,13 +282,7 @@ Rectangle {
}
},
{ "start": function(x, y) {
- var p = Qt.createQmlObject('import QtQuick 2.9; import QtQuick.Shapes 1.0; ShapePath {' +
- 'strokeColor: "black"; fillColor: "' + (root.fill ? 'green' : 'transparent') + '";'+
- 'strokeWidth: ' + widthSlider.value + ';' +
- 'startX: ' + x + '; startY: ' + y + ';' +
- 'PathCubic { x: ' + x + ' + 1; y: ' + y + ' + 1;' +
- 'control1X: ' + x + ' + 50; control1Y: ' + y + ' + 50; control2X: ' + x + ' + 150; control2Y: ' + y + ' + 50; } }',
- root, "dynamic_visual_path");
+ var p = cubicPath.createObject(root, { startX: x, startY: y });
shape.data.push(p);
activePath = p;
}, "move": function(x, y) {
@@ -236,13 +301,7 @@ Rectangle {
}
},
{ "start": function(x, y) {
- var p = Qt.createQmlObject('import QtQuick 2.9; import QtQuick.Shapes 1.0; ShapePath {' +
- 'strokeColor: "black"; fillColor: "' + (root.fill ? 'green' : 'transparent') + '";'+
- 'strokeWidth: ' + widthSlider.value + ';' +
- 'startX: ' + x + '; startY: ' + y + ';' +
- 'PathQuad { x: ' + x + ' + 1; y: ' + y + ' + 1;' +
- 'controlX: ' + x + ' + 50; controlY: ' + y + ' + 50 } }',
- root, "dynamic_visual_path");
+ var p = quadPath.createObject(root, { startX: x, startY: y });
shape.data.push(p);
activePath = p;
}, "move": function(x, y) {