-
Draw over an image, without replacing the pixels, save drawn image as standalone
Hi,
1. I want to display a jpg.
2. Let user draw on the image.
3. I want to save the only user drawn image (and not the base image).
If I take two qlabels, one for background and another for foreground and display the one in foreground with transparency then the user drawing will not be visible too. But I want the background to be visible as well as the user drawing and also want to save the user drawing as a standalone png.
Please suggest something.
Thanks,
Charvi
-
Re: Draw over an image, without replacing the pixels, save drawn image as standalone
You don't necessarily need to widgets.
Just have one widget that paints the base image and a QPixmap on top of it into which you draw.
Cheers,
_
-
Re: Draw over an image, without replacing the pixels, save drawn image as standalone
Hi,
Thanks for response.
I did try something like that but I also want to be able to save only the user made drawing. For this I thought not to replace those pixels in the original image but overlay the user drawing on it.
-
Re: Draw over an image, without replacing the pixels, save drawn image as standalone
Quote:
Originally Posted by
Charvi
I did try something like that
Great, so now use QPixmap::save() to save that extra pixmap.
-
Re: Draw over an image, without replacing the pixels, save drawn image as standalone
Quote:
Originally Posted by
Charvi
For this I thought not to replace those pixels in the original image but overlay the user drawing on it.
Which is exactly what I wrote, no?
Cheers,
_
-
Re: Draw over an image, without replacing the pixels, save drawn image as standalone
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 ?
Thanks,
Charvi
-
Re: Draw over an image, without replacing the pixels, save drawn image as standalone
Hi,
The widget must not be transparent but the pixels on it must have the Alpha value to full transparency. When you draw on int you have to change the Alpha value and the RGB values to desired color.
-
Re: Draw over an image, without replacing the pixels, save drawn image as standalone
Quote:
Originally Posted by
Charvi
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....
Code:
#include <QtWidgets>
public:
void setImage
(const QString &path
) { if(!m_mask.isNull()) m_mask.fill(Qt::transparent);
updateGeometry();
}
QSize sizeHint
() const { return m_base.
size();
} protected:
if(!m_base.rect().contains(e->pos())) return;
m_mask.setPixel(e->pos(), qRgba(255, 0, 0, 255));
update();
}
if(!m_base.rect().contains(e->pos())) return;
m_mask.setPixel(e->pos(), qRgba(255, 0, 0, 255));
update();
}
p.drawPixmap(0, 0, m_base);
p.drawImage(0, 0, m_mask);
}
private:
};
int main(int argc, char **argv) {
Widget w;
w.setImage("/usr/share/icons/oxygen/256x256/apps/kword.png");
w.show();
return app.exec();
}
-
Re: Draw over an image, without replacing the pixels, save drawn image as standalone
Also, how would i construct QPen to erase the overlay ?
-
Re: Draw over an image, without replacing the pixels, save drawn image as standalone
Why would you need a pen for that?
-
Re: Draw over an image, without replacing the pixels, save drawn image as standalone
Quote:
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.
-
Re: Draw over an image, without replacing the pixels, save drawn image as standalone
To get smooth drawing I used the following code taking reference from the Scribble example.
Code:
// 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;
where
Code:
myPenWidth = 3;
myPenColor = Qt::red;
Trying to implement erasing in this.
-
Re: Draw over an image, without replacing the pixels, save drawn image as standalone
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:
Code:
void
{
scaleFactor += ((float)event->delta()/1200.0);
update();
}
and in the paintEvent:
Code:
void
{
p.scale(scaleFactor, scaleFactor);
p.drawPixmap(0, 0, m_base);
p.drawImage(0, 0, m_mask);
}
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 ?
-
Re: Draw over an image, without replacing the pixels, save drawn image as standalone
Set the widgetResizable property of the scroll area to true.
-
Re: Draw over an image, without replacing the pixels, save drawn image as standalone
Okay so for erasing I did the following, may be this will be useful to someone.
Code:
painter.
setCompositionMode(QPainter::CompositionMode_Source);
painter.
setPen(QPen(QBrush(Qt
::transparent), myPenWidth, Qt
::SolidLine, Qt
::RoundCap, Qt
::RoundJoin));
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.
-
Re: Draw over an image, without replacing the pixels, save drawn image as standalone
I think it might be faster to use composition mode CLEAR. It erases whatever pixels are there.