Partie III : Dessiner avec wxWidgets

Dans cette troisième partie de cette série de tutoriels, vous allez apprendre à dessiner avec la bibliothèque wxWidgets.

Un espace de dialogue vous est proposé sur le forum. N'hésitez pas à apporter vos commentaires sur le lien ci-dessous, si vous avez des remarques concernant ce tutoriel.

Commentez Donner une note à l'article (5)

Article lu   fois.

L'auteur

Profil ProSite personnel

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

I. Introduction :

Dans ce chapitre nous allons aborder les méthodes de dessin de la bibliothèque wxWidgets qui sont d'une grande simplicité et qui n'ont rien à envier aux autres bibliothèques du même genre.

Nous ne passerons pas en revue toutes les fonctions de dessin, cet article ayant plutôt pour but de voir la façon de les implémenter. Nous y verrons le tracé de texte, de formes, de traits, mais aussi les pinceaux et les crayons.

Nous nous aiderons pour cela d'un exemple dont vous pouvez voir le résultat sur la copie d'écran ci-dessous.

Image non disponible

II. Explication :

Comme toutes les applications fenêtrées, les opérations de dessin font suite à l'arrivée d'un événement déclenché par le système d'exploitation. Il appellera une méthode de la fiche nommée dans l'exemple OnPaint qui comme dans les chapitres précédents sera désignée par l'intermédiaire d'une table d'événements.

 
Sélectionnez
1.
2.
3.
BEGIN_EVENT_TABLE(TMyFrame, wxFrame)
     EVT_PAINT(TMyFrame::OnPaint)
END_EVENT_TABLE()

Sous wxWidgets les fonctions de dessin sont encapsulées dans une classe nommée : wxPaintDC qui englobe aussi un contexte de périphérique que nous obtenons en appelant son constructeur avec comme paramètre la fiche (this).

Implémentation de la méthode OnPaint :

 
Sélectionnez
1.
2.
3.
4.
5.
6.
7.
8.
void TMyFrame::OnPaint(wxPaintEvent& evt)
{
    wxPaintDC MonDc(this);

    MonDc.DrawRectangle(125,25,90,90);

    //...
}

Ensuite, pour dessiner, il suffit tout simplement d'appeler ses méthodes de dessin, comme DrawRectangle dans l'exemple. Pour avoir la liste des méthodes de dessin consultez l'aide sur la classe wxDC dont dérive wxPaintDC.

Pour écrire du texte vous devez d'abord créer une fonte à l'aide de la classe wxFont que vous affecterez ensuite au contexte de périphérique à l'aide de sa méthode SetFont.

 
Sélectionnez
1.
2.
3.
    wxFont MaFont(20, wxSWISS , wxNORMAL, wxNORMAL, false, "Arial Black");
    MonDc.SetFont(MaFont);
    MonDc.DrawRotatedText("Bonjour",0,100,45);

Le constructeur de wxFont reçoit comme paramètres : la taille de la fonte, sa famille (n'a aucun effet si son nom est renseigné), son style (italique), son poids (gras), la valeur true si elle doit être soulignée, puis son nom. (Consultez l'aide classe wxFont, son constructeur a plusieurs paramètres prédéfinis).

Dans l'exemple nous l'avons sélectionnée par son nom "Arial Black" de taille 20. Nous nous servons de la méthode DrawRotatedText pour dessiner le texte. Cette méthode à comparer à DrawText, peut dessiner un texte avec un certain angle dont la valeur est entrée dans son quatrième paramètre.

Nous pouvons aussi utiliser des pinceaux, par exemple pour peindre le cercle en rouge dans l'exemple. Les pinceaux sont encapsulé dans la classe wxBrush. Comme pour les fontes on les affecte au contexte de périphérique, ici avec la méthode SetBrush.

 
Sélectionnez
1.
2.
3.
    wxBrush MaBrush("RED",wxSOLID );
    MonDc.SetBrush(MaBrush) ;
    MonDc.DrawCircle(300,70,50) ;

wxBrush à plusieurs constructeurs possibles, voir l'aide sur wxBrush. Dans l'exemple j'ai utilisé une couleur prédéfinie et nommée, dont on peut trouver la liste dans l'aide rubrique wxColourDatabase. Tout comme les pinceaux on peut aussi créer des crayons, ceci est l'affaire de la classe wxPen. Là aussi le crayon et affecté au contexte de périphérique à l'aide de sa méthode SetPen.

 
Sélectionnez
1.
2.
3.
4.
5.
6.
    wxColour MaCouleur(0,0,255);

    wxPen MonCrayon(MaCouleur,10,wxSOLID);
    MonDc.SetPen(MonCrayon);
    MonDc.DrawLine(120,20,220,120);
    MonDc.DrawLine(220,20,120,120);

