IR3

Année 2024/2025
projet du logiciel de dessin page 1/6

Projet du logiciel de dessin

P. Albers

13 décembre 2024

Le but de ce projet est d’impl’émenter une application permettant de simuler un logiciel simple
de dessins. L’utilisateur pourra créer des différentes formes : carré, cercle, ligne, rectangle et ellipse.
Nous allons utiliser l’approche logicielle classique M V C, qui sépare les classes en trois parties :
le modèle, la vue et le contrôleur. Les classes du modèle représentent les données qui seront
manipulées dans l’application ; les classes de la vue s’occupent uniquement de l’affichage ; les classes
du contrôleur gèrent quant à elles l’interaction avec l’utilisateur.
Le contrôleur informera la vue des actions de l’utilisateur. Et c’est la vue qui mettra à jour le
modèle, comme le montre la figure 1.

contrôleur vue modèle

Figure 1 – Architecture Modèle-Vue-Contrôleur

1 Le modèle
Le modèle comportera toutes les formes dessinables. Toutes les formes seront représentées par
leur rectangle englobant comme le montre la figure suivante :

Nous aurons besoin donc des coordonnées du coin supérieur gauche de la forme que nous nommerons
origine, de sa largeur et de sa hauteur.
Les différentes formes seront le cercle, l’ellipse, le rectangle, le carré et la simple ligne. On
définira la classe F orme qui sera la classe mère de toutes les formes. D’autre part, on définira
l’interface Dessinable qui comportera la méthode dessiner(. . .) qui permettra de dessiner les formes
dans un objet graphique (Graphics). À noter que le classe F orme n’implémente pas la méthode
dessiner(. . .) ; elle est donc bien abstraite 1 . Le diagramme de la figure 2 montre l’ensemble des
classes du modèle.
1. Rappel : en U M L, le nom d’une classe abtraite est écrit en italique.
 IR3
Année 2024/2025
projet du logiciel de dessin page 2/6

Travail à faire

1. Créer un nouveau projet LogicielDeDessin.

2. Créer les trois paquetages : modele, vue et controleur.
3. Implémenter toutes les classes du modèle, conformément au diagramme de
classe.
La méthode dessiner(. . .) devra prendre en compte le fait que les rectangles,
carrés, ellipse et cercles peuvent être pleins ou non. Pour dessiner une ligne,
les coordonnées du deuxième point devront être calculées à partir du premier
point, de la largeur et de la hauteur.

Figure 2 – Diagramme de classes de la partie modèle

2 La vue
La vue va contenir les classes permettant de visualiser le modèle. Comme pour le projet de
l’ardoise magique, nous utiliserons deux classes : la classe F enetre qui correspondra à la fenêtre
de l’application, la classe P anneauDessin qui servira à placer toutes les formes dessinées. Nous
 IR3
Année 2024/2025
projet du logiciel de dessin page 3/6

Figure 3 – Diagramme de classes de la partie vue

ajouterons une troisième classe P anneauBouton qui affichera les boutons qui permettront de choisir
la forme à dessiner.
Les formes seront placées dans une liste de formes. Nous utiliserons pour cela les classes génériques
[Link] < . . . > et [Link] < . . . >. Il faut préciser pour les classes génériques 2 ,
le type des éléments de la liste entre ’<’ et ’>’ de la manière suivante :
Forme uneForme = new Rectangle(new Point(10,20), 50, 70);
List<Forme> listeFormes = new ArrayList<Forme>();
[Link](uneForme);

Comme la fenêtre sera composée de deux panneaux, il faudra indiquer leur position dans la
fenêtre. On pourra répartir le panneau dessin et le panneau boutons en précisant leur position dans
la fenêtre comme suit :
add(monPanneauDessins, [Link]);
add(monPanneauBoutons, [Link]);
2. Pour plus de préciser sur ces deux classes, voir la documentation Java.
 IR3
Année 2024/2025
projet du logiciel de dessin page 4/6

La classe BorderLayout permet de partager la fenêtre en cinq parties (centre, est, ouest, sud et
nord) et de répartir les éléments de la fenêtre 3 .

Les constructeurs de P anneauDessin et P anneauBouton prendront en paramètre la fenêtre

dans laquelle ils se trouvent, de manière à ce que l’on puisse accéder au panneau dessin depuis le
panneau boutons, et inversement. Ce qui implique que lors de l’instanciation des deux panneaux
dans le constructeur de F enetre, la fenêtre se passera en paramètre elle même (mot clef this).

Afin que le panneau puisse être redessiné après l’ajout de chaque nouvelle forme, il faudra
redéfinir la méthode paintComponent(. . .), qui est appelée systématiquement et de manière im-
plicite lorsque l’on demande au panneau de se redessiner. Cette méthode appelera les méthodes
dessiner(. . .) définies dans le modèle. Elle pourra avoir le code suivant :

public void paintComponent(Graphics g){

[Link](g);
for (Forme f : getListeFormes()) {
[Link](g);
}
[Link]();
}

Travail à faire

1. implementer la classe P anneauDessin 4 .

L’attribut listeF ormes devra être ajouté. On pourra s’inspirer de l’exemple
du code donné précédemment pour l’ajout d’une forme.
Le constructeur de P anneauDessin initialisera également la fenêtre passé en
paramètre du constructeur.
2. implementer la classe P anneauBoutons. Le constructeur de P anneauDessin
initialisera la fenêtre passée en paramètre du constructeur.
3. implementer la classe F enetre. Le panneau boutons et le panneau dessin
devront être ajoutés à la fenêtre comme indiqué à la page précédente.

3 L’application
Travail à faire

