diff options
author | Ulf Hermann <ulf.hermann@qt.io> | 2019-09-27 17:01:27 +0200 |
---|---|---|
committer | Ulf Hermann <ulf.hermann@qt.io> | 2019-10-02 11:20:05 +0200 |
commit | 291d118b0f4cc2f53e2fb8ca0778d421fcf5c845 (patch) | |
tree | 5c1d86b6039388215a50667a755e4e7cb61734f0 | |
parent | abc0fc64b3d797af4d47cd2f7e3df68a3114c120 (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.qml | 113 |
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) { |