Vous êtes sur la page 1sur 23

Interfaces graphiques en QT

Dessiner avec QT cours N3


(Jacques Chauch)

Universit Montpellier II Place Eugne Bataillon 34095 Montpellier Cedex5, France

1. Les (design) patterns


 Dfinition dun catalogue de solutions aux problmes

frquents en programmation
 Les solutions sont formalises indpendamment du

langage de programmation (UML)


 Le livre de rfrence :

Design Patterns Elements of Reusable ObjectOriented Software Erich GAMMA, Richard HELM, Ralph JOHNSON, John VLISSIDES

2 Jacques Chauch Anne 2007-2008

1. Les (design) patterns


 Avantages
 

Capitalisation et partage dun savoir / savoir faire Dfinition dun langage commun entre programmeurs qui permet de communiquer rapidement et efficacement Amliore et facilite la conception dun programme

 Attention
 

Tout ne rentre pas dans des patterns : quelques drives a ne remplace pas la rflexion

 En pratique
 

De plus en plus utilis dans les documentations Leur terminologie est employe dans le nom des classes

3 Jacques Chauch Anne 2007-2008

1. Les (design) patterns : vu par SUN


Why Use Patterns?  They have been proven. Patterns reflect the experience, knowledge and insights of developers who have successfully used these patterns in their own work.
 They are reusable. Patterns provide a ready-made

solution that can be adapted to different problems as necessary.  They are expressive. Patterns provide a common vocabulary of solutions that can express large solutions succinctly. http://java.sun.com/blueprints/patterns/index.html
4 Jacques Chauch Anne 2007-2008

1. Les (design) patterns : factory


 Description informelle :
  

Mthode ou classe permettant de simplifier la cration dobjets Classe de Java : BasicIconFactory,XMLReaderFactory Classe de Qt QMouseDriverFactory, QStyleFactory, etc.. Vous allez dfinir plusieurs convertisseurs Vous pouvez ajouter une mthode statique votre classe qui prenne un mot clef en paramtre et renvoie le convertisseur associ (ou null) La mthode number() permet de crer des QString partir dentier, de float etc.

 Dans les prochains TP


 

 Dans la classe QString




5 Jacques Chauch Anne 2007-2008

1. Les (design) patterns : MVC


 Description informelle : Model View Controller (MVC)
  

Model : stockage et oprations sur les donnes View : reprsentation graphique du Model Controller : permet lutilisateur dagir sur le Model, de le modifier

 On peut avoir plusieurs vues diffrentes dun mme modle


 

Diffrents angles de vue dune mme scne 3D (jeux) Diffrents diagrammes sous excel

6 Jacques Chauch Anne 2007-2008

1. Les (design) patterns : MVC


 View et controller sont parfois envisags comme une

seule entit
 Dans tout les cas le model est compltement isol  On retrouve ce principe dans les librairies graphiques
 

Java/Swing : FormView, tous les TrucModel/ TrucRenderer Qt : QListView, QCanvasView

 Qt 4 utilise largement le pattern MVC


 

Qt Quaterly numro 7 : A model/View table for large dataset Qt Quaterly numro 10 : Implementing MVC

7 Jacques Chauch Anne 2007-2008

2. QGraphicsScene : introduction
 La classe QGraphicsScene fournie des fonctions de

haut niveau pour la cration de graphiques en 2D  Elle permet notamment


   

De crer les objects classiques : rectangle, cercle, zone de texte De dtecter des collisions entre objets De grer simplement des sprites Dassocier un dplacement un objet

 Elle gre le double buffering par dfaut  La classe QPainter permet galement de dessiner

des objets, mais elle est moins puissante  Historiquement QPainter existait avant QGraphicsScene
8 Jacques Chauch Anne 2007-2008

2. QGraphicsScene : principe Model-View


 1.

Pour afficher quelque chose il faut Des objets de type QGraphicsItem


 

Ce sont les briques de base de la scne QGraphicsRectItem, QGraphicsTextItem etc

2.

Un objet de type QGraphicsView (View)


Il fournit une vue particulire dun QGraphicsScene On peut avoir plusieurs QGraphicsView sur un seul QGraphicsScene et donc des vues diffrentes dune mme scne rotation / zoom

QGraphicsView est une widget pas QGraphicsScene

9 Jacques Chauch Anne 2007-2008

2. QGraphicsScene : les formes gomtriques


 Les formes gomtriques de base sont fournies par Qt
  

QGraphicsRectItem QGraphicsLineItem QGraphicsEllipseItem

 Le dessin dun objet de cette classe utilise


 

QPen pour les contours QBrush pour remplir lintrieur

 Par dfaut
 

QPen est noir Il ny a pas de QBrush

10 Jacques Chauch Anne 2007-2008

3. Exemple : afficher un rectangle


Cration dune scene 200x200. Par default pas de taille et il faut utiliser resize(w,h) (sinon rien ne saffiche) Une vue est associe c1. int main(int argc, char **argv) { QApplication a(argc, argv); QGraphicsScene c1(0,0,200,200); QGraphicsView vue(&c1); c1.addRect(10,20,100,40); vue.show();

return a.exec(); }
11 Jacques Chauch Anne 2007-2008

3. Exemple : setPen / setBrush


