Qt GUI Development - Displaying a 2D grid using QGraphicsView

问题

I'm new to Qt development so I've being trying to research a solution to a user interface I need to design. My project is to simulate players in an online game moving around a global map. To represent the map I need to display a 2D grid, with each space in the grid representing a region of a map. I then need to display the location of each player in the game. The back-end is all fully working, with the map implemented as a 2D array. I'm just stuck on how to display the grid.

The research I have done has led me to believe a QGraphicsView is the best way to do this, but I can't seem to find a tutorial relevant to what I need. If anyone has any tips on how to implement this it would be much appreciated.

Thanks, Dan

回答1:

A 2D Grid is nothing more than a set of horizontal and vertical lines. Suppose you have a 500x500 map and you want to draw a grid where the distance between the lines in both directions is 50. The sample code that follows shows you how you can achieve it.

// create a scene and add it your view
QGraphicsScene* scene = new QGraphicsScene;
ui->view->setScene(scene);

// Add the vertical lines first, paint them red
for (int x=0; x<=500; x+=50)
    scene->addLine(x,0,x,500, QPen(Qt::red));

// Now add the horizontal lines, paint them green
for (int y=0; y<=500; y+=50)
    scene->addLine(0,y,500,y, QPen(Qt::green));

// Fit the view in the scene's bounding rect
ui->view->fitInView(scene->itemsVBoundingRect());

You should check the QGraphicsView and the QGraphicsScene documentation as well as the corresponding examples. Also you can watch the graphics view training videos or some graphics view related videos from the Qt developer days.

回答2:

Well if you have a constant grid size or even a limited number of grid sizes what i like to do is to draw a grid block in gimp or any other program and then set that as the background brush (draw only bottom and right side of the block) qt will repeat the image and will give you a full grid. I think this is good for performance too.

This is the grid image i used in one of my programs it's 10x10 pixels.

Then call QGraphicsScene setBackgroundBrush as the follwing:

    scene->setBackgroundBrush(QBrush(QPixmap(":/grid/grid10.png")));

回答3:

The more native way is this:

scene = self.getScene()                    # Your scene.

brush = QBrush()
brush.setColor(QColor('#999'))
brush.setStyle(Qt.CrossPattern)            # Grid pattern.
scene.setBackgroundBrush(brush)

borderColor = Qt.black
fillColor = QColor('#DDD')
rect = QRectF(0.0, 0.0, 1280, 720)         # Screen res or whatever.

scene.addRect(rect,borderColor,fillColor)  # Rectangle for color.
scene.addRect(rect,borderColor,brush)      # Rectangle for grid.

Sorry by PyQt...

来源：https://stackoverflow.com/questions/8279567/qt-gui-development-displaying-a-2d-grid-using-qgraphicsview

标签

c++

user-interface

qgraphicsview