1. créer la classe LogicielDeDessins.

2. Compléter la méthode main afin qu’elle crée une fenêtre en prenant comme
nom de fenêtre ”logiciel de dessins” et en prenant comme dimension 500 ∗ 500
par exemple.
Ne pas oublier de rendre visible la fenêtre.
3. Ajouter les deux panneaux comme indiqué précédemment.
4. Lancer l’exécutable pour vérification. Le panneau boutons devrait avoir
comme couleur de fond la couleur grise qui est la couleur par défaut.

3. Pour plus d’informations sur BorderLayout, voir la documentation de Java. Il existe d’autres répartiteurs pour
ajouter des éléments dans les fenêtres.
 IR3
Année 2024/2025
projet du logiciel de dessin page 5/6

4 Le gestionnaire de boutons
Le contrôleur comportera deux classes : GestionSouris et GestionBoutons. La gestion souris
sera le contrôleur du panneau dessin. La gestion des boutons sera associée au panneau boutons.
Pour choisir les formes à dessiner, on va créer différents boutons pour chaque forme. Pour ne
cocher qu’un seul bouton à la fois, il est nécessaire de regrouper les boutons dans un gestion-
naire de boutons. La classe GestionBoutons aura ce rôle. Pour cela, elle sera une sous classe de
CheckboxGroup qui permet de regrouper un ensemble de Checkbox.
La méthode choix devra retourner le nom de la Checkbox sélectionnée en utilisant les méthodes
getSelectedCheckbox() de CheckboxGroup qui renvoie la Checkbox sélectionnée, et getLabel() de
Checkbox qui permet de récupérer le nom de la Checkbox.
Ces Checkbox seront ajoutées dans le constructeur de P anneauBoutons de la manière suivante :

[Link] = new GestionBoutons();

setLayout(new GridLayout(5,1));
add(new Checkbox("Rectangle", monControleur, true));
...

La méthode setLayout(. . .) permet d’indiquer comment les différents boutons seront répartis. Ici,
on veut une grille de 5 par 1.
Le constructeur de Checkbox prend en paramètre le nom du boutons, le gestionnaire de boutons
et un booléen qui indique si le bouton doit être sélectionné ou non. On ne peut sélectionner qu’un
seul Checkbox à la fois.

Travail à faire

1. implementer la classe GestionBoutons conformément au diagramme de classe

de la figure 4.
2. Modifier le constructeur de P anneauBoutons qui ajoutera les différents bou-
tons : rectangle, carré, ellipse, cercle et ligne.
3. Vérifier l’affichage de l’application en lançant l’exécutable.

5 Le gestionnaire de dessin
Le gestionnaire de dessins est simimaire au projet de l’ardoise magique. Cependant, il ne s’agit pas
de dessiner au fur et à mesure du clic de la souris. L’idée est de dessiner un rectangle (que l’on appe-
lera un élastique dans la suite) à l’aide de la souris. L’élastique s’affiche en inverse vidéo (par rapport à
la couleur du fond). La première fois, puisque le fond est blanc ; la méthode dessinerElastique() trace
un rectangle noir. Si l’on rappelle cette méthode avec les mêmes points, comme le rectangle est noir,
elle tracera cette fois-ci un rectangle blanc. Ce qui permettra d’afficher, puis d’effacer notre élastique
au fur et à mesure du mouvement de la souris. Le code de la méthode dessinerElastique(. . .) est
donné figure 5.
Une fois le bouton relaché (méthode mouseRelease(. . .)), il faudra récupérer quel est le bouton
sélectionné dans GestionBoutons via P anneauDessin, F enetre et P anneauBoutons. Puis il faudra
ajouter la forme au panneau dessin et lui demander de se redessiner. La structure du code de la
méthode mouseRelease(. . .) est donnée figure 6.
 IR3
Année 2024/2025
projet du logiciel de dessin page 6/6

Figure 4 – Diagramme de classes de la partie contrôleur

Travail à faire

1. implementer la classe GestionSouris conformément au diagramme de classe

de la figure 4.
Dans un premier temps, toutes les formes ne seront pas pleines.
La forme sera ajoutée au panneau dessin et le panneau dessin sera redessiné
(voir le code de la figure 6).
2. Modifier le constructeur de P anneauDessin pour qu’il prenne en compte le
contrôleur du panneau dessin.
3. Vérifier l’affichage de l’application en lançant l’exécutable.
 IR3
Année 2024/2025
projet du logiciel de dessin page 7/6

private void dessinerElastique(int x1, int y1, int x2, int y2){
int xSup, ySup, xInf, yInf;
if(x1>x2){
xSup = x1; xInf = x2;
} else {
xSup = x2; xInf = x1;
}
if(y1>y2){
ySup = y1;
yInf = y2;
} else {
ySup = y2;
yInf = y1;
}
Graphics gc = [Link]();
[Link]([Link]());
[Link](xInf,yInf,xSup-xInf,ySup-yInf);
}

Figure 5 – Code de la méthode dessinerElastique(. . .)

public void mouseReleased(MouseEvent e) {

// on dessine une dernière fois l’élastique:
...
// on récupère le bouton sélectionné:
String boutonSelectionne = [Link]...
// on crée la forme:
Forme nouvelleForme;
if([Link]("rectangle")){
nouvelleForme = new Rectangle(...);
} else if([Link]("carré")){
nouvelleForme = new Carre(...);
} ...
// on ajoute la forme au panneau dessin:
[Link](nouvelleForme);
// et on redessine le panneau dessin:
[Link]();
}

Figure 6 – Structure du code de la méthode mouseReleased(. . .)