dynamic circle instead of rectangle on mouse press and release event

[jakr13]

Hi Everyone,

I had a post few days back http://http://www.qtcentre.org/threa...release-in-QML to draw a dynamic rectangle on mouse press and release event.

I am using QtQuick1.1. Now instead of drawing rectangle dynamically on mouse press and release event, I want to draw a circle. any suggesstion will be highly appreciated.

Thanksin advance
jakr13

[anda_skoa]

Two options:

- a Rectangle with equal width/height and a radius half that value
- a custom item

Cheers,
_

[jakr13]

Hi anda_skoa,

I went with the first method that you have mentioned and its working. Here is my code

import QtQuick 1.1
 
Rectangle {
    id:referenceImageRect
    width: 300
    height: 300
 
    property int pressX
    property int pressY
    property int releaseX
    property int releaseY
 
    Image{
        id:referenceImage
        source:"file:///C://Users//Jakr13//Desktop//test.bmp"
    }
 
    MouseArea {
        id:referenceImageRoiarea
        anchors.fill: parent
        acceptedButtons: Qt.LeftButton
 
        onPressed: {
            pressX = mouse.x
            pressY = mouse.y
            console.log("Pressed Co-ordinates",pressX,pressY);
 
            if (referenceRoi !== null) {
                        referenceRoi.destroy();
            }
            referenceRoi = referenceRoiRect.createObject (referenceImageRoiarea, {"x" : pressX , "y" :pressY});
        }
 
        onPositionChanged: {
            referenceRoi.width = (Math.abs (mouse.x - referenceRoi.x));
            referenceRoi.height = (Math.abs(mouse.y - referenceRoi.y));
        }
 
        onReleased: {
            releaseX = mouse.x
            releaseY = mouse.y
            console.log("Released Co-ordinates",releaseX,releaseY);
 
        }
    }
 
    property Rectangle referenceRoi : null;
 
    Component {
         id: referenceRoiRect;
 
         Rectangle {
             id: rectroi
             color: "red";
             opacity: 0.7;
             x: pressX
             y: pressY
             width: releaseX - pressX;
             height: releaseY - pressY;
             radius: rectroi.width/2;
 
             MouseArea {
                id:roiArea
                anchors.fill: parent
                acceptedButtons: Qt.RightButton
                hoverEnabled: true
 
                onClicked: {
                        console.log("Context menu");
                }
           }
        }
    }
 
}

import QtQuick 1.1

Rectangle {
    id:referenceImageRect
    width: 300
    height: 300

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

    Image{
        id:referenceImage
        source:"file:///C://Users//Jakr13//Desktop//test.bmp"
    }

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

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

            if (referenceRoi !== null) {
                        referenceRoi.destroy();
            }
            referenceRoi = referenceRoiRect.createObject (referenceImageRoiarea, {"x" : pressX , "y" :pressY});
        }

        onPositionChanged: {
            referenceRoi.width = (Math.abs (mouse.x - referenceRoi.x));
            referenceRoi.height = (Math.abs(mouse.y - referenceRoi.y));
        }

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

        }
    }

    property Rectangle referenceRoi : null;

    Component {
         id: referenceRoiRect;

         Rectangle {
             id: rectroi
             color: "red";
             opacity: 0.7;
             x: pressX
             y: pressY
             width: releaseX - pressX;
             height: releaseY - pressY;
             radius: rectroi.width/2;

             MouseArea {
                id:roiArea
                anchors.fill: parent
                acceptedButtons: Qt.RightButton
                hoverEnabled: true

                onClicked: {
                        console.log("Context menu");
                }
           }
        }
    }

}

To copy to clipboard, switch view to plain text mode 

I just want to know, is this the right way to do it? or is there any other way to do it more efficiently?

Now i am planning to expand or contract or rotate the drawn shapes. Any suggestions on how to expand,contract or rotate will be highly appreciated?

Thanks in advance!!!

jakr13

[anda_skoa]

Well, a circle requires that width and height are the same, which is currently not guaranteed with your code.
I would say derive the radius as a minimum of your X and Y deltas and bind both width and height to 2 * radius.

Cheers,
_

[jakr13]

thanks anda_skoa, got it.

any idea or example piece of code on how to rotate or expand or contract the drawn rectangle or circle? possibly as the extension of the above code?

Thanks in advance

[anda_skoa]

Well, a rotated circle is just like the circle itself, unless you rotate around some other point than the center.
In any case rotation is a standard property of any QtQuick item.

I don't understand what you mean with expand or contract, the circle already does that when you modify its values during mouse movement, no?

Cheers,
_

[jakr13]

Lets us say we have drawn a 50x25 rectangle over the image, but now we have changed our mind to expand 55x30 or contract 40x20 with the same rectangle drawn. How can I do that?

