Draw over an image, without replacing the pixels, save drawn image as standalone

[wysota]

But if I make the overlay-ed pixmap transparent then user can't see what he draws ?
If I make it opaque then user can't see the base image ?

How to make the user see the overlay where he draws and background where he hasn't drawn ?

Geez....

#include <QtWidgets>
 
class Widget : public QWidget {
public:
  Widget(QWidget *parent = 0) : QWidget(parent) {}
  void setImage(const QString &path) {
    m_base = QPixmap(path);
    m_mask = QImage(m_base.size(), QImage::Format_ARGB32);
    if(!m_mask.isNull()) m_mask.fill(Qt::transparent);
    updateGeometry();
  }
  QSize sizeHint() const { return m_base.size(); }
protected:
  void mousePressEvent(QMouseEvent *e) {
    if(!m_base.rect().contains(e->pos())) return;
    m_mask.setPixel(e->pos(), qRgba(255, 0, 0, 255));
    update();
  }
  void mouseMoveEvent(QMouseEvent *e) {
    if(!m_base.rect().contains(e->pos())) return;
    m_mask.setPixel(e->pos(), qRgba(255, 0, 0, 255));
    update();
  }
  void paintEvent(QPaintEvent *pe) {
    QPainter p(this);
    p.drawPixmap(0, 0, m_base);
    p.drawImage(0, 0, m_mask);
  }
private:
  QPixmap m_base;
  QImage m_mask;
};
 
int main(int argc, char **argv) {
  QApplication app(argc, argv);
  Widget w;
  w.setImage("/usr/share/icons/oxygen/256x256/apps/kword.png");
  w.show();
  return app.exec();
}

#include <QtWidgets>

class Widget : public QWidget {
public:
  Widget(QWidget *parent = 0) : QWidget(parent) {}
  void setImage(const QString &path) {
    m_base = QPixmap(path);
    m_mask = QImage(m_base.size(), QImage::Format_ARGB32);
    if(!m_mask.isNull()) m_mask.fill(Qt::transparent);
    updateGeometry();
  }
  QSize sizeHint() const { return m_base.size(); }
protected:
  void mousePressEvent(QMouseEvent *e) {
    if(!m_base.rect().contains(e->pos())) return;
    m_mask.setPixel(e->pos(), qRgba(255, 0, 0, 255));
    update();
  }
  void mouseMoveEvent(QMouseEvent *e) {
    if(!m_base.rect().contains(e->pos())) return;
    m_mask.setPixel(e->pos(), qRgba(255, 0, 0, 255));
    update();
  }
  void paintEvent(QPaintEvent *pe) {
    QPainter p(this);
    p.drawPixmap(0, 0, m_base);
    p.drawImage(0, 0, m_mask);
  }
private:
  QPixmap m_base;
  QImage m_mask;
};

int main(int argc, char **argv) {
  QApplication app(argc, argv);
  Widget w;
  w.setImage("/usr/share/icons/oxygen/256x256/apps/kword.png");
  w.show();
  return app.exec();
}

To copy to clipboard, switch view to plain text mode 

[Charvi]

Also, how would i construct QPen to erase the overlay ?

[wysota]

Why would you need a pen for that?

[d_stranz]

Also, how would i construct QPen to erase the overlay ?

You take the code wysota already wrote for you, and you replace the alpha value with 0 instead of 255 in the setPixel() calls.

You seem to be confused about the difference between the virtual "pen", "eraser" and other tools you might use in a drawing application and a QPen used by QPainter. Totally unrelated concepts.

[Charvi]

To get smooth drawing I used the following code taking reference from the Scribble example.

