Results 1 to 4 of 4

Thread: How do I draw an image in GraphicsView? It should be simple, right?

  1. #1
    Join Date
    Oct 2009
    Posts
    23
    Thanked 1 Time in 1 Post
    Qt products
    Qt4
    Platforms
    MacOS X Unix/X11 Windows

    Default How do I draw an image in GraphicsView? It should be simple, right?

    Okay, so I'm looking for a barebone example of how to draw an image at a given position in graphicsView. I've tried to study the Canvas and AsteroidsPort examples to get an idea of what's going on, but it seems they're adding complexity that I won't need and I'm having trouble deciphering the necessary from the unnecessarily complex parts.

    Basically, I started out with a rectangle drawing code to get an idea of what's going on.

    Qt Code:
    1. int main( int argc, char **argv )
    2. {
    3.  
    4. QApplication app(argc, argv);
    5.  
    6. scene.setSceneRect( -100.0, -100.0, 200.0, 200.0 );
    7.  
    8. QGraphicsEllipseItem *item = new QGraphicsEllipseItem( 0, &scene );
    9. item->setRect( -50.0, -50.0, 50, 100.0 );
    10.  
    11. scene.addItem(myI);
    12. QGraphicsView view( &scene );
    13. view.setRenderHints( QPainter::Antialiasing );
    14. view.show();
    15.  
    16. return app.exec();
    17. }
    To copy to clipboard, switch view to plain text mode 

    This worked great and all and I think I got an idea of what's going on. You create a generic graphics item, add the graphics item to the scene, set the QGraphicsView to what the scene has and then show it.

    So using this, I created a the following code to display an image.

    Qt Code:
    1. #include <QApplication>
    2. #include <QGraphicsEllipseItem>
    3. #include <QGraphicsScene>
    4. #include <QGraphicsView>
    5.  
    6. QString myImgName = "myimg.png";
    7. static QImage *myImg;
    8.  
    9. int main( int argc, char **argv )
    10. {
    11.  
    12. QApplication app(argc, argv);
    13.  
    14. scene.setSceneRect( -100.0, -100.0, 200.0, 200.0 );
    15.  
    16. myImg = new QImage;
    17. myImg->load(myImgName);
    18.  
    19.  
    20. QPixmap pix;
    21. pix.fromImage( *myImg, Qt::AutoColor );
    22.  
    23. myI->setPixmap(pix);
    24.  
    25.  
    26. scene.addItem(myI);
    27. myI->setPos(50, 50);
    28. myI->setZValue(50);
    29.  
    30.  
    31. QGraphicsView view( &scene );
    32. view.setRenderHints( QPainter::Antialiasing );
    33. view.show();
    34.  
    35. return app.exec();
    36. }
    To copy to clipboard, switch view to plain text mode 

    So instead of a rectangle item, I have to create a QGraphicsPixmapItem for pictures. To load the picture, I apparently had to create a QImage and then use the loading function, and then get the pix from that. I add it to the scene, set position, let the scene be viewed from the QGraphicsView and Voila! Nothing but empty whiteness. Where's my image?

    Can anyone spot what might be so incredibly wrong with my code? I think I made sure the image was in the right directory, so I doubt it's not finding the picture.

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

    Default Re: How do I draw an image in GraphicsView? It should be simple, right?

    QPixmap::fromImage() is a static method that returns the pixmap which you need to assign to something. Take a look at its docs.
    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.


  3. #3
    Join Date
    Oct 2009
    Posts
    23
    Thanked 1 Time in 1 Post
    Qt products
    Qt4
    Platforms
    MacOS X Unix/X11 Windows

    Default Re: How do I draw an image in GraphicsView? It should be simple, right?

    Thanks!

    I changed line 23 from

    Qt Code:
    1. pix.fromImage( *myImg, Qt::AutoColor );
    To copy to clipboard, switch view to plain text mode 

    to

    Qt Code:
    1. pix = pix.fromImage( *myImg, Qt::AutoColor );
    To copy to clipboard, switch view to plain text mode 

    I actually copied that snippet from somewhere online, so I assumed they knew what they were doing.

    It seems to load now!

    Now, if I want to constantly update the positioning of the image (it'll change depending on certain external events - it could be keyboard or mouse events), do I have to derive a class from the QGraphicsItem and overwrite the paint function? Is there some way to do it without deriving a class?

    (I'll probably end up deriving a class anyways, but just curious if I can get something done with some simple code).

    Also, would anyone recommend GraphicsView for my application? I'm looking at making a 2d tile based world that one could look around by dragging the mouse, but I'm not sure if GraphicsView, OpenGL or some other QTechnology would be more appropriate. I still want to have GUI user interface elements in other parts of the window, but I think QT's integration with GL makes this possible. Overall, I want it to be as simple and RAD as possible, but yet I don't want the graphics to stutter. The tiles are going to be 256x256 pixels (or something like that) and there can be anywhere from 3x3 tiles at a time to 6x6 tiles at a time, depending on screen resolution. The tiles on the immediate outside are going to be preloaded to minimize disruption.

    Effectively, think of something like Google Maps, except more natively than web technology.

  4. #4
    Join Date
    Oct 2006
    Posts
    279
    Thanks
    6
    Thanked 40 Times in 39 Posts
    Qt products
    Qt4
    Platforms
    MacOS X Unix/X11 Windows

    Default Re: How do I draw an image in GraphicsView? It should be simple, right?

    I did something like that once. I ended up drawing the tiles in the background like this:

    Qt Code:
    1. void MapView::drawBackground(QPainter* painter, const QRectF & rect)
    2. {
    3. QPointF topLeft = mapToScene(0,0);
    4. QPointF bottomRight = mapToScene(viewport()->width(),viewport()->height());
    5. QPointF size = bottomRight-topLeft;
    6. qreal scaley = viewport()->height()/size.y();
    7. int zoom = qBound(0, (int)floor(log2(scaley)), 20); // upsampling
    8. //int zoom = qBound(0, (int)ceil(log2(scaley)), 20); // downsampling
    9. int scaleFactor = 1<<zoom;
    10. double factorX = qreal(0x100000>>zoom)/(0x1000);
    11.  
    12. int xbegin = qBound(0, (int)floor(rect.left ()* scaleFactor/SceneSize), scaleFactor);
    13. int xend = qBound(0, (int)ceil (rect.right ()* scaleFactor/SceneSize), scaleFactor);
    14. int ybegin = qBound(0, (int)floor(rect.top ()* scaleFactor/SceneSize), scaleFactor);
    15. int yend = qBound(0, (int)ceil (rect.bottom()* scaleFactor/SceneSize), scaleFactor);
    16.  
    17. for(int y=ybegin; y<yend; y++)
    18. {
    19. for(int x=xbegin; x<xend; x++)
    20. {
    21. QImage pixmap = downloader->requestMap(zoom, x, y);
    22. painter->drawImage(QRectF( qreal(x*SceneSize)/scaleFactor, qreal(y*SceneSize)/scaleFactor, factorX, factorX), pixmap, pixmap.rect());
    23. }
    24. }
    25. }
    To copy to clipboard, switch view to plain text mode 
    Sorry about the lack of comments, but you should get the idea.
    requestMap(zoom, x,y) returns a tile downloaded from http://c.tile.openstreetmap.org/<zoom>/<x>/<y>.png (the same format google maps use)
    Then zooming is implemented through GraphicsView::scale() and panning through QGraphicsView::ScrollHandDrag.

    It works perfectly smooth with or without OpenGL as long as the calls to requestMap() are non blocking.(i.e. returns a blank pixmap if the download isn't ready)

  5. The following user says thank you to spud for this useful post:

    mpele (8th December 2010)

Similar Threads

  1. Replies: 2
    Last Post: 5th September 2009, 11:23
  2. Issues writing a simple image viewer class
    By ultim8 in forum Qt Programming
    Replies: 5
    Last Post: 27th March 2009, 13:50
  3. how to draw lines on image using QGraphicsView in Qt4
    By madhavilatha in forum What's New in Qt 4.4
    Replies: 1
    Last Post: 25th July 2008, 00:32
  4. Simple display of an image
    By bruccutler in forum Newbie
    Replies: 1
    Last Post: 15th January 2007, 23:49
  5. Writing a simple Draw program
    By neomax in forum General Discussion
    Replies: 1
    Last Post: 23rd November 2006, 06:53

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.