Introduction
Graphics View provides a surface for managing and interacting with a large number of custom-made graphical items, and a view widget for visualizing the items, with support for zooming and rotation.
The Graphics View Framework comprises of three basic elements or classes namely QGraphicsScene, QGraphicsView and QGraphicswItem which helps the developer to use and understand the Graphics View Framework.
- QGraphicsScene
Class for storing the widgets, handling event propagation(input from keyboard and touches) and managing item states. It represents a scene with items in it. QGraphicsScene also manages the state of item like selection, focus and acts as a container to different items placed on the scene.
A QGraphicsScene object is flexible enough to include any number of QGraphicsItem objects and still maintain the efficiency in retrieving them. The basic idea here is to manage the events of each item you create and redraw them as needed. This way, you can make your own custom widgets with more visually appealing features.
- QGraphicsView
Displays the widgets of a scene, it basically visualizes content of a scene. The view widget is a scroll area, and provides scroll bars for navigating through large scenes. The view receives input events from keys and touches, and translates these to scene events (converting the coordinates used to scene coordinates where appropriate), before sending the events to the visualized scene.
Graphics View provides an item-based approach to model-view programming, much like classes QTableView, QTreeView and QListView. Several views can observe a single scene, and the scene contains items of varying geometric shapes.
- QGraphicsItem
A basic class for the graphical items on the scene. It can also represent a group of items. Graphics View provides several standard items for typical shapes, such as rectangles (QGraphicsRectItem), ellipses (QGraphicsEllipseItem) and text items (QGraphicsTextItem), but the most powerful QGraphicsItem features are available when one writes a custom item. QGraphicsItem is responsible for keyboard input, focus, drag and drop.
Items live in a local coordinate system, and like QGraphicsView, it also provides many functions for mapping coordinates between the item and the scene, and from item to item. Also, like QGraphicsView, it can transform its coordinate system using a matrix: QGraphicsItem::transform(). This is useful for rotating and scaling individual items.
Sample Application:
Let us see how to draw a simple image using QT Graphics View Framework using simple images with a small example.
The below example uses: QgraphicsItem for drawing the custom item, QGraphicsScene for managing the custom items and QGaphicsView for displaying the contents of the QGraphicsScene.
m_graphicsview visualizes the contents of the m_graphicsscene in a scrollable viewport.
The scene in the view is set by using setScene() by passing the address of m_graphicsscene object.
Once the scene and the view are created, the items can be added to the scene by calling addItem().
The custom image is subclassed from QGraphicsItem and the image is drawn in the paint event of SpinnerGraphics.
// Class SpinnerGraphics is the custom item to be displayed on the screen
class SpinnerGraphics:public QObject,public QGraphicsItem
{
Q_OBJECT
public:
…..
protected:
void paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget);
QRectF boundingRect() const;
};
// Class SpinnerControl is the class containing the graphics scene and the graphics view
class SpinnerControl: public QFrame
{
Q_OBJECT
QGraphicsScene *m_graphicsscene;
QGraphicsView *m_graphicsview;
QBrush *m_brush;
public:
…
SpinnerGraphics *m_spinnerGraphics;
};
SpinnerControl::SpinnerControl(QWidget *parent) :
QFrame(parent)
{
m_graphicsscene = new QGraphicsScene();
m_graphicsview = new QgraphicsView(this);
// Set the current scene pointing to the created scene
m_graphicsview->setScene(m_graphicsscene);
// set the area of the scene visualized by this view
m_graphicsscene->setSceneRect(0,0,311,261);
m_spinnerGraphics = new SpinnerGraphics();
m_graphicsscene->addItem(m_spinnerGraphics);
m_brush = new QBrush();
m_brush->setStyle(Qt::SolidPattern);
m_brush->setColor(QColor(15,15,15));
m_graphicsscene->setBackgroundBrush(*m_brush);
//the custom spinner
m_spinnerGraphics=new SpinnerGraphics();
//add the custom item in the scene
m_graphicsscene->addItem(m_spinnerGraphics);
…
}
void SpinnerGraphics::paint(QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget)
{
//images for custom spinners
QImage Compass(“:/images/course-bg.png”);
QImage grayArrow(“:/images/gray_arrow.png”);
QImage redArrow(“:/images/red_arrow.png”);
painter->drawImage(…);
…
}
QRectF SpinnerGraphics::boundingRect() const
{
return QRectF(0,0,310,310);
}
By implementing mousePressEvent, mouseReleaseEvent and mouseMoveEvent we can even implement a way to change the position of the spinner (As shown in Fig).
References
1. http://doc.qt.io/qt-4.8/graphicsview.html
For any technical support or queries feel free to write to us at sales@e-consystems.com