QGraphicsScene grid view of pixmaps

Question

I would like to implement a "grid view" of pixmaps. This is how I would like the UI to behave: You click a button and it shows a QGraphicsView with a QGraphicsScene (done) and then I would like to show all of my QPixmaps in a grid view. I don't actually want to see a grid I just want to organize the pixmaps like 10 columns (pixmaps) pr. row, and then a 10px whitespace in-between each pixmap. (not done). How would this be implemented? EDIT: Here's what I've done so far (which produces the outcome described in the second comment)

public SpriteScene() {
    super(0, 0, 800, 500);

    QPixmap[] sprites = GUI.getWInterface().sprites;
    List<QPixmap> l = Arrays.asList(sprites);
    Iterator<QPixmap> i = l.iterator();
    int rows = 10 / sprites.length;
    boolean isDone = false;

    for(int y = 0; y < rows; y++) {
        for(int x = 0; x < 10; x++) {
            if(i.hasNext()) {
                QGraphicsPixmapItem pixmap = addPixmap(i.next());

                pixmap.setPos(x * 64 + 10 , y * 64 + 10);
            } else {
                isDone = true;
                break;
            }
        }

        if(isDone) {
            break;
        }
    }
}

SpriteScene extends QGraphicsScene and is being added to a QGraphicsView like this:

spriteView = new QGraphicsView(new SpriteScene(), this);
spriteView.setGeometry(0, 35, 850, 550);
spriteView.setAlignment(new Qt.AlignmentFlag[]{Qt.AlignmentFlag.AlignLeft, Qt.AlignmentFlag.AlignTop});
spriteView.hide();

Oh and by the way each pixmap is 64x64px :)

I have tried drawing the grid. But I can't because every single time I try it will only show the 10px gap before the first pixmap. After that, they're all positioned right after each other :) — Benjamin, Dec 04 '11 at 09:37
Post your code then so that people can see how it can be fixed. — Mat, Dec 04 '11 at 09:43

score 1 · Accepted Answer · answered Dec 04 '11 at 10:08

1

pixmap.setPos(x * 64 + 10 , y * 64 + 10);

Write that down on paper for the first few values:

x = 0, y = 0 => pos = ( 10, 10)
x = 1, y = 0 => pos = ( 74, 10)
x = 2, y = 0 => pos = (138, 10)

There's only 64 pixel different between each successive x offset. You need 74 pixels - the size of the pixmap plus the size of the border.

Set a few variables for your image with, height, horizontal and vertical spacing, and your code should look like:

pixmap.setPos(x * (width+hspacing) + offsetx, y * (height+vspacing) + offsety);

The offsetx/y would probably look nicer if they were half the respective spacing valued to get the grid "centered".

answered Dec 04 '11 at 10:08

Mat

202,337
40
393
406

I'm not exactly sure what you mean.. you have made me realize my faulty calculations but I don't understand your equation? Supposing x and y are the row and column numbers and width and height are the dimensions of the pixmaps and hspacing and vspacing represent the gap in pixels I want between each pixmap, what is offsetx and offsety? – Benjamin Dec 04 '11 at 10:41
It's really very basic. The same offsetx/y is added regardless of x and y. It's a "shift". (offsetx,offsety) will be the top/left of your "grid". – Mat Dec 04 '11 at 13:09
So offsetx is the constant displacement I want in the x-axis and offsety is the constant displacement I want in the y-axis? – Benjamin Dec 04 '11 at 13:27
Then I don't understand what hspacing and vspacing are for? – Benjamin Dec 04 '11 at 13:30
`<- offsetx -> image <- xspacing -> image <- xspacing -> image <- xspacing ->` – Mat Dec 04 '11 at 13:32
Ah...... thank you so much for taking the time to explain it to me. Now I finally fully understand it :) – Benjamin Dec 04 '11 at 13:37

QGraphicsScene grid view of pixmaps

1 Answers1