drawing a point over an image on QLabel

Question

I displayed a picture on QLabel and wanted to take coordinates and paint a point on image on mouse click event. I am able to get coordinates but painter is painting point below my image on label, i want it above my image.

My code is :

main.cpp

#include "imageviewer.h"
#include <QApplication>
int main(int argc, char *argv[])
{
    QApplication a(argc, argv);
    imageviewer w;
    w.showMaximized();

    return a.exec();
}

imageviewer.h

#include <QPushButton>

class imageviewer : public QLabel
{
    Q_OBJECT

public:
    explicit imageviewer(QWidget *parent = 0);

private slots:

    void mousePressEvent(QMouseEvent * e);
    void paintEvent(QPaintEvent * e);

private:

    QLabel *label1 ;
    int mFirstX;
    int mFirstY;
    bool mFirstClick;
    bool mpaintflag;

};

#endif

imageviewer.cpp

#include <QtGui>
#include <QHBoxLayout>
#include <QVBoxLayout>
#include "imageviewer.h"
#include <QDebug>

imageviewer::imageviewer(QWidget *parent)
    : QLabel(parent)
{


    label1 = new QLabel;
    label1->setSizePolicy(QSizePolicy::Ignored, QSizePolicy::Ignored);
    QPixmap pm1("/home/nishu/Pictures/img_0002.jpg");
    label1->setPixmap(pm1);
    label1->adjustSize();
    label1->setScaledContents(true);

    QHBoxLayout *hlayout1 = new QHBoxLayout;
    hlayout1->addWidget(label1);

    setLayout(hlayout1);
}

void imageviewer :: mousePressEvent(QMouseEvent *e)
{
    mFirstX=0;
    mFirstY=0;
    mFirstClick=true;
    mpaintflag=false;

    if(e->button() == Qt::LeftButton)
            {
                //store 1st point
                if(mFirstClick)
                {
                    mFirstX = e->x();
                    mFirstY = e->y();
                    mFirstClick = false;
                    mpaintflag = true;
                    qDebug() << "First image's coordinates" << mFirstX << "," << mFirstY ;
                    update();

                }

            }
}

void imageviewer :: paintEvent(QPaintEvent * e)
{

    QLabel::paintEvent(e);

    if(mpaintflag)
    {
               QPainter painter(this);
               QPen paintpen(Qt::red);
               paintpen.setWidth(10);
               QPoint p1;
               p1.setX(mFirstX);
               p1.setY(mFirstY);
               painter.setPen(paintpen);
               painter.drawPoint(p1);
            }

}

Help me to sort out what exactly problem is?

Solution

with line QPainter painter(this); you set QPainter to draw on your main widget instead of QLabel's pixmap. Change block to this and it will work:

if(mpaintflag)
    {
           QImage tmp(label1->pixmap()->toImage());
           QPainter painter(&tmp);
           QPen paintpen(Qt::red);
           paintpen.setWidth(10);
           QPoint p1;
           p1.setX(mFirstX);
           p1.setY(mFirstY);
           painter.setPen(paintpen);
           painter.drawPoint(p1);
           label1->setPixmap(QPixmap::fromImage(tmp));
    }

EDIT:

Just noticed, that you derived from QLabel, not from QWidget, as i assumed automatically, looking at layout. Indeed, you don't need label1 and layout inside of our imageviewer class. That whole point of subclassing is that you implement behavior and filter events the way you want it and then you add them to main widget if that is needed

EDIT2:

Imageviewer class should be derived from QLabel, remove label1 and layout, and paint not on image, but on imageviewer itself, i.e. this. Then you need to add new class to your program, which is derived from QMainwindow or QWidget for example, where you should include your imageviewer class, create layout and add your class to it like this:

#include "imageviewer.h"
//.... somewhere in constructor ....
imageviewer *viewer1=new imageviewer(this); // creating new object of imageviewer
viewer1->setPixmap(...);
hlayout1->addWidget(viewer1);

Comments

[Frank Osterfeld]

Depending on the platform, this can be awfully expensive (because of the image/pixmap conversions). I'd just implement my custom QWidget subclass that paints the pixmap and then the point. It's not that QLabel does a lot more when used to paint a pixmap.

[Shf]

@FrankOsterfeld well, that is right, but i doubt, that this programm will be used on tricky embedded systems, where computing cost is crutial, if thats the case, yes. I added the simplest solution from tons of them, for example, another one is installing eventfilters QLabel::setEventFilter or subclassing (though i would subclass QLabel instead of QWidget). Selected the shortest and easiest of them

[Nishu]

Hey, thanks for the quick reply, okay now its painting points over image, but its not printing exactly where i am clicking, i am not getting how is that possible.

[Nishu]

Hey i wan to display multiple images and do above operations, can you just tell me how should i display 4 pictures in my dialog box.

[Pavel Strakhov]

Either create a pixmap that contains all 4 pictures and display it in a single label or create a separate imageviewer object for each picture.

[Pavel Strakhov]

I don't understand your problem. You now have imageviewer class, use it like an usual QLabel with some extended functionality.

[Nishu]

i am new to Qt, i don't know how to add 4 pictures to single pixmap or how to create a separate imageviewer object ? Please tell me how to code these.

[Shf]

Figured out, what is the problem - mFirstX and mFirstY - coordinates of mouse cursor on the mainWidget, while painter will paint on label1, which has different coordinates, than main widget, so change lines QPoint p1; p1.setX(mFirstX); p1.setY(mFirstY); to QPoint p1(label1->mapFromParent(QPoint(mFirstX,mFirstY)));

[Shf]

@Nishu you create objects of your class imageviewer, like you would create QLabel, set pixmap to it and add it to layout. Like this: imageviewer label=new imageviewer(this);

[Nishu]

Problem not solved, i tried but now my program is finishing itself unexpectedly.