How to draw and change the region (semi-transparent) on top of a QLabel or QImage?

Mikeeeeee

Hi!
I using Image Viewer Example
How to draw and change the region (semi-transparent) on top of a QLabel or QImage?

jsulm

@Mikeeeeee Subclass QLabel and override https://doc.qt.io/qt-5/qwidget.html#paintEvent
Here is an example: https://doc.qt.io/qt-5/qtwidgets-widgets-analogclock-example.html

Mikeeeeee

I found such an example, but for some reason it does not draw.Please tell me what needs to be fixed here?

#include <QMainWindow>
#include <QScrollArea>
#include <QLabel>
#include <QApplication>
#include <QPainter>

class MyLabel : public QLabel {
protected:
  virtual void paintEvent(QPaintEvent* e) {
    QLabel::paintEvent(e);
    
    QPainter p(this);
    
    p.setPen(Qt::green);
    p.drawLine(0, 0, 100, 100);
  }
};

class ImageView : public QMainWindow {
public:
  
  ImageView() : QMainWindow() {
    QScrollArea* scr = new QScrollArea();
    setCentralWidget( scr );
    
    QLabel* label = new MyLabel();
    label->setPixmap(QPixmap("./moon_from_andrey.jpg"));
    scr->setWidget(label);
  }
};


int main(int argc, char* argv[]) {
  QApplication app(argc, argv);
  
  ImageView view;
  view.setGeometry(100, 100, 500, 400);
  view.show();
  
  return app.exec();
}

mrjj

Hi
-but for some reason it does not draw.
You dont see the line or you dont see the image at all ?

Mikeeeeee

Wrong, I see a line. How to draw when you click the mouse under the mouse, as in Paint.

mrjj

@Mikeeeeee
You use mousePress / mouseRelease and mouseMove events for that.
Look here.
https://github.com/peteristhegreat/persistent_paint/blob/master/paintwidget.cpp
to see the logic. Basically we store the point on press, and update it in mouseMove, if
we see mouseRelease, the line is done.
You need the similar code in your MyLabel.

Christian Ehrlicher

Do you see the image when you don't reimplement your paint event? I would guess no.

Mikeeeeee

PaintWidget create QPixmap m_nPTargetPixmap and draws onm_nPTargetPixmap.
I set Qimage for Qlabel. Can I set Qpixmap on top of QImage in Qlabel and draw on Qpixmap?

mrjj

@Mikeeeeee
You can just move the line code to your MyLabel and draw directly there.
You dont need PaintWidget, it was just to show the logic of how to handle line drawing.

However, i do wonder if you plan to be able to move the line after they are drawn or select them again ?

Mikeeeeee

I would like to move the line along with QImage. But Qlabel is constantly changing its size. That's why I wanted to draw on the second layer.

Mikeeeeee

In this example, how do you make it possible to draw lines instead of lines, as in Paint when you click curves?

mrjj

@Mikeeeeee
Hi

In this example, how do you make it possible to draw lines instead of lines, as in Paint when you click curves?

im not sure what you ask?

When you click Curve in paint, you draw a curve, not a straight line.
(it looks like a Bezier Curve, but im not sure)

Do you mean to draw a curve instead of a line?

You might be able to use
https://doc.qt.io/qt-5/qpainterpath.html#cubicTo
also some background
https://en.wikipedia.org/wiki/Bézier_curve#Higher-order_curves

Mikeeeeee

I need to like this example.

But there's a lot of code. Please help to highlight the desired code.

mrjj

@Mikeeeeee
What you show there seems to be just random paint. ( lots of points )
The sample you link seems to have some curve code
but the image you show as an example, its just drawn following the move and it is not a curve or line.

So you want to make a free painting function?

Mikeeeeee

Yes. Please help to finish this code.

mrjj

@Mikeeeeee
well if you still using code from paintWidget

if(m_nbMousePressed)
{
~~painter.drawPixmap(0, 0, m_nPTargetPixmap);~~
~~painter.drawLine(m_line);~~
painter.drawPoint(m_line.p2() ); // paint the single point.
wasPressed = true;
}

p2() is updated from
void PaintWidget::mouseMoveEvent(QMouseEvent *event)

Mikeeeeee

Did so, still draws a line.


void PaintWidget::paintEvent(QPaintEvent *e)
{
    static bool wasPressed = false;
    QPainter painter(this);

    if(m_nbMousePressed)
    {
        //painter.drawPixmap(0, 0, m_nPTargetPixmap);
        //painter.drawLine(m_line);
        painter.drawPoint(m_line.p2() ); // paint the single point.
        wasPressed = true;
    }
    else if(wasPressed)
    {
        QPainter PixmapPainter(&m_nPTargetPixmap);
        QPen pen(Qt::green);
        PixmapPainter.setPen(pen);
        PixmapPainter.drawLine(m_line);

        painter.drawPixmap(0, 0, m_nPTargetPixmap);
        wasPressed = false;
    }
}

Maybe you need to change:

PixmapPainter.drawLine(m_line);

Mikeeeeee

Did so, also does not work

void PaintWidget::paintEvent(QPaintEvent *e)
{
    static bool wasPressed = false;
    QPainter painter(this);

    if(m_nbMousePressed)
    {
        //painter.drawPixmap(0, 0, m_nPTargetPixmap);
        //painter.drawLine(m_line);
        painter.drawPoint(m_line.p2() ); // paint the single point.
        wasPressed = true;
    }
    else if(wasPressed)
    {
        QPainter PixmapPainter(&m_nPTargetPixmap);
        QPen pen(Qt::green);
        PixmapPainter.setPen(pen);
        //PixmapPainter.drawLine(m_line);
        PixmapPainter.drawPoint(m_line.p2());

        painter.drawPixmap(0, 0, m_nPTargetPixmap);
        wasPressed = false;
    }
}

mrjj

ok. you have to debug it then :)

Mikeeeeee

Found the solution here