Draw rectangle on QLabel



  • Hello All,
    I have label which is continuously displaying the output of my webcam .
    Now i want user to select particular part of the label using mouse and draw circle over the label
    to highlight particular section of the video.


  • Moderators

    @Kira You need to overload http://doc.qt.io/qt-5/qwidget.html#mousePressEvent, http://doc.qt.io/qt-5/qwidget.html#mouseMoveEvent, http://doc.qt.io/qt-5/qwidget.html#mouseReleaseEvent and http://doc.qt.io/qt-5/qwidget.html#paintEvent
    User presses mouse button: you store the current cursor position
    User moves the mouse while pressing mouse button: you draw the circle


  • Qt Champions 2017

    Another way you can do is that, write a custom widget to paint your web-cam image, handle mouseEvent, use same paintEvent draw circle.



  • @jsulm : Thanks for the reply. My doubt was, as my QLabel on which i am showing the output of webcam is refreshing continuously with frame of images whether this circle will also get refreshed as it image is continuously changing


  • Lifetime Qt Champion

    @Kira
    Hi
    If you just replace the image with setPixmap then yes it replaces all you had drawn before,
    but if you override paintEvent and handle drawing yourself then
    you just draw image and then the circle ( from variable ) and new frames will not override it.

    Notice if you need to drag out a rect , this class
    http://doc.qt.io/qt-5/qrubberband.html
    is useful.



  • Hello All,
    @mrjj @jsulm @dheerendra :

    Thanks for your reply everyone.
    I tried to implement the above functionality using QRubberband.
    I tried to follow an approach where i tried to implement the rubberband functionality on the QLabel
    using EventFilter.

    My problem is that my mousepress event works fine. But when go to mouse move event my code crashes.

    Sample code is given below:

    bool MainWindow::eventFilter(QObject *obj, QEvent *event)
    {
    if (event->type() == QEvent::MouseButtonPress)
    {
    QMouseEvent mouseEvent = static_cast<QMouseEvent>(event);
    statusBar()->showMessage(QString("Mouse move (%1,%2)").arg(mouseEvent->pos().x()).arg(mouseEvent->pos().y()));
    origin = mouseEvent->pos();
    if (!rubberBand)
    rubberBand = new QRubberBand(QRubberBand::Line, this);
    rubberBand->setGeometry(QRect(origin, QSize()));
    rubberBand->show();
    qDebug("Entered the Mousebutton press Event");
    }

    if (event->type() == QEvent::MouseMove)
    {
    qDebug("Entering the mouse move event");
    counter ++;
    qDebug()<<counter;
    QMouseEventmouseEvent = static_cast<QMouseEvent>(event);
    rubberBand->setGeometry(QRect(origin, mouseEvent->pos()).normalized()) // The code crashes at this line.
    qDebug("Completed the mouse move event");
    }
    return false;
    }

    Thanks in advance


  • Moderators

    @Kira Shouldn't it be

    QMouseEvent *mouseEvent = static_cast<QMouseEvent*>(event);
    rubberBand->setGeometry(QRect(origin, mouseEvent->pos()).normalized())) ;
    

    Was rubberBand initialized?



  • @jsulm : thanks for the reply it worked like a charm.
    The issue got resolved now i can draw rubberband easily.

    The rubbandband get drawn easily when i assign QRubberband to main window widget.
    But when i try to assign it to QLabel there is issue with the drawing of rubberband.
    I search on the above topic and came to know it is because of difference of the co-ordinates of window and label and i have to map it globally using the below link:
    https://stackoverflow.com/questions/16527248/qrubberband-on-a-definite-label
    But the problem still exist and i am not able to draw the rectangle.
    //Example code:
    void MainWindow::mousePressEvent(QMouseEvent *event){

    mypoint = ui->label->mapFromGlobal(this->mapToGlobal(event->pos()));
    // mypoint = ui->label->mapFrom(this, event->pos());
    // mypoint = this->mapTo(ui->label, event->pos());
    if(rubberBand == 0) // You should add this to not have a memory leak
        rubberBand = new QRubberBand(QRubberBand::Rectangle, ui->label_2);//new rectangle band
    rubberBand->setGeometry(QRect(mypoint, ui->label_2->size()));
    rubberBand->show();
    

    }
    After following the above approach,
    When i click the mouse inside the label the whole rubberband gets drawn without even moving the cursor.

    Another approach would be making a custom QLabel and implement the mouse co-ordinate in it but wanted to know if its possible using above approach


  • Moderators

    @Kira said in Draw rectangle on QLabel:

    void MainWindow::mousePressEvent(QMouseEvent *event)

    You're overwriting mousePressEvent in MainWindow but actually you should do it only for the label, right? You should subclass QLabel and override mousePressEvent there.



  • @jsulm : Yes you are correct. But is there any way in which i can implement it in mouse event of the main window instead of creating the subclass of the QLabel as mentioned in the link by mapping the co-ordinates.


  • Moderators

    @Kira Well, you need to check whether the user actually clicked inside the label or not.



  • @jsulm : can you please elaborate the approach. Because currently i am clicking inside the qlable and drawing the rubberband


  • Lifetime Qt Champion

    @Kira

    Hi
    If you get mouseEvents to mainwindow, the x,y coordinates will be for the main window.
    so when you press buttons, you need to use something like
    http://doc.qt.io/qt-5/qapplication.html#widgetAt
    and check if over the label.

    But why do you want this ?
    It will just be more complex than letting QLabel do it
    You will also need to map coordinates as else it wont draw where u press as mainwindows x,Y is not the same
    for label. so you must alter the x,y to draw inside QLabel.



  • @jsulm @mrjj : Guys thanks for your support. Got the issue resolved.
    Actually there was issue with the mouse drag functionality where i was passing the event of the main widget.
    It got resolved by mapping the coordinates of the mainwindow to global coordinate system.

    Will implement the functionality by creating subclass of the label and implement the rubberband as stated earlier as the correct approach.

    Just wanted to see whether the implementation is possible by this approach.

    Thanks again for your help and support.


  • Lifetime Qt Champion

    Super :)
    for at quick start, u could use
    https://wiki.qt.io/Clickable_QLabel



  • @mrjj : thanks buddy.
    Best supportive forum with best people and special thanks to @SGaist


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.