Qml Node Action
-
Hi all, I have a draggable node which I extract from first block with mouse, And for example I will release it on the second block. As soon as I release it, I want the program to do some action, let say it can give me "Hello World". How can I achieve this? Here is the code and image from the output.
import QtQuick 2.3
import QtQuick.Controls 1.2
import QtQuick.Extras 1.4
import QtQuick.Window 2.2
import QtPositioning 5.5ApplicationWindow {
id: window
visible: true
width: 1000
height: 480
title: qsTr("Node Demo")
property var aNumber: 100
menuBar: MenuBar {
Menu {
title: qsTr("File")
MenuItem {
text: qsTr("Exit")
onTriggered: Qt.quit();
}
}
}Item { id: node_edit x: 0 y: 0 width: window.width height: window.height Canvas { id: spline_canvas width: node_edit.width height: node_edit.height onPaint:{ function do_spline(x1, y1, x2, y2, context) { context.moveTo(x1, y1); if(x1>x2) { context.bezierCurveTo((x1-x2)+x1,y1,x2-(x1-x2),y2, x2, y2); } else { context.bezierCurveTo((x1+x2)/2,y1,(x1+x2)/2, y2, x2, y2); } } var ctx = spline_canvas.getContext("2d"); ctx.clearRect(0, 0, spline_canvas.width, spline_canvas.height); ctx.strokeStyle = Qt.rgba(0, 0, 0, 1); ctx.lineWidth = 1; ctx.beginPath(); // num1 -> sum1 do_spline(num1_out1.x+num1.x+16, num1.y+num1_out1.y+34, node.x+5, node.y+8, ctx); ctx.stroke(); } } Rectangle { id: num1 x: 40 y: 34 width: 130 height: 58 //first block color: "lightblue" Drag.active: num1_drag_area.drag.active Drag.hotSpot.x: 130/2 Drag.hotSpot.y: 58/2 onXChanged: { spline_canvas.requestPaint(); } onYChanged: { spline_canvas.requestPaint() } MouseArea { id: num1_drag_area x: 0 y: 0 width: 130 height: 58 drag.target: parent } GroupBox { id: num1_group x: 0 y: 0 width: num1.width height: num1.height title: qsTr("FirstBlock") RadioButton { id: num1_out1 x: 112 y: 3 text: qsTr("") enabled: false clip: true visible: true checked: true activeFocusOnPress: false } RadioButton { id: sum1_in4 x: -18 y: 0 enabled: false checked: true } } } Rectangle{ id:node width: 15 height: 15 x:160 y:64 Drag.active: sum1_drag_area.drag.active onXChanged: { spline_canvas.requestPaint(); } onYChanged: { spline_canvas.requestPaint(); } MouseArea { id: sum1_drag_area22 x: 0 y: 0 width: parent.width height: parent.height drag.target: parent } RadioButton { id: sum1_in1 x: 0 y: 0 enabled: false checked: true
}
} Rectangle { id: num2 x: 40 y: 114 width: 130 height: 58 //title: qsTr("Number") color: "lightblue" Drag.active: num2_drag_area.drag.active Drag.hotSpot.x: 130/2 Drag.hotSpot.y: 58/2 onXChanged: { spline_canvas.requestPaint(); } onYChanged: { spline_canvas.requestPaint(); } MouseArea { id: num2_drag_area x: 0 y: 0 width: 130 height: 58 drag.target: parent } GroupBox { id: num2_group x: 0 y: 0 width: num2.width height: num2.height title: qsTr("SecondBlock") RadioButton { id: num2_out1 x: 112 y: 3 text: qsTr("") enabled: false clip: true visible: true checked: true activeFocusOnPress: false } } } }
}
-
hi,
@Yunus said in Qml Node Action:As soon as I release it, I want the program to do some action
Mousearea has released signal
so you can call what you need like this :onReleased : {/* call() */}
example will check if 'node' is inside 'num2' when you release it, hope it can help
import QtQuick 2.3 import QtQuick.Controls 1.2 import QtQuick.Extras 1.4 import QtQuick.Window 2.2 import QtPositioning 5.5 ApplicationWindow { id: window visible: true width: 1000 height: 480 title: qsTr("Node Demo") property var aNumber: 100 Item { id: node_edit width: window.width height: window.height Canvas { id: spline_canvas width: node_edit.width height: node_edit.height onPaint:{ function do_spline(x1, y1, x2, y2, context) { context.moveTo(x1, y1); if(x1>x2) { context.bezierCurveTo((x1-x2)+x1,y1,x2-(x1-x2),y2, x2, y2); } else { context.bezierCurveTo((x1+x2)/2,y1,(x1+x2)/2, y2, x2, y2); } } var ctx = spline_canvas.getContext("2d"); ctx.clearRect(0, 0, spline_canvas.width, spline_canvas.height); ctx.strokeStyle = Qt.rgba(0, 0, 0, 1); ctx.lineWidth = 1; ctx.beginPath(); // num1 -> sum1 do_spline(num1_out1.x+num1.x+16, num1.y+num1_out1.y+34, node.x+5, node.y+8, ctx); ctx.stroke(); } } Rectangle { id: num1 x: 40 y: 34 width: 130 height: 58 //first block color: "lightblue" Drag.active: num1_drag_area.drag.active Drag.hotSpot.x: 130/2 Drag.hotSpot.y: 58/2 onXChanged: { spline_canvas.requestPaint(); } onYChanged: { spline_canvas.requestPaint() } MouseArea { id: num1_drag_area drag.target: parent anchors.fill: parent } GroupBox { id: num1_group x: 0 y: 0 width: num1.width height: num1.height title: qsTr("FirstBlock") RadioButton { id: num1_out1 x: 112 y: 3 text: qsTr("") enabled: false clip: true visible: true checked: true activeFocusOnPress: false } RadioButton { id: sum1_in4 x: -18 y: 0 enabled: false checked: true } } } Rectangle{ id:node width: 15 height: 15 // Drag.active: sum1_drag_area.drag.active onXChanged: { spline_canvas.requestPaint(); } onYChanged: { spline_canvas.requestPaint(); } MouseArea { id: sum1_drag_area22 drag.target: parent anchors.fill: parent // this can be done better manner (MouseArea has 'containsMouse' property ), but here is a version witout changing your structure/encapsulation function isInside(e, where){ if(e.x>=where.x&&e.x<=(where.x+where.width) && e.y>=where.y&& e.y<=(where.y+where.height)){ return true }else{ return false } } onMouseXChanged: { if(isInside(node,num2)){ num2.color= "darkblue" }else{ num2.color= "lightblue" } } onReleased: { console.log("Released") if(isInside(node,num2)){ console.log("Released inside num2") } } } RadioButton { id: sum1_in1 enabled: false checked: true } } Rectangle { id: num2 width: 130 height: 58 color: "lightblue" Drag.active: num2_drag_area.drag.active Drag.hotSpot.x: 130/2 Drag.hotSpot.y: 58/2 onXChanged: { spline_canvas.requestPaint(); } onYChanged: { spline_canvas.requestPaint(); } MouseArea { id: num2_drag_area anchors.fill: parent drag.target: parent hoverEnabled: true // > enable hovering } GroupBox { id: num2_group x: 0 y: 0 width: num2.width height: num2.height title: qsTr("SecondBlock") RadioButton { id: num2_out1 x: 112 y: 3 text: qsTr("") enabled: false clip: true visible: true checked: true activeFocusOnPress: false } } } } }
note : please use topic tool to properly past your code.
not really related but you can see Qt Quick - Positioning to avoid manual positioning