Dynamic rectangle on mouse press and release in QML

[jakr13]

Hi Everyone,

I am a newbie to QML and I wanted to select some rectangle ROI's in an Image. I am getting co-ordinates during mouse press and release event. Now, I need to start drawing a rectangle during mouse press event and end the rectangle during mouse release event. I have done this using Qt Widgets application, but I was thinking to implement the same in QML. Can someone guide me to implement this.

Here's my code




import QtQuick 1.1

Rectangle {
id:imageRect
width: 300
height: 300

property int pressX
property int pressY
property int releaseX
property int releaseY


Image{
id:imagetoshow
source:"file:///C://Users//Jakr13//Desktop//testimage.bmp"
}

MouseArea {
id:roiRectArea
anchors.fill: parent

onPressed: {
pressX = mouse.x
pressY = mouse.y
console.log("Pressed Co-ordinates",pressX,pressY);
}

onReleased: {
releaseX = mouse.x
releaseY = mouse.y
console.log("Released Co-ordinates",releaseX,releaseY);
}
}
}



Please feel free to point if there is anything wrong with my code or the way I am implementing is completely wrong.

Thanks in advance

Jakr13

[anda_skoa]

The geometry values of your rectangle are fixed and do not use the values you get from the mouse.

Cheers,
_

[jakr13]

Hi anda_skoa,

Thanks for your reply. The fixed geometry is for displaying the image, and I have to draw rectangles over the image based on mouse press and release events like we can say QRubberband in Qt widgets. Please check the image attached. The border with green has fixed geometry and I have to draw ROI's like red ones.


11538

[wysota]

What is this code supposed to do? You're not drawing any rectangles using those coordinates.

[jakr13]

Hi Wysota,

I apologize for not being clear in my question. I didn't implement to draw rectangle yet using those co-ordinates and I dont know how to do that. Suggestions on how to implement that or a sample code will be helpful for me to understand.

[anda_skoa]

Create a rectangle element that is a sibling or child of the mouse area, use the value to determine the rectangle's geometry.

Cheers,
_

[jakr13]

I created a rectangle and passed the co-ordinates to draw a rectangle. Now its like when release mouse, a rectangle will be drawn, But I need to implement like, when a press mouse, I should start drawing rectangle and when I release mouse I should end the rectangle. Any suggestions?



import QtQuick 1.1

Rectangle {
id:imageRect
width: 1920
height: 988

property int pressX
property int pressY
property int releaseX
property int releaseY
property int widthRect
property int heightRect


Image{
id:imagetoshow
source:"file:///C://Users//Jakr13//Desktop//test1.bmp"
}

MouseArea {
id:roiRectArea
anchors.fill: parent
acceptedButtons: Qt.LeftButton

onPressed: {

pressX = mouse.x
pressY = mouse.y
console.log("Pressed Co-ordinates",pressX,pressY);
}

onReleased: {
releaseX = mouse.x
releaseY = mouse.y
console.log("Released Co-ordinates",releaseX,releaseY);
widthRect = releaseX - pressX
heightRect = releaseY - pressY
console.log("width, height:",widthRect,heightRect);

}
}

Rectangle {
id:rectRoi
opacity: 0.4
x: pressX
y: pressY
width: widthRect
height: heightRect
color: "#ffffff"

MouseArea {
id:roiarea
anchors.fill: parent
acceptedButtons: Qt.RightButton

onClicked:{

console.log("Right Button Clicked");
}
}
}
}

[anda_skoa]

MouseArea onPositionChanged signal handler

Cheers,
_

[jakr13]

Thanks anda_skoa, I got it working, I had MouseArea onPositionChanged Signal and component of Rectangle within the rectangle.