Ici aussi plusieurs constructeurs possibles (voir aide). Pour initialiser la couleur du crayon, j'ai créé une couleur personnalisée à l'aide d'un objet wxColour. Le deuxième paramètre du constructeur de wxPen comme vous vous en doutiez est la largeur du trait. Dans l'exemple nous nous servons de ce crayon pour tracer deux traits formant une croix sur le rectangle.

III. Code source complet:

III-A. wxwin1.h :

 
Sélectionnez
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
#ifndef wxWin1H
#define wxWin1H
//------------------------------------------------------------------------------
class TMyApp : public wxApp
{
public:
    virtual bool OnInit();
};
//------------------------------------------------------------------------------

class TMyFrame : public wxFrame
{
public:
    TMyFrame(const wxString& title, const wxPoint& pos, const wxSize& size,
                                         long style = wxDEFAULT_FRAME_STYLE);
    void OnPaint(wxPaintEvent& evt);
private:

DECLARE_EVENT_TABLE()
};
//------------------------------------------------------------------------------
#endif //wxWin1H

III-B. wxwin1.cpp :

 
Sélectionnez
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.
#include "wx/wxprec.h"

#ifdef __BORLANDC__
    #pragma hdrstop
#endif

#ifndef WX_PRECOMP
    #include "wx/wx.h"
#endif
//------------------------------------------------------------------------------
#include "wxWin1.h"

BEGIN_EVENT_TABLE(TMyFrame, wxFrame)
     EVT_PAINT(TMyFrame::OnPaint)
END_EVENT_TABLE()
    
IMPLEMENT_APP(TMyApp)

//------------------------------------------------------------------------------

bool TMyApp::OnInit()
{
    TMyFrame *frame = new TMyFrame("Mon application",
                                 wxPoint(150, 150), wxSize(480, 360));
    frame->Show(TRUE);
    return TRUE;
}
//------------------------------------------------------------------------------
TMyFrame::TMyFrame(const wxString& title, const wxPoint& pos, const wxSize& size,
                         long style) : wxFrame(NULL, -1, title, pos, size, style)
{
    SetIcon(wxICON(monicone));
    SetBackgroundColour(wxSystemSettings::GetColour(wxSYS_COLOUR_BTNFACE));
}  
//------------------------------------------------------------------------------
void TMyFrame::OnPaint(wxPaintEvent& evt)
{
    wxPaintDC MonDc(this);

    MonDc.DrawRectangle(125,25,90,90);

    wxFont MaFont(20, wxSWISS , wxNORMAL, wxNORMAL, false, "Arial Black");
    MonDc.SetFont(MaFont);
    MonDc.DrawRotatedText("Bonjour",0,100,45);

    wxBrush MaBrush("RED",wxSOLID );
    MonDc.SetBrush(MaBrush) ;
    MonDc.DrawCircle(300,70,50) ;

    wxColour MaCouleur(0,0,255);

    wxPen MonCrayon(MaCouleur,10,wxSOLID);
    MonDc.SetPen(MonCrayon);
    MonDc.DrawLine(120,20,220,120);
    MonDc.DrawLine(220,20,120,120);
}
//------------------------------------------------------------------------------

Ici pas besoin de se préoccuper de la libération des outils de dessin, qui, sous Windows, peuvent parfois être un calvaire. Dans l'exemple les objets de dessin sont créés par valeur, si vous les créez à l'aide de pointeur avec un new, il faudra les supprimer par un delete. Ce n'était pas le cas des objets fenêtrés des chapitres précédents.

IV. Remarques sur ce document :

Ce document relate la réalisation d'une application simple. J'ai réalisé les compilations dans l'EDI de C++ Builder, wxWidgets étant installé comme vu dans l'article : "Installation de wxWidgets dans l'EDI de C++ Builder".

Pour les autres compilateurs veuillez vous référer à leur documentation respective ainsi qu'à la documentation de wxWindows.

A bientôt,

CGi

Avec la contribution d'Alacazam pour la relecture.

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+   

  

Copyright © 2016 CGi. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.