Draw rectangle using mouse QML - qt

Question

I'm creating a wave form using QML 2.0.
I would like to know how I can draw rectangle starting when the user clicks on the waveform and ends when user releases mouse button.
I need something like the yellow rectangle.
I tried with Canvas but isn't working properly.
Can you help me?
Canvas {
property int prevX
property int prevY
property int hh:wave.height
property int lineWidth: 2
property color drawColor: "red"
id:mycanvas
height: 200
width: 2000
MouseArea {
id:mousearea
anchors.fill: parent
cursorShape:Qt.PointingHandCursor
onPositionChanged: mycanvas.requestPaint();
onPressed: {
prevX = mouse.x;
prevY = mouse.y
var mousePosition = mouse.x / mousearea.width;
wave.zoomOut(mousePosition);
console.log("QML: ZoomStart mousePosition " + mousePosition)
}
onReleased: {
var mousePosition = mouse.x / mousearea.width;
console.log("QML: ZoomFinish mousePosition " + mousePosition)
wave.zoomOut2(mousePosition);
}
}
onPaint: {
var ctx = getContext('2d');
ctx.beginPath();
ctx.fillStyle = "#000000"
ctx.globalAlpha = 0.05
ctx.fillRect(prevX, 0, mousearea.mouseX-prevX,mainRectangle.height/4.5);
ctx.stroke();
ctx.restore();
}
}

Answer 1

What I would do is instanciate a QtQuick Rectangle dynamically and set its visual properties in the same time :
Just put this a a children of your 'wave graph' component :
MouseArea {
id: selectArea;
anchors.fill: parent;
onPressed: {
if (highlightItem !== null) {
// if there is already a selection, delete it
highlightItem.destroy ();
}
// create a new rectangle at the wanted position
highlightItem = highlightComponent.createObject (selectArea, {
"x" : mouse.x
});
// here you can add you zooming stuff if you want
}
onPositionChanged: {
// on move, update the width of rectangle
highlightItem.width = (Math.abs (mouse.x - highlightItem.x));
}
onReleased: {
// here you can add you zooming stuff if you want
}
property Rectangle highlightItem : null;
Component {
id: highlightComponent;
Rectangle {
color: "yellow";
opacity; 0.35;
anchors {
top: parent.top;
bottom: parent.bottom;
}
}
}
}
That should do the trick !

Answer 2

I fixed the rectangle to be drawn even when the mouse drag position is not from left to right down. Hope it helps others.
Rectangle {
color: "transparent"
MouseArea {
id: selectArea
anchors.fill: parent
property Rectangle highlightItem : null;
property real startX
property real startY
onPressed: (mouse) => {
if (highlightItem !== null) {
// if there is already a selection, delete it
highlightItem.destroy ();
}
// create a new rectangle at the wanted position
highlightItem = highlightComponent.createObject (selectArea, {
"x" : mouseX,
"y" : mouseY,
});
startX = mouseX;
startY = mouseY;
}
onPositionChanged: (mouse) => {
// on move, update the width of rectangle
if (mouseX - startX < 0 ) {
highlightItem.x = mouseX;
}
if (mouseY - startY < 0) {
highlightItem.y = mouseY;
}
highlightItem.width = (Math.abs (mouseX - startX));
highlightItem.height = (Math.abs (mouseY - startY));
}
onReleased: {
}
Component {
id: highlightComponent;
Rectangle {
color: "#0D0080FF"
border.width: 1
border.color: "#fff"
}
}
}
}