thanks
Jakr13

[anda_skoa]

Well, you simply change the width and height properties of the rectangle.

Cheers,
_

[jakr13]

Hi anda_skoa,

one more quick question, I will be selecting suppose say 5 circles and I want to destroy all the circles after pressing a button. Now I can able to delete only the last circle created. Lets take my previous program posted

import QtQuick 1.1
 
Rectangle {
    id:referenceImageRect
    width: 300
    height: 300
 
    property int pressX
    property int pressY
    property int releaseX
    property int releaseY
 
    Image{
        id:referenceImage
        source:"file:///C://Users//Jakr13//Desktop//test.bmp"
    }
 
    MouseArea {
        id:referenceImageRoiarea
        anchors.fill: parent
        acceptedButtons: Qt.LeftButton
 
        onPressed: {
            pressX = mouse.x
            pressY = mouse.y
            console.log("Pressed Co-ordinates",pressX,pressY); 
 
            referenceRoi = referenceRoiRect.createObject (referenceImageRoiarea, {"x" : pressX , "y" :pressY});
        }
 
        onPositionChanged: {
            referenceRoi.width = (Math.abs (mouse.x - referenceRoi.x));
            referenceRoi.height = (Math.abs(mouse.y - referenceRoi.y));
        }
 
        onReleased: {
            releaseX = mouse.x
            releaseY = mouse.y
            console.log("Released Co-ordinates",releaseX,releaseY);
 
        }
    }
 
    property Rectangle referenceRoi : null;
 
    Component {
         id: referenceRoiRect;
 
         Rectangle {
             id: rectroi
             color: "red";
             opacity: 0.7;
             x: pressX
             y: pressY
             width: rectroi.radius *2;
             height: rectroi.radius *2;
             radius: Math.min((releaseX - pressx),(releaseY - pressY));
 
             MouseArea {
                id:roiArea
                anchors.fill: parent
                acceptedButtons: Qt.RightButton
                hoverEnabled: true
 
                onClicked: {
                        console.log("Context menu");                       
                }
           }
        }
    }
 
    Image {
       id:refresh
        source:"file:///C://Users//Jakr13//Desktop//refresh.bmp"     
 
        MouseArea {
                id:refreshArea
                anchors.fill: parent                
                hoverEnabled: true
 
                onClicked: {                      
                        referenceRoi.destroy();    // destroying only the last object created 
                }
         }
     }
 
}

import QtQuick 1.1
 
Rectangle {
    id:referenceImageRect
    width: 300
    height: 300
 
    property int pressX
    property int pressY
    property int releaseX
    property int releaseY
 
    Image{
        id:referenceImage
        source:"file:///C://Users//Jakr13//Desktop//test.bmp"
    }
 
    MouseArea {
        id:referenceImageRoiarea
        anchors.fill: parent
        acceptedButtons: Qt.LeftButton
 
        onPressed: {
            pressX = mouse.x
            pressY = mouse.y
            console.log("Pressed Co-ordinates",pressX,pressY); 
          
            referenceRoi = referenceRoiRect.createObject (referenceImageRoiarea, {"x" : pressX , "y" :pressY});
        }
 
        onPositionChanged: {
            referenceRoi.width = (Math.abs (mouse.x - referenceRoi.x));
            referenceRoi.height = (Math.abs(mouse.y - referenceRoi.y));
        }
 
        onReleased: {
            releaseX = mouse.x
            releaseY = mouse.y
            console.log("Released Co-ordinates",releaseX,releaseY);
 
        }
    }
 
    property Rectangle referenceRoi : null;
 
    Component {
         id: referenceRoiRect;
 
         Rectangle {
             id: rectroi
             color: "red";
             opacity: 0.7;
             x: pressX
             y: pressY
             width: rectroi.radius *2;
             height: rectroi.radius *2;
             radius: Math.min((releaseX - pressx),(releaseY - pressY));
 
             MouseArea {
                id:roiArea
                anchors.fill: parent
                acceptedButtons: Qt.RightButton
                hoverEnabled: true
 
                onClicked: {
                        console.log("Context menu");                       
                }
           }
        }
    }

    Image {
       id:refresh
        source:"file:///C://Users//Jakr13//Desktop//refresh.bmp"     

        MouseArea {
                id:refreshArea
                anchors.fill: parent                
                hoverEnabled: true
 
                onClicked: {                      
                        referenceRoi.destroy();    // destroying only the last object created 
                }
         }
     }
 
}

To copy to clipboard, switch view to plain text mode 

How can I delete all the objects created by clicking on the refresh.bmp image?


Thanks in advance!!!

[anda_skoa]

Store the newly created instance in an array, then iterate over the array to delete all objects in it.

Cheers,
_