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);
        }
    }    
}

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);
        }
    }    
}

To copy to clipboard, switch view to plain text mode 

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.


download.jpg

[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");
            }
        }
    }
}

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");
            }
        }
    }
}

To copy to clipboard, switch view to plain text mode 

[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.