aboutsummaryrefslogtreecommitdiffstats
path: root/examples
diff options
context:
space:
mode:
Diffstat (limited to 'examples')
-rw-r--r--examples/quick/shapes/interactive.qml422
1 files changed, 163 insertions, 259 deletions
diff --git a/examples/quick/shapes/interactive.qml b/examples/quick/shapes/interactive.qml
index 015149c51d..dc3489ee2d 100644
--- a/examples/quick/shapes/interactive.qml
+++ b/examples/quick/shapes/interactive.qml
@@ -50,308 +50,212 @@
import QtQuick
import QtQuick.Controls
+import QtQuick.Layouts
import QtQuick.Shapes
Rectangle {
id: root
width: 1024
height: 768
+ color: palette.window
- 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") }
- }
-
- property int mode: 0
- property bool showResizers: true
- property bool fill: false
-
- Row {
+ RowLayout {
+ id: topRow
x: 20
y: 10
spacing: 20
- Button {
- id: radioButton1
- checked: true
- text: qsTr("Line")
- onPressed: () => { root.mode = 0 }
-
- width: 100
- height: 40
-
- background: Rectangle {
- border.color: "black"
- color: root.mode === 0 ? "red" : "transparent"
- anchors.fill: parent
- }
+ ButtonGroup {
+ id: toolButtons
+ buttons: drawingTools.children
}
- Button {
- text: qsTr("Cubic")
- onPressed: () => { root.mode = 1 }
-
- width: 100
- height: 40
-
- background: Rectangle {
- border.color: "black"
- color: root.mode === 1 ? "red" : "transparent"
- anchors.fill: parent
- }
- }
-
- Button {
- text: qsTr("Quadratic")
- onPressed: () => { root.mode = 2 }
-
- width: 100
- height: 40
-
- background: Rectangle {
- border.color: "black"
- color: root.mode === 2 ? "red" : "transparent"
- anchors.fill: parent
+ RowLayout {
+ id: drawingTools
+ ToolButton {
+ text: qsTr("Line")
+ checkable: true
+ checked: true
+
+ property Component shapeType: Component {
+ ShapePath {
+ id: lineShapePath
+ strokeColor: root.palette.windowText
+ strokeWidth: widthSlider.value
+ fillColor: "transparent"
+ PathLine {
+ id: pathSegment
+ x: lineShapePath.startX + 1
+ y: lineShapePath.startY + 1
+ }
+ function finishCreation() {
+ createStartEndHandles(this, pathSegment);
+ }
+ }
+ }
}
- }
-
- Row {
- anchors.verticalCenter: radioButton1.verticalCenter
- spacing: 12
-
- Label {
- text: qsTr("Width:")
- anchors.verticalCenter: widthSlider.verticalCenter
+ ToolButton {
+ text: qsTr("Quadratic")
+ checkable: true
+
+ property Component shapeType: Component {
+ ShapePath {
+ id: quadShapePath
+ strokeColor: root.palette.windowText
+ strokeWidth: widthSlider.value
+ fillColor: fillSwitch.checked ? "green" : "transparent"
+ PathQuad {
+ id: pathSegment
+ x: quadShapePath.startx + 1
+ y: quadShapePath.startY + 1
+ controlX: quadShapePath.startX + 50
+ controlY: quadShapePath.startY + 50
+ }
+ function finishCreation() {
+ createStartEndHandles(this, pathSegment);
+ pointDragHandle.createObject(canvas, {
+ idleColor: "blue",
+ target: pathSegment, xprop: "controlX", yprop: "controlY"
+ });
+ }
+ }
+ }
}
- Slider {
- id: widthSlider
- from: 1
- to: 60
- value: 4
-
- anchors.verticalCenter: parent.verticalCenter
+ ToolButton {
+ text: qsTr("Cubic")
+ checkable: true
+
+ property Component shapeType: Component {
+ ShapePath {
+ id: cubicShapePath
+ strokeColor: root.palette.windowText
+ strokeWidth: widthSlider.value
+ fillColor: fillSwitch.checked ? "green" : "transparent"
+ PathCubic {
+ id: pathSegment
+ x: cubicShapePath.startX + 1
+ y: cubicShapePath.startY + 1
+ control1X: cubicShapePath.startX + 50;
+ control1Y: cubicShapePath.startY + 50;
+ control2X: cubicShapePath.startX + 150;
+ control2Y: cubicShapePath.startY + 50;
+ }
+ function finishCreation() {
+ createStartEndHandles(this, pathSegment);
+ pointDragHandle.createObject(canvas, {
+ idleColor: "blue",
+ target: pathSegment, xprop: "control1X", yprop: "control1Y"
+ });
+ pointDragHandle.createObject(canvas, {
+ idleColor: "lightBlue",
+ target: pathSegment, xprop: "control2X", yprop: "control2Y"
+ });
+ }
+ }
+ }
}
}
- Button {
- text: qsTr("Manip")
- onPressed: () => {
- root.showResizers = !root.showResizers;
- for (var i = 0; i < canvas.resizers.length; ++i)
- canvas.resizers[i].visible = root.showResizers;
- }
-
- width: 50
- height: 40
+ Label {
+ text: qsTr("Width")
+ }
+ Slider {
+ id: widthSlider
+ from: 1
+ to: 60
+ value: 4
+ }
- background: Rectangle {
- border.color: "black"
- color: root.showResizers ? "yellow" : "transparent"
- anchors.fill: parent
- }
+ Switch {
+ id: showHandlesSwitch
+ text: qsTr("Handles")
}
- Button {
+ Switch {
+ id: fillSwitch
text: qsTr("Fill")
- onPressed: () => {
- root.fill = !root.fill
- }
-
- width: 50
- height: 40
-
- background: Rectangle {
- border.color: "black"
- color: root.fill ? "yellow" : "transparent"
- anchors.fill: parent
- }
}
}
- Rectangle {
- id: canvas
- width: root.width - 40
- height: root.height - 120
- x: 20
- y: 100
+ Component {
+ id: pointDragHandle
- property variant activePath: null
+ Rectangle {
+ id: rect
+ property variant target
+ property string xprop
+ property string yprop
+ property color idleColor: "red"
- property variant resizers: []
- property variant funcs
+ width: 20
+ height: width
+ visible: showHandlesSwitch.checked
+ color: hh.hovered ? "yellow" : idleColor
+ border.color: "grey"
- property Component mouseArea: Component {
- Rectangle {
- id: rr
+ 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 }
- 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: (mouse)=> {
- 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
- }
- }
- }
- }
- }
+ DragHandler { }
- function genResizer(obj, x, y, xprop, yprop, color) {
- var ma = mouseArea.createObject(canvas, {
- color: color,
- xprop: xprop,
- yprop: yprop
- });
- ma.visible = root.showResizers;
- ma.obj = obj;
- ma.x = x - 10;
- ma.y = y - 10;
- resizers.push(ma);
- return ma;
- }
+ HoverHandler { id: hh }
- property Component linePath: Component {
- ShapePath {
- id: lineShapePath
- strokeColor: "black"
- strokeWidth: widthSlider.value
- fillColor: "transparent"
- PathLine {
- x: lineShapePath.startX + 1
- y: lineShapePath.startY + 1
- }
+ Component.onCompleted: {
+ x = target[xprop] - halfWidth;
+ y = target[yprop] - halfWidth;
+ complete = true;
}
}
+ }
- 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;
- }
- }
- }
+ function createStartEndHandles(shapePath, pathSegment) {
+ pointDragHandle.createObject(canvas, {
+ idleColor: "red",
+ target: shapePath, xprop: "startX", yprop: "startY"
+ });
+ pointDragHandle.createObject(canvas, {
+ idleColor: "red",
+ target: pathSegment, xprop: "x", yprop: "y"
+ });
+ }
- 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
+ Rectangle {
+ id: canvas
+ color: palette.base
+ width: root.width - 40
+ height: root.height - y - 20
+ x: 20
+ anchors.top: topRow.bottom
+ anchors.topMargin: 20
+
+ DragHandler {
+ target: null
+ grabPermissions: DragHandler.TakeOverForbidden
+ property ShapePath activePath: null
+ onActiveChanged: {
+ const tool = toolButtons.checkedButton;
+ if (active) {
+ activePath = tool.shapeType.createObject(root, {
+ startX: centroid.position.x, startY: centroid.position.y
+ });
+ shape.data.push(activePath);
+ } else {
+ activePath.finishCreation();
+ activePath = null;
}
}
- }
-
- Component.onCompleted: {
- funcs = [
- { "start": function(x, y) {
- var p = linePath.createObject(root, { startX: x, startY: y });
- shape.data.push(p);
- activePath = p;
- }, "move": function(x, y) {
- if (!activePath)
- return;
- var pathObj = activePath.pathElements[0];
- pathObj.x = x;
- pathObj.y = y;
- }, "end": function() {
- canvas.genResizer(activePath, activePath.startX, activePath.startY, "startX", "startY", "red");
- var pathObj = activePath.pathElements[0];
- canvas.genResizer(pathObj, pathObj.x, pathObj.y, "x", "y", "red");
- activePath = null;
- }
- },
- { "start": function(x, y) {
- var p = cubicPath.createObject(root, { startX: x, startY: y });
- shape.data.push(p);
- activePath = p;
- }, "move": function(x, y) {
- if (!activePath)
- return;
- var pathObj = activePath.pathElements[0];
- pathObj.x = x;
- pathObj.y = y;
- }, "end": function() {
- canvas.genResizer(activePath, activePath.startX, activePath.startY, "startX", "startY", "red");
- var pathObj = activePath.pathElements[0];
- canvas.genResizer(pathObj, pathObj.x, pathObj.y, "x", "y", "red");
- canvas.genResizer(pathObj, pathObj.control1X, pathObj.control1Y, "control1X", "control1Y", "blue");
- canvas.genResizer(pathObj, pathObj.control2X, pathObj.control2Y, "control2X", "control2Y", "lightBlue");
- activePath = null;
- }
- },
- { "start": function(x, y) {
- var p = quadPath.createObject(root, { startX: x, startY: y });
- shape.data.push(p);
- activePath = p;
- }, "move": function(x, y) {
- if (!activePath)
- return;
- var pathObj = activePath.pathElements[0];
- pathObj.x = x;
- pathObj.y = y;
- }, "end": function() {
- canvas.genResizer(activePath, activePath.startX, activePath.startY, "startX", "startY", "red");
- var pathObj = activePath.pathElements[0];
- canvas.genResizer(pathObj, pathObj.x, pathObj.y, "x", "y", "red");
- canvas.genResizer(pathObj, pathObj.controlX, pathObj.controlY, "controlX", "controlY", "blue");
- activePath = null;
- }
- }
- ];
- }
-
- MouseArea {
- anchors.fill: parent
- onPressed: (mouse)=> {
- canvas.funcs[root.mode].start(mouse.x, mouse.y);
- }
- onPositionChanged: (mouse)=> {
- canvas.funcs[root.mode].move(mouse.x, mouse.y);
- }
- onReleased: {
- canvas.funcs[root.mode].end();
+ onCentroidChanged: if (activePath) {
+ var pathObj = activePath.pathElements[0];
+ pathObj.x = centroid.position.x;
+ pathObj.y = centroid.position.y;
}
}
Shape {
id: shape
anchors.fill: parent
-
- data: []
}
}
}
generated by cgit v1.2.3 (git 2.25.1) at 2024-05-25 22:43:18 +0000