QPainter painter(&m_mask);
//    if (eraseFlag == true)
//        painter.setPen(QPen(QBrush(QColor(0, 0, 0, 0)), myPenWidth, Qt::SolidLine, Qt::RoundCap,
//                        Qt::RoundJoin));
//    else
        painter.setPen(QPen(myPenColor, myPenWidth, Qt::SolidLine, Qt::RoundCap,
                        Qt::RoundJoin));
    painter.drawLine(lastPoint, endPoint);
 
    int rad = (myPenWidth / 2) + 2;
    update(QRect(lastPoint, endPoint).normalized()
                                     .adjusted(-rad, -rad, +rad, +rad));
    lastPoint = endPoint;

QPainter painter(&m_mask);
//    if (eraseFlag == true)
//        painter.setPen(QPen(QBrush(QColor(0, 0, 0, 0)), myPenWidth, Qt::SolidLine, Qt::RoundCap,
//                        Qt::RoundJoin));
//    else
        painter.setPen(QPen(myPenColor, myPenWidth, Qt::SolidLine, Qt::RoundCap,
                        Qt::RoundJoin));
    painter.drawLine(lastPoint, endPoint);

    int rad = (myPenWidth / 2) + 2;
    update(QRect(lastPoint, endPoint).normalized()
                                     .adjusted(-rad, -rad, +rad, +rad));
    lastPoint = endPoint;

To copy to clipboard, switch view to plain text mode 

where

myPenWidth = 3;
    myPenColor = Qt::red;

myPenWidth = 3;
    myPenColor = Qt::red;

To copy to clipboard, switch view to plain text mode 

Trying to implement erasing in this.

[Charvi]

One more feature, sorry to extend in the same question but it's because the context has already been set.

In order to implement scaling on the wheel event I did the following:

void
LT_DrawingCanvas::wheelEvent(QWheelEvent *event)
{
    QWidget::wheelEvent(event);
    scaleFactor += ((float)event->delta()/1200.0);
    update();
}

void
LT_DrawingCanvas::wheelEvent(QWheelEvent *event)
{
    QWidget::wheelEvent(event);
    scaleFactor += ((float)event->delta()/1200.0);
    update();
}

To copy to clipboard, switch view to plain text mode 

and in the paintEvent:

void
LT_DrawingCanvas::paintEvent(QPaintEvent *pe)
{
    QPainter p(this);
    p.scale(scaleFactor, scaleFactor);
    p.drawPixmap(0, 0, m_base);
    p.drawImage(0, 0, m_mask);
}

void
LT_DrawingCanvas::paintEvent(QPaintEvent *pe)
{
    QPainter p(this);
    p.scale(scaleFactor, scaleFactor);
    p.drawPixmap(0, 0, m_base);
    p.drawImage(0, 0, m_mask);
}

To copy to clipboard, switch view to plain text mode 

My widget hierarchy is as below:
Mainwindow
- Grid Layout
- Scrollarea
- MyCustomDrawing Canvas Widget (created just like the code wysota suggested above)

I am not getting the scrollbars on scaling the image. I realize I am drawing the scaled image again, instead of resizing the widget. I tried using resize on the widget but it didn't work. What I am doing wrong ?

[wysota]

Set the widgetResizable property of the scroll area to true.

[Charvi]

Okay so for erasing I did the following, may be this will be useful to someone.

QPainter painter(&m_mask);
painter.setCompositionMode(QPainter::CompositionMode_Source);
painter.setPen(QPen(QBrush(Qt::transparent), myPenWidth, Qt::SolidLine, Qt::RoundCap, Qt::RoundJoin));

QPainter painter(&m_mask);
painter.setCompositionMode(QPainter::CompositionMode_Source);
painter.setPen(QPen(QBrush(Qt::transparent), myPenWidth, Qt::SolidLine, Qt::RoundCap, Qt::RoundJoin));

To copy to clipboard, switch view to plain text mode 

To understand the Composition Modes : http://doc.qt.io/qt-5/qpainter.html#...itionMode-enum


Thanks.

P.S.: Still working on the scrollarea stuff. Once done will update here.

[Kryzon]

I think it might be faster to use composition mode CLEAR. It erases whatever pixels are there.