int main(int argc, char **argv) { QApplication a(argc, argv);

QPen p(Qt::yellow); QBrush b(Qt::blue); QGraphicsScene c1(0,0,200,200); QGraphicsView vue(&c1); QGraphicsRectItem *rect = c1.addRect(10,20,100,50);
12

rect->setPen(p);

Jacques Chauch Anne 2007-2008

3. Exemple : crer un QPen


 Crer un QPen particulier


QPen::QPen ( const QBrush & brush, // remplissage, couleur qreal width, // largeur du trait Qt::PenStyle style = Qt::SolidLine, // style du trait Qt::PenCapStyle cap = Qt::SquareCap, // style des extrmits Qt::PenJoinStyle join = Qt::BevelJoin ) // style des connections

13 Jacques Chauch Anne 2007-2008

3. Exemple : utiliser un QPen


int main(int argc, char **argv) { QApplication a(argc, argv);

QPen p(Qt::yellow); p.setWidth(8); QVector<qreal> dashes; dashes << 1 << 4 << 3 << 4 << 9 << 4 << 9 << 4; p.setDashPattern(dashes); QBrush b(Qt::blue); QGraphicsScene c1(0,0,200,200); QGraphicsView vue(&c1);
Jacques Chauch Anne 2007-2008 14

3. Exemple : crer un QBrush


 Crer un QBrush particulier


QBrush::QBrush ( const QColor & color, BrushStyle style = SolidPattern ) QBrush::QBrush ( const QPixmap & pixmap )

Qt::BrushStyle

15 Jacques Chauch Anne 2007-2008

3. Exemple : utiliser un QBrush


int main(int argc, char **argv) { QApplication a(argc, argv); QPen p(Qt::yellow); QBrush b(Qt::blue); b.setStyle(Qt::Dense2Pattern); QGraphicsScene c1(0,0,200,200); QGraphicsView vue(&c1); QGraphicsRectItem *rect = c1.addRect(10,20,100,50); rect->setPen(p); rect->setBrush(b); vue.show(); return a.exec();
Jacques Chauch Anne 2007-2008

16

3. Exemple : utiliser lordre dinsertion


 Lordre d addition dfinit lordre de recouvrement

c1.addRect(10,20,50,100,QPen(),QBrush(Qt::blue)); c1.addRect(10,20,100,50,QPen(),QBrush(Qt::yellow)); c1.addRect(10,20,100,50,QPen(),QBrush(Qt::yellow)); c1.addRect(10,20,50,100,QPen(),QBrush(Qt::blue));

17 Jacques Chauch Anne 2007-2008

3. Exemple : ellipse
// les angles sont en 16me de degr QGraphicsEllipseItem * addEllipse ( qreal x, qreal y, qreal w, qreal h, const QPen & pen = QPen(), const QBrush & brush = QBrush() )

QGraphicsEllipseItem *el = c1.addEllipse(50,50,20,20,p,QBrush(Qt::red)); el->setStartAngle(600); el->setSpanAngle(4500);

18 Jacques Chauch Anne 2007-2008

3. Exemple : Polygon et Line


QPolygonF poly; poly << QPointF(10.0,20.0) << QPointF(10.0,30.0) << QPointF(10.0,30.0) << QPointF(40,30); c1.addPolygon(poly);

c1.addLine(20,20,50,50);

19 Jacques Chauch Anne 2007-2008

3. Exemple : Text
c1.addRect(10,20,50,40,QPen(),QBrush(Qt::yellow)); QGraphicsTextItem * t1 = c1.addText("Rectangle\njaune"); t1->setPos(10,60); c1.addRect(70,20,90,40,QPen(),QBrush(Qt::blue)); QGraphicsTextItem * t2 = c1.addText("Rectangle\nbleu"); t2->setPos(80,60);

20 Jacques Chauch Anne 2007-2008

4 Animation: principes
 La classe QGraphicsItemAnimation dfinit une

animation pour les objets de type QGraphicsItem


 Cette annimation seffectue partir dun timer et

dune scene ( visualise par GraphicsView )


 Cette animation doit suivre une ligne de dplacement

21 Jacques Chauch Anne 2007-2008

4 Animation : Exemple
QApplication a(argc, argv); QGraphicsRectItem *rect = new QGraphicsRectItem(0, 0, 40, 20); rect->setBrush(QBrush(Qt::blue)); QTimeLine *timer = new QTimeLine(5000); timer->setFrameRange(0, 100); QGraphicsItemAnimation *animation = new QGraphicsItemAnimation; animation->setItem(rect); animation->setTimeLine(timer); for (int i = 0; i < 200; ++i) animation->setPosAt(i / 200.0, QPointF(i , i)); animation->setRotationAt(80.0/200.0,30); animation->setRotationAt(180.0/200.0,90); QGraphicsScene *scene = new QGraphicsScene(); scene->setSceneRect(0, 0, 250, 250); scene->addItem(rect); QGraphicsView *view = new QGraphicsView(scene); view->show(); Jacques Chauch Anne 2007-2008 timer->start(); return a.exec();

22

5 Open GL
 Open GL est une application de Silicon Graphics  Open GL permet de dessiner en 3D  Open GL est dfinit dans QGLWidget  QGLWidget doit se substituer viewport dans la vue issue de

QgrapicsVue
 Exemple utilisant OpenGL en 2D (lignes changes ) : #include <QGLWidget> #include <QGLFormat> .. QGraphicsView vue(&c1); QGLWidget *gl = new QGLWidget(QGLFormat(QGL::SampleBuffers)); vue.setViewport(gl);
23 Jacques Chauch Anne 2007-2008