Move-able, Re-size-able Graphic Box
Qt Graphics View Lesson 1 |
Example usage of a custom QGraphicsItem in a QGraphicsScene with examples of mouse hover events.
Download the complete project zip file
|
This is my first foray into the Qt Graphics View Framework. To get my feet wet, my goal was to create a simpe box, in the shape of a UML State/Class box.
When the user hovers the mouse over the box, it should turn red, and the user should be able to drag the box around the scene.
I created the project with QtCreator. I started a new C++ UI project. But I did not use creator to add widgets to the main window,
but rather created instances of the widgets myself. QtCreator started a mainwindow.h and mainwindow.cpp files (when it created the UI project) – from there I added my widgets.
The class StateBox is the widget that represents the box in the scene. Its derived from the QGraphicsItem. MainWindow.cpp creates the scene and inserts a StateBox object.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
/** * \class StateBox * This is short example/demonstration of creating a custom QGraphicsItem. * Example usage of a custom QGraphicsItem in a QGraphicsScene with examples of mouse hover events. * * My goal was to create a simpe box, in the shape of a UML State/Class box, with a title * area seprated from a main arear below by line. * * This sample class inherits from QGraphicsItem, and must reimplement boundingRect() and paint() * from the base class. * * To learn about handling mouse events in a QGraphicsScene, I wanted my box to turn red when the mouse moves inside, and black * when the mouse moves out. I also allow the user to drag the box around the scene. */ class StateBox : public QGraphicsItem { public: StateBox(); QGraphicsTextItem _text; ///< sample text to go in the title area. void setGridSpace(int space); protected: virtual QRectF boundingRect() const; ///< must be re-implemented in this class to provide the diminsions of the box to the QGraphicsView virtual void paint (QPainter *painter, const QStyleOptionGraphicsItem *option, QWidget *widget); ///< must be re-implemented here to pain the box on the paint-event virtual void hoverEnterEvent ( QGraphicsSceneHoverEvent * event ); ///< must be re-implemented to handle mouse hover enter events virtual void hoverLeaveEvent ( QGraphicsSceneHoverEvent * event ); ///< must be re-implemented to handle mouse hover leave events virtual void mouseMoveEvent ( QGraphicsSceneMouseEvent * event );///< re-implemented to capture events virtual void mouseMoveEvent(QGraphicsSceneDragDropEvent *event);///< re-implemented to capture events virtual void mousePressEvent (QGraphicsSceneMouseEvent * event );///< re-implemented to capture events virtual void mousePressEvent(QGraphicsSceneDragDropEvent *event);///< re-implemented to capture events virtual void mouseReleaseEvent (QGraphicsSceneMouseEvent * event );///< re-implemented to capture events QColor _outterborderColor; ///< the hover event handlers will toggle this between red and black QPen _outterborderPen; ///< the pen is used to paint the red/black border QPointF _location; QPointF _dragStart; int _gridSpace; qreal _width; qreal _height; }; |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 |
StateBox::StateBox(): _text(), _outterborderColor(Qt::black), _outterborderPen(), _location(0,0), _dragStart(0,0), _gridSpace(10), _width(150), _height(100) { _outterborderPen.setWidth(2); _outterborderPen.setColor(_outterborderColor); _text.setPlainText("text goes here"); _text.setParentItem(this); this->setAcceptHoverEvents(true); } /* re-implement the mouse event handlers from the base QGraphicsItem class there are two versions provided in the base class, two that take QGraphicsSceneDragDropEvent - which I will ignore - and two that take QGraphicsSceneMouseEvent - which I will use */ void StateBox::mouseMoveEvent(QGraphicsSceneDragDropEvent *event) { event->setAccepted(false); } void StateBox::mousePressEvent(QGraphicsSceneDragDropEvent *event) { event->setAccepted(false); } void StateBox::mouseReleaseEvent ( QGraphicsSceneMouseEvent * event ) { event->setAccepted(true);// tell the base class we are handling this event // force my box to snap to grid, just truncate the pixel number and // snap to the next lowest grid value _location.setX( ( static_cast<int>(_location.x()) / _gridSpace) * _gridSpace ); _location.setY( ( static_cast<int>(_location.y()) / _gridSpace) * _gridSpace ); this->setPos(_location); } void StateBox::mousePressEvent ( QGraphicsSceneMouseEvent * event ) { // allow the user to drag the box, capture the starting position on mouse-down event->setAccepted(true); _dragStart = event->pos(); } void StateBox::mouseMoveEvent ( QGraphicsSceneMouseEvent * event ) { // user have moved the mouse, move the location of the box QPointF newPos = event->pos() ; _location += (newPos - _dragStart); this->setPos(_location); } void StateBox::hoverLeaveEvent ( QGraphicsSceneHoverEvent * ) { // return the box color to black when the mouse is no longer hovering _outterborderColor = Qt::black; this->update(0,0,_width,_height); } void StateBox::hoverEnterEvent ( QGraphicsSceneHoverEvent * ) { // draw the box in red if the mouse is hovering over it _outterborderColor = Qt::red; this->update(0,0,_width,_height); } // boundingRect must be re-implemented from the base class to provide the scene with // size info about this custom GraphicsItem QRectF StateBox::boundingRect() const { return QRectF(0,0,_width,_height); } void StateBox::paint (QPainter *painter, const QStyleOptionGraphicsItem *, QWidget *) { // draw the outter box _outterborderPen.setColor( _outterborderColor ); _outterborderPen.setStyle(Qt::SolidLine); painter->setPen(_outterborderPen); QBrush background (QColor::fromRgb(255,255,255,255), Qt::SolidPattern); painter->setBackgroundMode(Qt::OpaqueMode); painter->setBrush( background); //draw upper left corner QPointF topLeft (0, 0); QPointF bottomRight ( _width, _height ); QRectF rect (topLeft, bottomRight); painter->drawRoundRect(rect,25,25); painter->drawLine(0,25,_width,25); } |
I used QtCreator to start a UI project – it creates the skeleton of the MainWindow program which is then the framework where I hang the GraphicsView, GraphicsScene, and scene items
sush as the StateBox and Grid.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 |
MainWindow::MainWindow(QWidget *parent) : QMainWindow(parent), ui(new Ui::MainWindow()), scene( new QGraphicsScene()), gview( new QGraphicsView ()), stateBox( new StateBox()), gridLines( NULL ) { QColor c (242,251,235); // create the background color QBrush brush (c, Qt::SolidPattern); scene->setBackgroundBrush(brush); /* QtCreator generates ui_mainwindow.h, which defines a new class Ui_MainWindow, then makes MainWindow inherit Ui_MainWindow. Ui_MainWindow defines the setupUi() method which creates instances of all QtCreator objects. */ ui->setupUi(this); /* I used QtCreator's design surface (right-click on main window area) to add a layout to hold the graphics view. This also allows the graphicsview to change size and expand/contract to fill the window area as the user changes the size of the main window frame. */ ui->horizontalLayout->addWidget( gview); /* I created a gridLines class to draw a grid to make it interresting and have the chance to see layering of objects in action. */ gridLines = new GridLines (this->width(), this->height()); scene->addItem(gridLines); /* scene holds the custom QGraphicsItem stateBox */ stateBox->setPos(100,100); // give my sample box a starting position (otherwise it would be at 0,0) scene->addItem( stateBox); /* setSizePolicy, when used with the horizontalLayout widget, allows the grapicsview to expand/contract as the user re-sizes the main window. */ gview->setSizePolicy(QSizePolicy::Expanding, QSizePolicy::Expanding); /* add the scene to the QGraphicsView */ gview->setScene( scene); gview->show(); //let the show begin } /* re-implement the resizeEvent handler from the QMainWindow base class, so I can capture the main window resize events, and pass on the new window size to my grid drawing object. */ void MainWindow::resizeEvent(QResizeEvent * ) { QSize wsize = ui->centralWidget->frameSize(); if ( gridLines) gridLines->handleWindowSizeChanged(wsize.width(), wsize.height()); qDebug() << "cw frame height" << wsize.height() << " width: " << wsize.width(); } |
Trackback this post | Subscribe to the comments via RSS Feed