Results 1 to 16 of 16

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

  1. #1
    Join Date
    Mar 2012
    Location
    India
    Posts
    102
    Thanks
    4
    Qt products
    Qt4 Qt/Embedded
    Platforms
    Unix/X11

    Default 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

  2. #2
    Join Date
    Jan 2006
    Location
    Graz, Austria
    Posts
    8,420
    Thanks
    37
    Thanked 1,545 Times in 1,495 Posts
    Qt products
    Qt3 Qt4 Qt5
    Platforms
    Unix/X11 Windows

    Default 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,
    _

  3. #3
    Join Date
    Mar 2012
    Location
    India
    Posts
    102
    Thanks
    4
    Qt products
    Qt4 Qt/Embedded
    Platforms
    Unix/X11

    Default 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.

  4. #4
    Join Date
    Jan 2006
    Location
    Warsaw, Poland
    Posts
    33,363
    Thanks
    3
    Thanked 5,012 Times in 4,791 Posts
    Qt products
    Qt3 Qt4 Qt5 Qt/Embedded
    Platforms
    Unix/X11 Windows Android Maemo/MeeGo
    Wiki edits
    10

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

    Quote Originally Posted by Charvi View Post
    I did try something like that
    Great, so now use QPixmap::save() to save that extra pixmap.
    Your biological and technological distinctiveness will be added to our own. Resistance is futile.

    Please ask Qt related questions on the forum and not using private messages or visitor messages.


  5. #5
    Join Date
    Jan 2006
    Location
    Graz, Austria
    Posts
    8,420
    Thanks
    37
    Thanked 1,545 Times in 1,495 Posts
    Qt products
    Qt3 Qt4 Qt5
    Platforms
    Unix/X11 Windows

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

    Quote Originally Posted by Charvi View Post
    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,
    _

  6. #6
    Join Date
    Mar 2012
    Location
    India
    Posts
    102
    Thanks
    4
    Qt products
    Qt4 Qt/Embedded
    Platforms
    Unix/X11

    Default 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

  7. #7
    Join Date
    Jan 2006
    Location
    Sta. Eugènia de Berga (Vic - Barcelona - Spain)
    Posts
    855
    Thanks
    68
    Thanked 56 Times in 54 Posts
    Qt products
    Qt4 Qt5
    Platforms
    Unix/X11 Windows

    Default 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.
    Òscar Llarch i Galán

  8. #8
    Join Date
    Jan 2006
    Location
    Warsaw, Poland
    Posts
    33,363
    Thanks
    3
    Thanked 5,012 Times in 4,791 Posts
    Qt products
    Qt3 Qt4 Qt5 Qt/Embedded
    Platforms
    Unix/X11 Windows Android Maemo/MeeGo
    Wiki edits
    10

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

    Quote Originally Posted by Charvi View Post
    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....

    Qt Code:
    1. #include <QtWidgets>
    2.  
    3. class Widget : public QWidget {
    4. public:
    5. Widget(QWidget *parent = 0) : QWidget(parent) {}
    6. void setImage(const QString &path) {
    7. m_base = QPixmap(path);
    8. m_mask = QImage(m_base.size(), QImage::Format_ARGB32);
    9. if(!m_mask.isNull()) m_mask.fill(Qt::transparent);
    10. updateGeometry();
    11. }
    12. QSize sizeHint() const { return m_base.size(); }
    13. protected:
    14. void mousePressEvent(QMouseEvent *e) {
    15. if(!m_base.rect().contains(e->pos())) return;
    16. m_mask.setPixel(e->pos(), qRgba(255, 0, 0, 255));
    17. update();
    18. }
    19. void mouseMoveEvent(QMouseEvent *e) {
    20. if(!m_base.rect().contains(e->pos())) return;
    21. m_mask.setPixel(e->pos(), qRgba(255, 0, 0, 255));
    22. update();
    23. }
    24. void paintEvent(QPaintEvent *pe) {
    25. QPainter p(this);
    26. p.drawPixmap(0, 0, m_base);
    27. p.drawImage(0, 0, m_mask);
    28. }
    29. private:
    30. QPixmap m_base;
    31. QImage m_mask;
    32. };
    33.  
    34. int main(int argc, char **argv) {
    35. QApplication app(argc, argv);
    36. Widget w;
    37. w.setImage("/usr/share/icons/oxygen/256x256/apps/kword.png");
    38. w.show();
    39. return app.exec();
    40. }
    To copy to clipboard, switch view to plain text mode 
    Your biological and technological distinctiveness will be added to our own. Resistance is futile.

    Please ask Qt related questions on the forum and not using private messages or visitor messages.


  9. The following user says thank you to wysota for this useful post:

    Charvi (18th July 2015)

  10. #9
    Join Date
    Mar 2012
    Location
    India
    Posts
    102
    Thanks
    4
    Qt products
    Qt4 Qt/Embedded
    Platforms
    Unix/X11

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

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

  11. #10
    Join Date
    Jan 2006
    Location
    Warsaw, Poland
    Posts
    33,363
    Thanks
    3
    Thanked 5,012 Times in 4,791 Posts
    Qt products
    Qt3 Qt4 Qt5 Qt/Embedded
    Platforms
    Unix/X11 Windows Android Maemo/MeeGo
    Wiki edits
    10

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

    Why would you need a pen for that?
    Your biological and technological distinctiveness will be added to our own. Resistance is futile.

    Please ask Qt related questions on the forum and not using private messages or visitor messages.


  12. #11
    Join Date
    Jan 2008
    Location
    Alameda, CA, USA
    Posts
    4,139
    Thanks
    235
    Thanked 661 Times in 651 Posts
    Qt products
    Qt5
    Platforms
    Windows Android

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

    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.

  13. #12
    Join Date
    Mar 2012
    Location
    India
    Posts
    102
    Thanks
    4
    Qt products
    Qt4 Qt/Embedded
    Platforms
    Unix/X11

    Default 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.

    Qt Code:
    1. QPainter painter(&m_mask);
    2. // if (eraseFlag == true)
    3. // painter.setPen(QPen(QBrush(QColor(0, 0, 0, 0)), myPenWidth, Qt::SolidLine, Qt::RoundCap,
    4. // Qt::RoundJoin));
    5. // else
    6. painter.setPen(QPen(myPenColor, myPenWidth, Qt::SolidLine, Qt::RoundCap,
    7. Qt::RoundJoin));
    8. painter.drawLine(lastPoint, endPoint);
    9.  
    10. int rad = (myPenWidth / 2) + 2;
    11. update(QRect(lastPoint, endPoint).normalized()
    12. .adjusted(-rad, -rad, +rad, +rad));
    13. lastPoint = endPoint;
    To copy to clipboard, switch view to plain text mode 

    where

    Qt Code:
    1. myPenWidth = 3;
    2. myPenColor = Qt::red;
    To copy to clipboard, switch view to plain text mode 

    Trying to implement erasing in this.

  14. #13
    Join Date
    Mar 2012
    Location
    India
    Posts
    102
    Thanks
    4
    Qt products
    Qt4 Qt/Embedded
    Platforms
    Unix/X11

    Default 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:

    Qt Code:
    1. void
    2. LT_DrawingCanvas::wheelEvent(QWheelEvent *event)
    3. {
    4. QWidget::wheelEvent(event);
    5. scaleFactor += ((float)event->delta()/1200.0);
    6. update();
    7. }
    To copy to clipboard, switch view to plain text mode 

    and in the paintEvent:

    Qt Code:
    1. void
    2. LT_DrawingCanvas::paintEvent(QPaintEvent *pe)
    3. {
    4. QPainter p(this);
    5. p.scale(scaleFactor, scaleFactor);
    6. p.drawPixmap(0, 0, m_base);
    7. p.drawImage(0, 0, m_mask);
    8. }
    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 ?

  15. #14
    Join Date
    Jan 2006
    Location
    Warsaw, Poland
    Posts
    33,363
    Thanks
    3
    Thanked 5,012 Times in 4,791 Posts
    Qt products
    Qt3 Qt4 Qt5 Qt/Embedded
    Platforms
    Unix/X11 Windows Android Maemo/MeeGo
    Wiki edits
    10

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

    Set the widgetResizable property of the scroll area to true.
    Your biological and technological distinctiveness will be added to our own. Resistance is futile.

    Please ask Qt related questions on the forum and not using private messages or visitor messages.


  16. #15
    Join Date
    Mar 2012
    Location
    India
    Posts
    102
    Thanks
    4
    Qt products
    Qt4 Qt/Embedded
    Platforms
    Unix/X11

    Default 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.

    Qt Code:
    1. QPainter painter(&m_mask);
    2. painter.setCompositionMode(QPainter::CompositionMode_Source);
    3. 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.

  17. #16
    Join Date
    Oct 2014
    Posts
    81
    Thanks
    20
    Thanked 9 Times in 9 Posts
    Qt products
    Qt5
    Platforms
    Windows
    Wiki edits
    7

    Default 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.

Similar Threads

  1. Access the pixels of the Image(qml2)
    By stereoMatching in forum Qt Quick
    Replies: 1
    Last Post: 26th June 2013, 23:36
  2. Replies: 0
    Last Post: 9th July 2010, 14:06
  3. Draw Image into Pixmap/Image
    By ToddAtWSU in forum Qt Programming
    Replies: 1
    Last Post: 19th May 2010, 06:56
  4. Replies: 6
    Last Post: 21st September 2009, 10:55
  5. Replacing One image with another
    By merry in forum Qt Tools
    Replies: 6
    Last Post: 8th February 2007, 13:22

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
Digia, Qt and their respective logos are trademarks of Digia Plc in Finland and/or other countries worldwide.