Dessin Vectoriel
Contents
1. E effet int E police Sting E tailePolice int E texte String E zoneTexte JText rea E public Dverride E public Dverride E public Dverride E public Override E public Dverride E public Dverride E public Override public Override E public Dverride E public Override E public Dverride E public Dverride J ntf dessinerMoti dessinerPoignees er erf e nnen ch E public Dverride Ge ere public Dverride modGras public Dverride modltaliquef E public Dverride public Dverride ouvrirl redimensionner orl E setPolice z dessinerMotif E setPolice jistrerl setTaillePolice Instancel E setTextef D Texte Rectarglel J Textel Rectargle E toStringl FIGURE 8 2 Diagramme UML du mod le Dessin vectoriel 47 ModeLEvenement Creationkvenemert t Suppression venoment 7 Modification venement FIGURE 8 3 Diagramme UML des v nements du mod le simplifi Model Evenement Eyenement dessin Dessin motif presE venement Motif EE motiflnitial Motif EE E avai E setMotifhpresE venement setMotiflnitial toStringl CreationE venement SuppressionE venement Mod2. LLL LI Le Le Le La La FIGURE 4 2 Barre d options Classe BarreOutils Elle contient tous les outils n cessaires au dessin de l image vectorielle Elle permet de cr er d effacer s lectionner des objets Dessin vectoriel 26 4 2 LA VUE Ouvrir benjamintardieu gt Nom Date de modification Desktop mardi 11 mai 2010 16 50 Documents vendredi 26 mars 2010 18 03 T l chargements dimanche 9 mai 2010 11 11 Biblioth que samedi 8 mai 2010 12 01 Vid os mardi 20 avril 2010 11 04 amp Musique jeudi 17 d cembre 2009 13 44 Images samedi 10 avril 2010 11 23 Public mercredi 12 ao t 2009 21 52 Sites dimanche 2 mai 2010 23 41 Format de fichier Fichier svg 4 Annuler Ouvrir nn s FIGURE 4 3 Fen tre Ouvrir C est exactement le m me principe que BarreOption elle h rite de Ac tionListener poss de des JButton et la m thode ActionPerformed ActionEvent e qui va agir sur le mod le gr ce au contr leur La seule diff rence r side sur l h ritage principal de la classe En effet Celle ci n herite pas de JPanel mais de JToolBar L objet JToolBar va per mettre l utilisateur de d crocher la barre de la fen tre pour obtenir une barre ind pendante dans une nouvelle fen tre Il suffira de fermer cette nou velle fen tre pour que la barre se remette sa position initiale 7 ES FIGURE 4 4 Barre d outils Dessin vectoriel 27
3. changerCaracteristiqueT extef E changerCouleurBorduref E changerCouleurMotiff ajouterMotif ajouterMotiff create bject Dessin estEnregistrer find remplaceMotif setHauteurl setLargeurl setMotifl supprimerMotiff supprimerMotiff toStringl toutDessiner Ve oi zoomln zoom utf changerLargeurBordurel changerNbCotePolygonel changerOpacitef 1 E Controleur couleurCourante 6 1 deplacerMotifl dessiner BR effacerMotif enregistrer E enregistrerSousf faireCorrespondreMotif E getSelectedHandles E mettre JourMenulf E modifierDernierE venement E modifierMetiff E motifCourant E nouveauDessin nouvellelnstanceMotiff nouvelleDutilsf ouvrir E quitter E redimentionnerMotiff amp repaintDessin retablir E selectionnerMotif setModel E setMotiff zoomC zoomln E zoomln E zoom0ut ol Yue Fenetre barreEtatBas BarreEtatBas E barreEtatHaut BarreEtatHaut barreMenu BarreMenu E barreOption BarreOption E barr
4. pubic Dvenide EE afficheMenuLargeurBordurel E atficheMenuNbCotePolpgone J cheMenuDPaciel aicheMenuTeste J BareEatHautl focusBainecf focusLest modiievaleuMenuBerdurel iodifieivaleurMenuNbCote moafiefyaleurhenuDpacocis J mod ie ValeuMenuPolce aieChangedl ness lt lt Unknown gt gt FocusListener lt lt intallacey gt lt lt Unknowny ChangeListener FIGURE 8 8 Diagramme UML de la vue Dessin vectoriel
5. Verdana C est la valeur de la police du texte Elle est initialis e Verdana int taillePolice 14 C est la taille du texte en pixel Elle est initialis e 14 String texte C est la valeur du texte que l utilisateur a rentr Les m thodes qui n ont pas t red finies dans MotifRectangulaire vont tre red finir ici Ces m thodes servent dessiner le motif copier ouvrir enregistrer Ces m thodes sont propres a l objet c est pour a qu elles sont red finies ici Pour dessiner du texte on utilisera l objet Graphics de la librairie AWT de Java La m thode drawString int x int y string texte permet tra d y rem dier Pour enregistrer du texte il s agit de le mettre sous sa forme SVG En svg le texte est repr sent de la mani re suivante dans le fichier lt text font family Verdana font size 10 gt Pour voir les attributs de la balise voir la classe Motif Les attributs font family Verdana repr sente la police du texte afficher font size 10 repr sente la taille du texte en pixel Pour ouvrir du texte il s agira d associer les attributs de la balise text avec leurs variables correspondantes Dessin vectoriel 21 4 1 LE MOD LE Classe Polygone Cette classe h rite de Motif Comme son nom l indique elle repr sente un objet de type polygone Un polygone est repr sent par un ensemble de points xi yi
6. 6 Ce bouton permet d annuler une action pr c demment execut e sur un motif pr cis 7 Ce bouton permet de r tablir une action pr c demment annul e par l utilisateur 8 Ce bouton permet de couper le motif et de le copier dans le presse papiers 9 Ce bouton permet de copier le motif dans le presse papiers 10 Ce bouton permet de coller le motif dans le dessin 11 Ce bouton permet de d zoomer sur le dessin 12 Ce bouton permet de zoomer sur le dessin Barre d dition La barre d dition permet de modifier les diff rentes caract ristiques du motif courant Selon le motif courant ses caract ristiques ne sont pas les m mes c est pour cela que cette barre peut avoir diff rents champs Dessin vectoriel 35 5 1 INTERFACE GRAPHIQUE Opacit Opacit 100 FIGURE 5 6 Opacit Ce champ permet de modifier l opacit d un motif L opacit d un motif est comprise entre 0 invisible et 100 opaque par d faut un motif a une opacit gale 100 Largeur bordure Largeur bordure d FIGURE 5 7 Largeur bordure Ce champ permet de modifier la largeur de la bordure d un motif La largeur d un motif varit entre 0 pixel et 255 pixels par d faut un motif a une largeur de bordure gale 0 pixel Nombre de c t s Nombre de cot s FIGURE 5 8 Nombre de c t s Ce champ permet de modifier le nombre de c t s d un motif de type polygon
7. 0 42 repr sente la transparence de la bordure Pour ouvrir un motif il s agira d associer chaque valeur de chaque attribut de la balise sa variable correspondant dans la classe Classe MotifRectangulaire Cette classe h rite de la classe Motif et est abstraite elle aussi Elle permet de sp cifier encore plus les types de motifs que l on pourra dessiner En effet on a distingu deux sortes de motifs les motifs qui vont se dessiner gr ce un point x y et leur largeur et leur hauteur les motifs un peu plus complexes qui n cessitent d autres caract ris tiques comme par exemple le polygone qui n cessite autant de point Xi Yi que de sommets qu il poss de Cette classe repr sentera donc les motifs assez simple qui n cessitent seulement un point x y une largeur et une hauteur pour tre dessin s Nous avons donc nomm cette classe en fonction de ces caract ristiques Celle ci a donc deux attributs suppl mentaires int largeur repr sente la largeur du motif dessiner int hauteur repr sente la hauteur du motif dessiner Ensuite quelques m thodes de la classe abstraites Motif ont tait redefi nis En effet les objets de cette classe ayant des caract ristiques en commun ils vont donc poss der des m thodes en commun Ces m thodes servent dessiner les poign es d placer redimensionner En effet ces m thodes utilisent le point x y du motif la large
8. outils ellipse gt ce qui per mettra de dessiner une ellipse 5 Ce bouton change l outil courant avec l outils lt polygone gt ce qui permettra de dessiner un polygone 6 Ce bouton change l outil courant avec l outils lt gomme gt ce qui per mettra d effacer un motif de dessin 7 Ce bouton change l outil courant avec l outils lt texte ce qui permet tra d crire du texte dans le dessin Barre d tat Cette barre permet d afficher tous les informations courantes du dessin Notamment la position de la souris la couleur de remplissage d un motif et la couleur de sa bordure Remplissage ES X 10 Bordure ai Y 10 FIGURE 5 13 Barre d tat Zone de dessin La zone de dessin permet d afficher le dessin courant r alis par l utili sateur C est dans cette zone que vous pourrez int ragir avec le dessin Dessin vectoriel 38 5 2 LES ACTIONS FIGURE 5 14 Zone de dessin 5 2 Les actions Dans cette partie nous verrons toutes les actions possibles executer avec cette application Nous expliquerons comment acc der toutes ces actions et nous verrons comment les r aliser Interface Comme nous l avons vu l interface graphique se divise en plusieurs par ties Nouveau dessin Fichier Nouveau Racourci ctrl n Vous pouvez aussi y acc der par la barre d option voir le chapitre pr c dent Ouvrir dessin Fichier O
9. Edition Coller Racourci ctrl v Vous pouvez acc der par la barre d option voir le chapitre pr c dent D zoomer Vous pouvez y acc der par la barre d option voir le chapitre pr c dent Zoomer Vous pouvez y acc der par la barre d option voir le chapitre pr c dent Changer les caract ristiques d un motif Vous pouvez y acc der par la barre d dition voir le chapitre pr c dent Changer la couleur Vous pouvez acc der la couleur gr ce la barre d tat il vous suffit de cliquer sur la couleur pour q une fen tre permette de changer la couleur Changer d outils Vous pouvez aussi y acc der par la barre d outils voir le chapitre pr c dent Motif Nous allons aborder toutes les int ractions que l on peut r aliser sur un motif de sa cr ation sa suppression Dessin vectoriel Al 5 2 LES ACTIONS Cr ation Pour la cr ation du motif tout d abord il vous faut choisir le motif que vous d sirez dessiner Ensuite selon le motif que vous avez choisi la mani re de le dessiner peut tre diff rente Pour dessiner une lt ligne gt dans la zone de dessin vous devez effectuer un clique gauche pour d terminer le premier point de la ligne et ensuite ne pas relacher le bouton de la souris pour d terminer le deuxi me point de la ligne en relachant se dernier Pour la cr ation d un lt rectangle gt ou d une lt ellipse
10. JLabel abaEouieuFemplssage JLabel E ibeleCoordhnne JLabel E ibeleCoordonneY JLabel E IbeleCeuleu erdure JLabel E ibeleCouleu Remplissage JLabel E pubic G venide E pubic Dvenide E pubic Ovenide E pubic GDvenide E pubic Ovenide stficherPostionSaust BareEtalBzs modiieValeuiMenuCouleurEordurel 1 modfiexvaleurMenuEouleurRemplssaga mouseCiickedl mouseEnteedf 1 mouseEsitedt J mousePressed mouseReleased J I EURE E snnuler JMenultem E coler JMenultem E controleur Contrcleur E copier JMenulten E couper JMenullem E edition Menu E erregistro JMenultom E emegistreSous Menuitem E sote Menen E fichier Mere E imprimer Menuen menuBar JMenuBar E nouveau JMenultom E ouvir JMenuitem E aer JMenulten E retabir JMenuitem E pubic Overide nPeikumedt activerArnulerl erEnegisteneni erFelablf E BareMenul ctiveAnnulel ctiveEniegisEmeni E desactveRetabil 1 Controleur Contioleur E dessin Dessin E fenetre Fenete E made int E motif Motit IDDE_CREATION irt ODE GOMME int ODE SOURIS int 0DE Z00M int icheiPosiionSouris IouteMotilL reckt hangatCaractaistiqueT extel hangsrCoueu orduel hangsrCouleuMotil hangsrLargeuBorduel hangerNbLotePobgonel dirDerieEvenement E modiferMotfl
11. Dvenide pukic GDvenide E pubic Dvenide public Overide pubic Ovenide E pubic Overide E chengeiDimensionPaneaut mouseCickedl D mouseDragged D moussEntersdl D mouseEsited J mouseMoved J E mousePressedi mouseReleased E paint paintAvecMotiCourantl J ZoreDeDessil I Il cinkerface gt gt exUnknownyy MouseMotionListener T x lt lt interfae gt gt lt lt Unknown gt gt MouseListener Le Fenetre IE bareEtaBas BareEtatBas bareEtaHaut BareEtatHaut bareMenu BarteMenu baregpton BaneDption bareDutls BarreDutis E controleur Controleur E scroller JScrolPane E oneDeblessin ZoneDeDessin sctiverAnnuler activerEmregistenent J D activerRetabir sicheManuLatgeuBordurst afficheMenuNbCotePolyoone J afficheMenu pacite J E sffieheM nuT end A aficherPostionseurit shangerDimensimZoneDeDessinl desactiverAnnule E dessctiverEnvegitiementt D desactiveretablil E Fenete J Ent D nod ieialeuMenuBordue nodfieivaleurMenuCouleur5 crduef nodifievaleurkMenuCouleurRemplssaga nod eivaleurMenuNbCote J nodfieivaleurMenuDpacecief E nediieiveleunMenuPaliel epainiDessinf E oomerDessin _ A A BarreEtatBas E soten Controleur E labalCoordernex JLabel E labelCoordonneY JLabel E l balCouleuContour
12. Elle agit de la meme maniere que le premier bouton ic ne de la troisieme Dessin vectoriel 34 5 1 INTERFACE GRAPHIQUE section de la barre d options L entr e Coller permet de coller le motif dans le dessin Elle agit de la m me mani re que le deuxi me bouton ic ne de la troisi me section de la barre d options Barre d options La barre d option donne acc s des boutons ic nes permettant d effec tuer de nombreuses op rations sur le dessin Il y a notamment le bouton nouveau ouvrir enregistrer enregistrer sous imprimer annuler r tablir copier coller couper zoomer et anfin d zoomer LCL ld LLL LN Le La La FIGURE 5 5 Barre d options 1 Ce bouton permet de cr er un nouveau dessin Cela efface l ancien dessin si il y en a un et cr e un nouveau dessin sans nom et de taille 800 pixels de largeur par 600 pixels de hauteur 2 Ce bouton permet d ouvir un dessin au format SVG 3 Ce bouton permet d enregistrer le dessin actif sous son nom d origine Si aucun nom n a t pr alablement donn au dessin le s lecteur de fichier lt Enregistrer sous appara tra pour saisir le nom du fichier 4 Ce bouton permet de sauvegarder le dessin actif sous un autre nom que celui d origine Elle appelle le s lecteur de fichier lt Enregistrer sous gt 5 Ce bouton permet d imprimer le dessin actif Elle appelle la bo te de dialogue lt Impression gt
13. de la mani re suivante dans le fichier lt line x1 102 y1 73 x2 56 y2 83 gt Les attributs x1 yl x2 y2 representent respectivement les points x y x2 y2 Pour ouvrir une ligne il suffira de r cup rer les attributs correspondant de la balise et d affecter leurs valeurs aux variables correspondantes Classe Historique Celle ci va permettre la classe Dessin de g rer deux piles d v nements Ces piles d v nements vont permettre de g rer les actions ou v ne ment produites par l utilisateur utilisant le programme Elles serviront r tablir ou annuler une action lorsque l utilisateur cliquera sur le bouton correspondant Elles sont repr sent es de la mani re suivante Stack lt Evenement gt historiqueAnnuler Cette pile contiendra tous les v nements produits par l utilisateur cr ation redimensionnement d placement effacement d un motif Stack lt Evenement gt historiqueRetablir Cette pile permettra de gar der en m moire les v nements annul s par l utilisateur pour pouvoir ensuite les r tablir au besoin Les m thodes de cette classe permettront d empiler ou d piler les piles d v nements pour pouvoir g rer efficacement la gestion des v nements Mod lisation des v nements Les v nements sont mod lis s selon le pattern tat Nous aurons donc une classe abstraite Ev nement pour mod liser un Evenement Puis nous Dessin vectoriel 23 4 1 LE MOD
14. er une instance du model qui sera l objet dessin de type Dessin et une instance de la vue qui sera l objet fen tre de type Fenetre Pour respecter le model MVC le contr leur est pass en param tre au constructeur de la vue Cela permettra la vue lors des diff rentes actions de l utilisateur de modifier le mod le comme il se doit pour que l image vectorielle prenne forme Les actions de l utilisateur sont g r es par des couteurs ou Listener en Java contenues dans la vue qui vont appeler les m thodes correspondantes du contr leur Dessin vectoriel 31 Chapitre 5 Manuel d utilisation Le logiciel DVect est une application permettant de r aliser des dessins vectoriels Tout au long de ce manuel nous allons voir comment utiliser toutes les fonctionnalit es de cette application pour avoir une maitrise totale du logiciel 5 1 Interface graphique L interface graphique se divise en plusieur partie nous allons d couvrir ces diff rentes parties D iel Le logiciel Open Source de Fichier Edition CELL js Jus I e JUL Le La La Ei 2 A Remplissage D X 788 Bordure ME wa FIGURE 5 1 Interface graphique 32 5 1 INTERFACE GRAPHIQUE Nous allons d couper notre interface graphique en six parties distinctes 1 La barre de menu d roulant comporte les menus d roulants relatifs l application La barre d options donne acc
15. est une biblioth que graphique pour le langage de programma tion Java faisant partie du package Java Foundation Classes JFC inclus dans J2SE Swing offre la possibilit de cr er des interfaces gra phiques identiques quel que soit le syst me d exploitation sous jacent Il utilise le principe Mod le Vue Contr leur MVC les composants Swing jouent en fait le r le du contr leur au sens du MVC et dispose de plusieurs choix d apparence de vue pour chacun des composants standards Image vectorielle Une image vectorielle en informatique est une image num rique compos e d objets g om triques individuels segments de droite polygones arcs de cercle etc d finis chacun par divers attri buts de forme de position de couleur etc Elle se diff rencie de cette mani re des images matricielles ou lt bitmap gt dans lesquelles on travaille sur des pixels L int r t est de pouvoir redimensionner l image volont sans aucun effet d escalier L inconvenient est que pour at teindre une qualit photo r aliste il faut pouvoir disposer d une puis sance de calcul importante et de beaucoup de m moire Biblioth que Librairie En informatique une biblioth que ou librairie est un ensemble de fonctions utilitaires regroup es et mises disposi tion afin de pouvoir tre utilis es sans avoir les r crire Les fonctions sont regroup es de par leur appartenance un m me domaine concep tuel math mati
16. et son nombre de points Des attributs suppl mentaires sont donc n cessaires pour le d finir int pointX tableau des abscisse xi du polygone int point Y tableau des ordonn s yi du polygone int nbPoint nombre de point du polygone Les m thodes abstraites de la classe Motif vont devoir tre red finies en fonction de ses variables suppl mentaires Une m thode suppl mentaire va tre ajout e C est la m thode calculerPolygone Celle ci va permettre de calculer l ensemble des points du polygone en fonction d un point central d fini par l utilisateur Les deux formules utilis es sont rayon x cos x m decalage nbPoint 2 x rayon x sin i x x decalage nbPoint 2 y La premi re permet de calculer la coordonn e xi et la deuxi me la coor donn e yi des points du polygone Le rayon est la distance du centre n importe quel point du polygone i est le numero d un des points du polygone qui varit entre 0 et nbPoint 1 nbPoint repr sente le nombre de point que poss de le polygone Le d calage sert seulement faire tourner la figure sur elle m me x et y repr sentent respectivement l ordonn e et l abscisse du centre du polygone c est le point o a cliqu l utilisateur pour dessiner sa figure Pour dessiner un polygone on utilisera l objet Graphics de la librairie AWT de Java La methode fillPolygon int pointX int pointY int nbPoint perme
17. la libraire Swing On peut voir en bas droite de la barre des coordonn s X Y ils repr sentent les coordonn es de la souris dans la zone de dessin Ils sont rafraichis gr ce une m thode du contr leur appel e par une m thode de la zone de dessin Remplissage Ez X 10 Bordure D Y 10 FIGURE 4 9 Barre d etat chantillons Teinte Saturation Luminosit HSB RVB PIO O y p e p E e p eT T a O E D O T a E o N MENMAN az R cents LI H 1 A F d m O C GL Apercu D Echantillon de texte Echantillon de texte FIGURE 4 10 Fen tre pour changer de couleur Dessin vectoriel 29 4 3 LE CONTR LEUR Classe ZoneDeDessin Celle ci h rite de JPanel car les JPanel sont les objets les plus simples utiliser de la librairie Swing pour dessiner Le JPanel poss de un objet Graphics2D g qui poss de diverses m thodes permettant de dessiner tous types de formes de bases g drawRect pour dessiner des rectangles g drawOval pour dessiner des ellipses g drawPolygon pour dessiner des poylgones g drawLine pour dessiner des lignes g drawString pour dessiner du texte On a ensuite des m thodes pour dessiner le reste des propri t s des ob jets g setColor pour donner la couleur du dessin g setStroke pour donner l paisseur de la bordure du dessin z ro si pas de bordure g s
18. le motif gr ce aux poign es qui se seront affich es autour du motif Enfin vous pouvez aussi le d placer en effectuant un clic gauche dessus sans le relacher puis de bouger la souris la ou vous voulez mettre le motif Une fois le motif la place que vous d sirez il vous suffit de relacher le clic gauche Suppression Pour supprimer un motif il vous suffit de prendre l outils lt gomme gt et ensuite il vous reste plus qu faire un clic gauche sur le motif que vous voulez supprimer et le motif sera supprim du dessin Dessin vectoriel 43 Chapitre 6 Perspectives et discussions 6 1 Perspectives Le projet fonctionne correctement mais nous pourrions impl menter des fonctionnalit s suppl mentaires qui pourraient fortement enrichir nos connais sances et am liorer le projet L implementation de calque serait tr s utile pour l utilisateur et n est pas difficile impl menter gr ce la structure de notre projet Un autre ajout utile serait d impl menter la rotation d un mo tif celle ci devrait s impl menter facilement gr ce un objet de la librairie Swing con u pour cet effet Ces am liorations devraient permettre un uti lisateur d butant dans le domaine du dessin vectoriel de profiter pleinement de l application 6 2 Discussion Il faut savoir que ce logiciel de dessin vectoriel est une version simpli fi e des logiciels existant sur le march c est pour cela qu il reste encore
19. red finir ici Ces m thodes servent dessiner le motif copier ouvrir enregistrer Ces m thodes sont propres a l objet c est pour a qu elles sont red finies ici Pour dessiner une ellipse on utilisera l objet Graphics de la librairie AWT de Java La methode fillOval int x int y int largeur int hauteur permettra d y rem dier Pour enregistrer une ellipse il s agit de la mettre sous sa forme SVG En svg une ellipse est repr sent e de la mani re suivante dans le fichier lt ellipse cx 128 cy 108 rx 53 ry 31 gt Les attributs cx 128 repr sente l abscisse x du centre de l ellipse cy 108 repr sente l ordonn y du centre de l ellipse rx 108 repr sente le rayon sur l axe des abscisse ry 108 repr sente le rayon sur axe des ordonn s Dessin vectoriel 20 4 1 LE MOD LE Pour voir les autres attributs de la balise voir la classe Motif Pour ouvrir une ellipse il s agira donc de r cup rer les attributs ci dessus et de recalculer le point x y ainsi que la largeur et la hauteur Pour Xx cx IX y cy ry largeur rx 2 hauteur ry 2 Classe Texte Cette classe h rite de MotifRectangulaire et donc indirectement de Motif Comme son nom l indique elle repr sente un objet de type texte Quelques attributs suppl mentaires permettent de d finir un objet de type texte String police
20. s des boutons permettant d effectuer de nombreuses op rations sur le dessin actif La barre d dition permet de modifier les caract ristiques du motif courant La barre d outils contient une serie de bouton permettant de choisir le motif que vous voulez dessiner sur le dessin La barre d tat contient diff rentes informations relatives au dessin La zone de dessin permet d afficher le dessin courant r alis par l utilisateur Barre de menu d roulant La barre de menu d roulant c est l o il y va avoir les diff rentes actions qui pourrons tre ex cut es sur le dessin Cette barre de menu est constitu e de deux menu Fichier et Edition Fichier Edition FIGURE 5 2 Barre de menu d roulant Fichier Le sous menu Fichier contient tous les fonctions qui n cessitent l utili sation de fichiers sur le disque Fichier Edition Nouveau Ctri N Ouvrir Ctrl O Enregistrer sous Ctrl Masj S Imprimer Ctri P Exporter Quitter FIGURE 5 3 Sous menu Fichier Dessin vectoriel 33 5 1 INTERFACE GRAPHIQUE L entr e Nouveau permet de cr er un nouveau dessin Cela efface l ancien dessin si il y en a un et cr e un nouveau dessin sans nom et de taille 800 pixels de largeur par 600 pixels de hauteur L entr e Ouvrir permet de charger un dessin au format SVG depuis un fichier L entr e Enregistrer permet de sauvegarder le dessin actif
21. sous son nom d origine Si aucun nom n a t pr alablement donn au docu ment le s lecteur de fichier lt Enregistrer sous gt appara tra pour saisir le nom du fichier L entr e Enregistrer sous permet de sauvegarder le dessin actif sous un autre nom que celui d origine Elle appelle le s lecteur de fichier lt Enregistrer sous gt L entree Exporter permet d exporter un dessin en divers formats PNG L entree Imprimer permet d imprimer le dessin actif Elle appelle la bo te de dialogue lt Impression gt L entr e Quitter permet de quitter l application DVect Si le dessin n a pas t sauv s une bo te de dialogue s ouvrira afin de proposer leur sauvegarde Edition Le sous menu Edition donne acc s aux fonctions de communication avec le presse papiers et avec l historique d evenement effectu e sur le dessin Edition Copier Ctrl C Couper Cui X Coller Ctri V FIGURE 5 4 Sous menu Edition L entree Annuler permet d annuler une action pr c demment execu tee sur un motif precis L entree R tablir permet de r tablir une action pr c demment annu lee par l utilisateur L entree Couper permet de couper le motif et de le copier dans le presse papiers Elle agit de la meme maniere que le troisieme bouton ic ne de la troisieme section de la barre d options L entree Copier permet de copier le motif dans le presse papiers
22. 4 2 LA VUE Classe BarreEtatHaut C est toujours le m me principe que BarreOption elle h rite de Ac tionListener poss de des JButton pour mettre en gras ou soulign et la m thode ActionPerformed ActionEvent e qui va agir sur le model gr ce au contr leur Mais ce n est pas tout Cette classe poss de des JSpinner objet Swing qui sont des boites de texte avec des fl ches vers le haut et le bas qui vont permettre de modifier la valeur de la boite correspondante Pour savoir quand l utilisateur modifie ces objets la classe BarreEta tHaut doit h riter de l interface ChangeListener celle ci va permettre d uti liser la m thode stateChanged ChangeEvent e qui sera appel e d s qu un JSpinner sera modifi Bien s r le contr leur sera utilis dans cette m thode pour faire la liaison avec le model Pour g rer les v nements pour annuler retablir la classe h rite de Fo cusListener Celle ci va permettre de cr er un v nement gr ce au contr leur au moment o il clique sur un des JSpinner c est le moment ou la barre gagne le focus gr ce aux m thodes focusGained FocusEvent e et focusLost FocusEvent e Cette classe poss de aussi des JLabel Ce sont des objets qui servent afficher du texte ou des images assez facilement Dans notre cas on les utilise pour afficher du texte Il y a aussi une JList qui permet d afficher la liste des polices On distinguera ensuite quatre skins diff rents
23. Dessin Vectoriel Kilian Cousein amp Benjamin Tardieu 2009 2010 Remerciements Nous tenons remercier tout particuli rement Notre tuteur M Meynard pour ses conseils et son soutien technique Les diff rents diteurs des logiciels qui nous ont servis pour le d ve loppement mais aussi durant l criture de ce rapport La facult des Sciences pour les nombreuses connaissances qu elle nous a permis d acqu rir bien videmment transmises par les professeurs mais galement par les changes entre tudiants Glossaire MVC Le mod le vue contr leur organise une application interactive en trois modules s par s un pour le mod le de l application accompagn de sa repr sentation des donn es ainsi que la logique du m tier un second pour les vues qui pr sentent les donn es l utilisateur et recueillent ses entr es et le troisi me pour un contr leur qui achemine les requ tes et les flux de contr le Java C est un langage de programmation orient objet d velopp par Sun Microsystems Il permet de cr er des logiciels compatibles avec de nom breux syst mes d exploitation Windows Linux Macintosh Solaris Java donne aussi la possibilit de d velopper des programmes pour t l phones portables et assistants personnels Enfin ce langage peut tre utilis sur internet pour des petites applications int gr es la page web applet ou encore comme langage serveur jsp Swing C
24. GNEE int DROITE_HAUT_POIGNEE int DROITE_POIGNEE int GAUCHE_BAS_POIGNEE int GAUCHE_HAUT_POIGNEE int GAUCHE_POIGNEE int HAUT_POIGNEE int fdure rduref EEEEEEEEEEEEEEEEEEEEEEEE m DVI setCouleur J E setCouleurBordure E setLargeurBordurel E setOpaciteBorduref IS setOpaciteCouleurl setSelectedHandlef eek Polygone E decalage int El ma int E maxY int E minX int E minY int E nbPoint int E pointx int E point int E rayon int E public Dverride E public GOverride E public Dverride E public Dverride E public Dveride IS public GOverride E public GOverride E public GOverride E public GOverride E public Dverride E public Override E public Override E public Dverride E public Dverride E calculerPolygone clone Bl contient deplacer dessinerMotif E dessinerPoignees El enregistrer E equals E faireCorespondre findHandles E redimensionner E setDecalagef E seat setMaxY SH A E setPointx E dessinerPoigneesi A E equal E faireCorespondref E findHandlesl J E Motiectangulsief d E MotifRectangulairef E redimensionner E setHauteurl setLargeurl El toStrind Rectangle
25. J ouveauDessinl E nouveleinstanzeMoti dmerntionnetotif 1 smCouianil oo oo sctiveZoneT entel FIGURE 8 7 Diagramme UML de la vue simplifi BaneGption BarreOption ta BarreOutils 12 BarreEtatHaut lt lt Unknowm gt gt 1ToolBlar B neDutils BarsEtatHaut E annule JButon coller JButton controleur Controleur copier JButton couper JButton enregistrer JButtan ernegisverSous JBul n imprimer Button nouveau JButon ouvi Ee ett JButton zoomln JButtcn emt JButon E publie GOveride E E E E E E E E E actionPertormedt J E activer nnulerl E activer nregistement E activeretabir E Barestent E desactverannulert 1 E desactverErreggtiementl 1 E desactverRetaoit 1 Lee dree ecUnknowny gt ActionListener D cercle JButton E controleur Controleur E gomrre JButon E ligne JButton E polygone JButon E ege Ber E sourie Button El texte Button E pubic GOveride E actiorPeromedt Bare0utisL J Z I GIE E bltaique JButton E contoleur Controleur E Val ageur JLabel E labaNbCote JLabel sbaDpacite JLabe E largeur Spinnethocel E largeurBordure JSpnner E isiPoice JComboBay E ste SpinnerMadel E nbCstePobgane JSpinner E opacite Spinner poueentageDparite SpinnerMor pubic Qveride pubic Ovenide Puhic Dveride
26. LE aurons des sous classes h ritant d Evenement qui repr senteront l tat d un v nement Nous avons distingu trois sortes d v nements Les v nements de type cr ation qui permette de savoir si l utilisateur cr er un motif Les v nements de type suppression qui permettent de savoir si luti lisateur a supprimer un motif Les v nements de type modification qui permettent de savoir si luti lisateur a d plac ou redimensionn un motif Voici le d tail des classes de ce package Classe Evenement Un v nement est mod lis par trois variables Motif motiflnitial c est le motif qui a t modifi par l utilisateur sans la prise en compte des modifications Motif motifApresEvenement c est le motif qui a t modifi par l uti lisateur avec la prise en compte des modifications Dessin dessin c est le dessin dans lequel le motif est dessin Cette classe est abstraite elle poss de donc des m thodes abstraites qui devront tre red finies dans les sous classes h rit es Ces m thodes permettront de R tablir un v nement m thode retablir Annuler un v nement m thode annuler Le reste des m thodes seront des accesseurs permettant de modifier les variables de classes Pour les classes h rit es d crites plus bas nous nous contenterons de d crire les m thodes abstraites et leur fonctionnement Classe CreationEvenement Pour
27. act ristiques un point de coordonn e x y une hauteur une largeur une couleur Le mod le va donc contenir une classe abstraite Motif Celle ci doit tre abstraite car un Motif ne peut tre ins tanci les seuls objets pouvant tre instanci s seront les classes Rectangle Ellipse Polygone Ligne qui elles h riteront de la classe Motif 1 Mod le Vue Contr leur 2 Interface Homme Machine 13 3 2 LA VUE Lorsqu on a commenc remplir le contenu des classes on s est aper u que le mod le n tait pas complet En effet parmi tous les motifs on a distingu des propri t s que poss daient certains objets et pas d autres Par exemple les ellipses et les rectangles poss dent chacun une hauteur une largeur et un point x y qui va permettre un objet de la librairie Swing de dessiner l objet l cran Mais un objet de type ligne poss de deux points x1 yl x2 y2 et pas de hauteur ni de largeur Il a donc fallu modifier la classe Motif pour que celle ci soit plus g n rale On a retir les attributs hauteur et largeur et les m thodes correspondantes et nous les avons plac dans une nouvelle classe abstraite MotifBordure qui h rite de Motif Ainsi certains motifs h ritent directement de la classe Motif alors que d autres en h ritent indirectement par le biais de la classe MotifBordure Pour la gestion des v nements annuler ou r tablir une modification cr ation suppression d
28. at SVG incluent les formes les chemins le texte les marqueurs les cl nes les canaux alpha les transformations les motifs et les groupements Inkscape supporte galement les m ta donn es Creative Commons l dition de noeuds les couches les op rations de che mins complexes la vectorisation des bitmaps le texte suivant des chemins le texte contournant des objets l dition XML directe Inkscape per met d importer des formats tels que le Postscript EPS 7 JPEG PNG et TIFF et exporte en PNG ainsi qu en de nombreux formats vectoriels Le but principal d Inkscape est de cr er un outil de dessin puissant et simple d utilisation totalement conforme aux standards XML SVG et CSS 10 Illustrator Adobe Illustrator est le logiciel de cr ation graphique vectorielle de r f rence dans les environnements professionnels Il fait partie de la gamme Adobe et peut tre utilis ind pendamment ou en compl ment de Photo shop offre des outils de dessin vectoriel puissants Les images vectorielles sont constitu es de courbes g n r es par des formules math matiques L un des outils principaux d Illustrator tant lt la plume gt qui permet de tra cer des courbes l aspect parfait gr ce au placement de points d ancrage et de tangentes qui vont en modifier la courbure Adapt aussi bien la cr ation de document papier qu celle d illustrations pour Internet logos affiches etc ce logiciel est orient
29. beaucoup d am lioration impl menter pour qu il soit utilisable par des personnes plus exp riment dans ce domaine Pour finir on peut dire que le projet que nous avons r alis cette ann e est destin voluer pour sortir du cadre scolaire A4 Chapitre 7 Conclusions 7 1 Fonctionnement de l application L application que nous avons r alis e est fonctionnelle et respecte les contraintes de fonctionnalit s minimales impos es Durant le d veloppement et les tests que nous avons r alis nous avons d cel quelques bogues minimes Ceux ci ont t corrig s au jour d aujour d hui Toutes les fonctionnalites implementees fonctionnent parfaitement du dessin de l objet l enregistrement de celui ci Le choix du langage a t fructueux Java est tr s intuitif et facile apprendre quand on connait le concept de programmation par objet La li brairie Swing a t tr s utile et nous a permis de r aliser facilement l interface graphique Quant l analyse du projet Elle s est av r suffisante et efficace car l application fonctionne et que l impl mentation d une multitude de fonc tionnalit s est envisageable 7 2 Fonctionnement du groupe de travail Nous avons du d velopp cette application en bin me Cela a t un han dicap car nous disposions d un temps limit et que le d veloppement d une application comme celle ci demande une vraie quipe de projet compos e de plusieur
30. ce deux moyens de communication distance Pour communiquer distance nous utilisons les services en ligne de Google Ainsi nous disposons d un wiki et d un d p t SVN pour pouvoir mettre jour le programme sans conflits et d poser r guli rement une nou velle version du programme r alis En r union Nous organisons une r union au moins une fois par semaine pour faire le point sur le projet On discute de l avanc e du projet on pose des questions on obtient des r ponses on donne des suggestions Tout cela dans le but de cerner les probl mes auxquels on est confront pour les r soudre ensuite en groupe 10 2 2 CHOIX DES OUTILS DE D VELOPPEMENT D composition du travail Voici la r partition des t ches qu a r alis chaque tudiant Kilian Cousein Kilian COUSEIN a travaill sur l Interface Homme Machine IHM Il a construit IHM et quelques motifs Carr Ellipse Ligne texte Benjamin Tardieu Benjamin TARDIEU s est occup des fonctionnalit s suivantes im pl mentation de mod le MVC gestion de l historique gestion d un fichier et le motif polygone 2 2 Choix des outils de d veloppement Langage Le langage Java nous a t impos ce qui nous correspond tr s bien car Java poss de un ramasse miettes qui simplifie le travail du program meur il n a plus besoin de s occuper de la gestion de la m moire et d crire des destructeurs pour ses
31. classes Java poss de une machine virtuelle qui permet une compatibilit du programme avec un grand nombre de plateformes sans avoir recom piler le code source Aussi il est noter que l API Java inclut la biblioth que lt Swing gt qui nous sera tr s utile pour le d veloppement de l interface graphique Editeur Nous avons choisi Eclipse comme plateforme de d veloppement car celui ci est enti rement param trable est facile d utilisation Il permet l auto compl tion la coloration syntaxique du texte la visualisation de la hi rarchie des attributs et des m thodes dans les classes et surtout une bonne gestion des gestionnaires de versions SVN Compilateur Nous avons choisi javac le compilateur qui convertit le code source en fichier class contenant le bytecode Java D bugueur Jdb est le d bogueur de base int gr PIDE clipse Celui ci permet de d bogu du code source Java 1 interface de programmation 2 Environnement de d veloppement int gr Dessin vectoriel 11 2 2 CHOIX DES OUTILS DE D VELOPPEMENT Gestionnaire de Versions Google SVN nous a permis de mettre en commun de nos travaux sans difficult ainsi nous avons pu d velopper le projet paralellement http code google com p dvectoriel Outils d analyse Umbrello est un outil de d veloppement qui nous a permis de cr er des diagrammes UML et de g n rer le code source correspondant pour com mencer
32. e Le nombre de c t s d un polygone varit de 4 512 par d faut un polygone a 6 c t s et le nombre de c t s d un polygone est forc ment pair Police du texte Verdana v FIGURE 5 9 Police du texte Ce champ permet de modifier la police d un motif de type texte Par d faut un texte sa police est gale Verdana Dessin vectoriel 36 5 1 INTERFACE GRAPHIQUE FIGURE 5 10 Gras Gras Ce bouton permet de mettre ou d enlever la propri t gras un texte Par d faut un texte n est pas en gras Italique FIGURE 5 11 Italique Ce bouton permet de mettre ou d enlever la propri t italique un texte Par d faut un texte n est pas en italique Barre d outils La barre d outils contient une serie de bouton permettant de choisir le motif que vous voulez dessiner sur le dessin L utilisateur peut choisir l outil souris ligne carr ellipse polygone gomme texte gt FIGURE 5 12 Barre d outils 1 Ce bouton change l outil courant avec l outils souris gt ce qui permet de s lectionner agrandir ou de d placer un motif du dessin Dessin vectoriel 37 5 1 INTERFACE GRAPHIQUE 2 Ce bouton change l outil courant avec l outils lt ligne gt ce qui permet tra de dessiner une ligne 3 Ce bouton change l outil courant avec l outils carr gt ce qui permet tra de dessiner un carr 4 Ce bouton change l outil courant avec l
33. eDutils BarreDutils E controleur Controleur scroller JScrolPane zoneDeDessin ZoneDeDessin E activer nnuler activerEnregistrement activerRetablirl E afficheMenul argeurBordure E afficheMenuNbCotePolygone E afficheMenuDpacitef E afficheMenuTextef E afficherPositionSourisf changerDimensionZoneDeDessin desactiver nnulerl desactiverEnregistrement desactiverfetablirl Fenetre E init E modifierYaleurMenu orduref modifierYaleurMenuCouleurBordurel R modifier aleurMenuCouleurRemplissagel modifieryaleurMenuNbCotef modifierYaleurMenulpacaocite modifieryaleurMenuPolicef repaintDessin zoomerDessin FIGURE 8 6 Diagramme UML du contr leur Dessin vectoriel 49 Vue CUnknowny gt JPanel 7 ZoneDeDessin BarreEtatBas ue lt lt Unknown gt gt JPanel lt lt Unknown gt gt JFrame en 22 lt lt Unknown gt gt JMenuBar 2 lt lt Unknown gt gt JToolBar BarreMenu El lt lt Unknown gt gt JFrame lt lt Unknown gt gt JMenuBar VE ZoneDeDessin E cortioleur Controleur E postianDebuFiqure Paint E postionPrecedente Point pub Ovenide E pubic Dveride E pubic
34. er et qu il n a pas encore trace la figure Puis si l utilisateur clique dans un espace vide de la zone de dessin elle sera gale nulle Color couleur cette variable est initialis e la couleur bleu Elle contient la couleur s lectionn e par l utilisateur dans l outil de s lec tion de couleur ou la couleur du dessin s lectionn s il y en a un Le type Color stocke la couleur au format RGB Color couleurBordure initialis e la couleur noir Elle contient la couleur s lectionn e par l utilisateur dans l outil de s lection de couleur pour les bordures ou la couleur de la bordure du dessin s lectionn s il y en a un Cette classe contient les m thodes pour enregistrer ouvrir faire un nouveau dessin dessiner le dessin gr ce un composant de la classe Graphics de la librairie AWT de java modifier le dessin en cours de cr ation ajouter cr er modifier sup primer trouver un motif Classe Motif Un motif est repr sent par un ensemble de variables nt x y ces deux entiers forment un couple qui repr sente le point x y Ce point repr sente le cot le plus en haut gauche du motif int largeurBordure est gale a z ro si le motif ne poss de pas de largeur sinon elle est gale la valeur de la largeur de la bordure Color couleurBordure la couleur de la bordure du dessin Color couleur La couleur du dessin float opacite Valeur de l opacit du motif entre 0 e
35. etComposite pour donner la valeur de l opacit du dessin g setFont pour donner la feuille de style Gr ce cet objet Graphics2D nous allons pouvoir par la suite afficher les motifs qui composent le dessin vectoriel Il faut ensuite g rer les v nements de la souris La classe h ritera donc de MouseListener et de MouseMotionListener MouseListener va permettre de g rer tout ce qui est en rapport avec le clic le clic de la souris mouseClicked MouseEvent e la pression sur le bouton gauche de la souris mousePressed MouseEvent e le rel chement du bouton gauche de la souris mouseReleased MouseEvent e MouseMotionListener va permettre de d tecter les mouvements Quand la souris est en mouvement mouseMoved MouseEvent e Quand la souris est en mouvement et que le clic gauche est enfonc mouseDragged MouseEvent e Tous ces couteurs utiliseront ensuite le contr leur et l objet Graphics2D pour pouvoir dessiner l cran les objets qui composent l image vectorielle 4 3 Le contr leur C est la classe la plus grosse du projet C est elle qui tablit la liaison entre la vue et le mod le Elle poss de une multitude de fonctions qui vont elles m mes appeler d autres fonctions du mod le ou de la vue ou les deux pour assurer l ind pendance des deux packages Dessin vectoriel 30 4 3 LE CONTR LEUR Lors de sa cr ation au moment o le constructeur est appel il va cr
36. gt dans la zone de dessin vous devez proc der exactement de la m me mani re que pour la ligne en revanche les deux points qui auront t d termin seront la diagonale de l ellipse ou du rectangle Pour dessiner un lt polygone gt dans la zone de dessin c est exactement comme le rectangle et l ellipse par contre vous pouvez tourner le po lygone dans la direction que vous voulez pour comprendre comment le faire tourner regarder cette explication FIGURE 5 15 Explication rotation polygone La rotation du polygone s effectue en fonction de l axe y si votre souris est la m me coordonn e y que la coordonn e y du centre du polygone alors le polygone sera droit sinon le polygone sera tourn en fonction du d calage de la souris sur l axe y avec le centre du polygone Enfin pour crire du texte dans la zone de dessin il vous suffit de Dessin vectoriel 42 5 2 LES ACTIONS cliquer l o vous voulez le placer et ensuite une fen tre s ouvrira pour crire le texte que vous d sirez dessiner dans la zone de dessin Modification Pour modifier un motif il vous suffira de prendre l outil lt souris gt et de cliquer sur le motif que vous voulez modifier ensuite la lt barre d dition gt se modifira en fonction du motif choisi ce qui vous permettra de modifier cer taine caract ristique du motif voir le chapitre sur la barre d dition Mais vous pouvez aussi agrandir
37. ificationE venement public Override E public GOverride E public Override public Overrde public Override public Override public Override public Override E public verride public Override annuler clone clonef CreationE venement retablir E CreationE venement SuppressionE venement r tabli SuppressionE venement annuler clone executerl ModificationE venement ModificationE venement retablirl FIGURE 8 4 Diagramme UML des v nements du mod le Dessin vectoriel 48 Controleur Model Dessin Vue Fenetre FIGURE 8 5 Diagramme UML du contr leur simplifi Controleur Mat Vector couleur Color couleurBordure Color enregistrer boolean hauteur int historique Historique largeur int motif Motif url Sting zoom float getMotifs lt Motif gt Vector motifs motifs return aw Override Om Model Dessin Controleur E dessin Dessin E fenetre Fenetre E mode int E motif Motif MODE_CREATION int MODE_GOMME int MODE_SOURIS int EJ MODE_ZOOM int E activeZoneTextef E afficherPositionSourisf ajouterMotiff II annuler
38. la m thode annuler il s agit de supprimer du dessin le motif qui a t cr Pour la m thode retablir il s agit d ajouter au dessin le motif pr c demment supprim Classe SuppressionEvenement Pour la m thode annuler il s agit d ajouter au dessin le motif qui a t pr c demment supprim par l utilisateur Pour la m thode retablir il s agit de supprimer du dessin le motif pr c demment ajout Dessin vectoriel 24 4 2 LA VUE Classe ModificationEvenement Pour la m thode annuler il s agit de remplacer dans le dessin l ancien motif par le nouveau motif modifi Pour la m thode retablir il s agit de remplacer dans le dessin le nouveau motif par l ancien motif 4 2 La vue La difficult de la vue ou Interface Homme Machine r side surtout dans l ergonomie car gr ce la librairie Swing tous les composants graphiques sont d j con us Ainsi pas besoin de fabriquer une fen tre il suffit d utiliser la classe JFrame idem pour la barre d outils avec la classe JToolBar JMenuBar pour la barre de menu le reste des barres seront des JPanel ainsi que la zone de dessin Il faut savoir que chaque composant de l IHM poss de un objet contr leur qui va permettre de faire la liaison avec le mod le en fonction des actions que l utilisateur va faire sur la vue Classe Fenetre Elle h rite de JFrame ce qui permet d afficher une fen tre standard l cran Celle ci va conte
39. la partie d veloppement 3 Langage de mod lisation unifi Dessin vectoriel 12 Chapitre 3 Analyse du projet Avant de commencer programmer nous avons d r aliser une structure de base sur laquelle nous avons ensuite travaill Nous nous sommes donc r unis pour discuter de la mani re dont le logiciel devait tre d velopp Quelle classe Comment les nomm s Nous nous sommes servis du logiciel Umbrello pour cr er des diagrammes de classes qui nous ont par la suite permis de g n rer du code Java et de commencer d velopper par la suite apr s r partition des taches de travail Il faut tout d abord savoir que nous utilisons le mod le MVC L ar chitecture de notre application suivra donc ce mod le Nous avons donc s par la vue ou IHM et le mod le qui seront totalement ind pendants Le contr leur permettra de faire le lien entre la vue et le mod le Nous al lons maintenant vous pr sentez comment nous avons con u ces 3 parties du programme Il faut savoir que la vue le mod le et le contr leur seront repr sent s par des packages 3 1 Le mod le Celui ci doit repr senter ce guest un dessin vectoriel Nous avons con u le dessin de la mani re suivante Une classe Dessin poss dant un vecteur de motifs Les motifs sont les formes dont est compos e l image vectorielle Ce sont des cercles des lignes des carr s des rectangles des polygones etc ayant chacun leurs propres car
40. mots exemple maMethode Attribut minuscule et majuscule pour s parer les mots exemple mo nAttribut Indentation Mettre le maximum d accolades Et les placer en dessous du for et de la derni re ligne de la boucle Commentaires les mettre au dessus de chaque fonction de chaque classe Eclipse sera utilis pour g n rer la documentation Gestion des er reurs avec le format Erreur courte description de l erreur situ es sur nom de la page a telle ligne Les commentaires seront de la forme suivante pour Les classes Description de la classe author Kilian Cousein et Benjamin Tardieu Les variables TypeVariable nomVariable description de la variable Dessin vectoriel 8 1 3 CAHIER DES CHARGES Les m thodes Description de la methode param nomParametre Description du param tre return description de la valeur retourn e par la m thode Dessin vectoriel 9 Chapitre 2 Organisation du projet 2 1 Organisation du travail Les membres de l quipe du projet L quipe de travail charg e du projet est compos e de deux membres Kilian Cousein lt kilian cousein etud univ montp2 fr gt Benjamin Tardieu lt benjamin tardieu etud univ montp2 fr gt L quipe ne comportant que deux membres ceux ci se sont vu attribuer le titre de Chef de projet La communication Au sein de l quipe de projet nous avons mis en pla
41. n des v nements Mod lisation du dessin vectoriel Cet ensemble de classes repr sente la d composition du probl me de la mod lisation d un dessin vectoriel Classe Dessin Un dessin est constitu d un ensemble de variables qui permettent une mo d lisation la plus proche possible de la r alit Ces variables sont String url Une chaine de caract res qui permet de stocker l adresse du fichier Celle ci est vide si aucun fichier n a t ouvert ou si le dessin en cours n a pas tais sauvegard int largeur hauteur Dimension largeur et hauteur du dessin d fini par defaut en 800 600 hauteur Dimension largeur et hauteur du dessin d fini par default en 800 600 16 4 1 LE MOD LE Vector lt Motif gt motifs vecteur qui va contenir l ensemble des motifs constituant le dessin en cours float zoom nombre r el repr sentant la valeur du zoom qui sera uti lis pour recalculer les tailles et coordonn es du dessin et des motifs concern s boolean enregistrer ce bool en est vrai si le dessin est enregistr faux sinon Historique historique repr sente l historique des v nements g n r s par l utilisateur La classe historique sera d taill e plus bas Motif motif Elle contient le motif en cours de cr ation ou le motif s lectionn par l utilisateur ou encore un motif avec toutes ses carac t ristiques nul si l utilisateur a cliqu sur un type de motif dessin
42. nir tous les composants graphiques qui vont tre affich s l cran Ces composants sont des variables BarreMenu barreMenu BarreOption barreOption BarreOutils barreOutils BarreEtatHaut barreEtatHaut BarreEtatBas barreEtatBas ZoneDeDessin zoneDeDessin Celles ci seront d crites ci dessous Lors de la construction de la fen tre tous les composants vont tre ins tanci s puis la m thode init tre appel e et va permettre de placer les composants dans la fen tre Les autres m thodes servent faire la liaison entre les composants de la fen tre et la fen tre Classe BarreMenu Elle poss de deux menus Fichier Edition qui sont des JMenu eux m me compos s de JMenultem qui repr sentent les options des menus Le menu Fichier permet d utiliser les fonctions principales du programme Le menu Edition permet pour l instant d annuler et r tablir des v nements g n rer par l utilisateur mais celui ci sera compl t lavenir avec diverses options copier couper coller Dessin vectoriel 25 4 2 LA VUE Fichier Edition FIGURE 4 1 Barre de menu Chaque JMenultem poss de un couteur de la classe ActionListener qui permet la machine de savoir sur quelle option l utilisateur a cliqu Il faut savoir que pour la gestion des couteurs la classe BarreMenu h rite de l interface ActionListener L objet contr leur va permettre d agir sur le mod le en foncti
43. objet nous avons cr une classe Historique Celle ci contiendra deux piles une pour la gestion des v nements annuler et une pour la gestion des v nements r tablir Le dessin poss dera une instance de cette classe Les v nements quant eux suivront le principe du pattern tat Nous aurons donc la classe abstraite Evenement qui repr sentera un v nement Les classes CreationEvenement ModificationEvenement et SuppressionEve nement h ritent d Evenement elles repr senteront l tat d un v nement Model Ligne MotifRectangulaire Polygone Ze Rectangle FIGURE 3 1 Diagramme UML du Mod le 3 2 La vue Celle ci va contenir toutes les classes representant les objets qui com poseront la fen tre y compris la fen tre elle m me Ces objets seront tous des composants Swing de Java et ils h riteront donc de leur classe corres pondante Il y aura donc un menu principal avec fichier nouveau ouvrir Dessin vectoriel 14 3 3 LE CONTR LEUR dition etc une barre d outils verticale avec a peu pr s les m mes fonc tions que le menu principal une autre barre verticale qui servira changer les propri t s des objets couleur opacit police pour le texte une barre horizontale sur le c t gauche de la fen tre qui servira choisir les objets dessiner une zone de dessin dans laquelle sera dessin e l image vectorielle une aut
44. on de l v nement d clench C est donc la m thode actionPerformed ActionEvent e qui est une m thode h rit e de l interface ActionListener qui va tre appel e lorsqu un couteur va tre d clench L objet ActionEvent permettra de savoir sur quelle option l utilisateur a cliqu Celle ci va ensuite utiliser les m thodes du contr leur pour ex cuter l v nement demand Classe BarreOption Celle ci contient diverses options On retrouve la majorit des options du menu et d autres relatives la conception du dessin Zoom Zoom Elle permet d acc der plus rapidement aux options du menu et elle est surtout plus esth tique Cette classe h rite de JPanel cela permet d obtenir une zone vide dans laquelle on peut facilement disposer des objets Elle h rite aussi de Action Listener c est le m me principe que pr c demment pour les couteurs Les objets qui la composent sont tous des JButton compos s d une image contenu dans le dossier icon du projet Ils poss dent tous un ActionListener qui va permettre de g rer les v nements g n r s par l utilisateur Ce sera ensuite la m thode ActionListener ActionEvent e qui s occupera de faire la liaison avec le mod le gr ce au contr leur Lorsque l utilisateur cliquera sur l un des boutons de sauvegarde ou de chargement Un objet JFileChooser de Swing permettra d ouvrir une fen tre pour s lectionner l emplacement du fichier ouvrir ou enregistrer
45. pour cette barre Skin vide quand aucun objet n est s lectionn FIGURE 4 5 Barre d outils vide Skin pour forme normal cercle rectangle ligne Permet de modifier l opacit et la largeur de la bordure d une figure Opacite 100 Largeur bordure 0 8 FIGURE 4 6 Barre d outils pour un cercle un rectangle et une ligne Skin pour polygone on ajoute le nombre de c t s du polygone au skin pour forme normal Opacit 100 SLargeur bordure 0 Nombre de cot s 6 8 FIGURE 4 7 Barre d outils pour le polygone Dessin vectoriel 28 4 2 LA VUE Skin pour Texte permet de modifier la police l opacit et mettre en gras soulign Verdana A Opacite 100 8 FIGURE 4 8 Barre d outils pour le texte Les m thodes permettant de modifier le skin de la barre ne sont pas d crites ici car elles sont d j comment es dans le code Classe BarreEtatBas Celle ci poss de que des JLabel Ici ils servent afficher du texte ou des carr s de couleur Cette classe h rite de JPanel pour disposer facilement les objets qui la composent Elle h rite aussi de MouseListener qui va permettre d couter les v ne ments li es la souris Ce sera donc la m thode mouseClicked MouseEvent e qui se chargera de voir si on a cliqu sur l un des carr s de couleur pour pouvoir ensuite afficher la fen tre de choix de couleurs qui est une JColor Chooser de
46. que graphique tris etc Dessin vectoriel 3 Table des mati res 1 Introduction 1 1 G n ralit s u 2 8 20 wa a Dar na ae 122 Ee amp sujet 4 2 22 EE 1 3 Cahier des charges 2 Organisation du projet 2 1 Organisation du travail 2 2 Choix des outils de d veloppement 3 Analyse du projet 3 1 LDE modele Hraci 22 u 2 Tuma AER Der a UML aere H 3 9 DA EEN 3 91 Bercontroleur 4 D veloppement AT b model L GL sui a AM mA jte Sie SU its nn AD EC Lie en NES S ee A CAR ee te A3 L cContr leur es Ee pote ns M tar para 1 5 Manuel d utilisation 5 1 Interface graphique 5 2 Les actions 6 Perspectives et discussions 6 1 Perspectives 622 DISCUSSION a ee S DE e Re aa 7 Conclusions 7 1 Fonctionnement de l application 7 2 Fonctionnement du groupe de travail 8 Annexe 10 10 11 13 13 14 15 16 16 25 30 32 32 38 A4 A4 A4 45 45 45 46 Chapitre 1 Introduction 1 1 G n ralit s Nous sommes amen s dans le cadre de notre troisi me ann e en Li cence informatique la facult des Sciences de Montpellier travailler sur l laboration compl te d un projet de son analyse la conception puis sa programmation Tout au long du sixi me semestre le projet nous per met de comp
47. r les motifs que l on va dessiner C est elles qui vont donner forme l objet c est pour cela qu il faut les red finir Ces m thodes servent donc dessiner le motif et ses poign es le d placer le redimensionner le copier l ouvrir et l enregistrer Le reste des m thodes seront donc des accesseurs qui permettront de modifier les variables cit es ci dessus essentielles pour modifier les propri t s du motif Pour l enregistrement d un Motif il faudra red finir la m thode enregis trer dans la sous classe correspondante Un motif au format SVG la forme suivante lt object fill x 170 y 287 height 46 width 44 rgb 0 255 255 stroke rgb 0 0 0 stroke width 1 opacity 0 42 opacity stoke 0 42 gt La balise object permet de dire que l objet dessiner est de type object elle est ferm gr ce gt x repr sente le l abscisse x du motif y repr sente l ordonne y du motif height repr sente la hauteur Dessin vectoriel 18 4 1 LE MOD LE width repr sente la largeur rgb 0 255 255 repr sente la couleur du motif au format RGB rouge vert bleu stroke rgb 0 0 0 repr sente la couleur de la bordure du motif stroke width 1 repr sente la largeur de la bordure Si elle est gale 0 alors il n y a pas de bordure opacity 0 42 repr sente la transparence du motif opacity stroke
48. re barre horizontale sous la zone de dessin pour pouvoir modifier la couleur de l objet et de sa bordure et afficher les coordonn es de la souris dans la zone de dessin 1 1 ZoneDeDessin BarreEtatBas A T SS Ei BarreDutils I BarreEtatHaut FIGURE 3 2 Diagramme UML de la vue 3 3 Le contr leur Celui ci sera repr sent par une classe Controleur et va poss der toutes les m thodes permettant de faire la liaison entre la vue et le mod le C est lui qui va instancier la vue et le mod le qui seront respectivement repr sent s par un objet fen tre et un objet dessin Controleur FIGURE 3 3 Diagramme UML du contr leur Dessin vectoriel 15 Chapitre 4 D veloppement Apres avoir termin l analyse du projet le d veloppement du projet a pu commencer Celui ci est d coup en trois partite en relation avec le model MVC vu pr c demment Ces trois parties sont donc le d veloppement du model de la vue et du contr leur Pour chacune de ces parties nous expli querons le fonctionnement global des classes correspondantes Nous n expli querons pas toutes les m thodes en d tails car elles sont comment es dans le code du programme Nous pensons qu il n est pas n cessaire de r p ter les explications 4 1 Le mod le Le mod le est divis en deux parties La premi re qui repr sente la mo d lisation du dessin vectoriel et la deuxi me qui repr sente la mod lisatio
49. rendre quelles sont les phases de d veloppement d un projet et comment celui ci doit tre conduit Nous pouvons par ailleurs mesurer notre capacit r agir face des probl mes en nous impliquant dans ce projet Le projet que nous avons choisi est de r aliser un logiciel de Dessin Vectoriel Notre projet est n d un probl me existant Comment faire pour pouvoir agrandir et r tr cir une image affich e l cran sans perdre de qualit La r ponse les images vectorielles Les images vectorielles ont la particularit d avoir une r solution quasiment infinie car elles ne fonctionnent pas avec des pixels mais avec des formules math matiques Les formes g om triques qui composent l image sont recalcul es par la machine quand l image est agrandie ou r tr cie Nous d velopperons en Java pour nous permettre d utiliser la librai rie graphique Swing de J2SE et de d velopper selon le principe de la programmation par objet Ce projet sera r alis tout au long de ce sixi me semestre en bin me sous la tutelle de Mr Michel Meynard 1 2 Le sujet Il s agit d crire une bibliotheque de composants logiciels permettant de dessiner des dessins vectoriels et de les manipuler ouvrir sauver importer exporter les dessins pourront tre de diff rents types stocker ces dessins 1 Java 2 Standard Edition 1 3 CAHIER DES CHARGES les r duire ou les agrandir proportionnellement le
50. ription String E extension Sting lt lt Unknown gt gt FileFilter Polyligne E points Vector E public Override E public Override E public Override E public Override el dessinerMotif J dessinerMotif Historique Motif E lt Evenement gt Stack E lt Evenement Stack primerHistoriqueRetabli J toString E public Dverride E public Dverride E public GOverride E public GOverride E public Dverride E public Dverride E public Dverride public GOverride E public GOverride E public GOverride E public GOverride E public Dverride E public Dverride E public Override J m denice E dessinerMotif m dessinerPoignees J faieConespondre 4 Si findHandles BR getHandles E redimensionner E setLargeurLignef E set gt X1 EES EB setY1 J E set 2 E toStringl Ellipse E public Override E public Override E public Override public Override E public Override clone EH dessmeMoti J a Di ouviirl couleur Color E couleurBordure Color E HANDLE_SIZE int largeurBordure int opaciteBordure float opaciteCouleur float poigneeSectionne int E selectionne boolean E x int B y int AUCUNE_POIGNEE int BAS_POIGNEE int DROITE_BAS_POI
51. s afficher et les imprimer ventuellement les animer 1 3 Cahier des charges Fonctionnnalites obligatoires Manipulation de fichiers ouvrir enregistrer importer exporter des fichiers les dessins doivent pouvoir tre de diff rents types possibilit de stocker ces dessins sous diff rents formats PDF PNG 3 SVG Cr ation d objet Dessin dessin de lignes main lev e et de segments de droite Forme rectangles carr s ellipses cercles polygones Outils de texte police taille gras soulign Manipulation d objet transformations affines translation sym trie redimensionnement afficher et imprimer zoomer effacer Contr le des objets revenir en arri re annuler revenir en avant r tablir 2 Portable Document Format 3 Portable Network Graphics 4 Scalable Vector Graphics Dessin vectoriel 6 1 3 CAHIER DES CHARGES Fonctionnalit s secondaires transformations affines rotation d formation clones copie d un objet les effets sp ciaux extrusion effet miroir d grad de formes mor phage animation des objets Analyse des principaux logiciels de dessin vectoriel Inkscape Inkscape est un logiciel libre d dition de graphismes vectoriels utilisant le format de fichiers Scalable Vector Graphics SVG standard du W3C 5 Les fonctionnalit s support es du form
52. s membres Heureusement gr ce notre organisation nous avons su g rer le temps Notre petit effectif nous a permis d tablir une tr s bonne entente et une facilit communiquer qui nous a permis de programmer effi cacement de nous entraider tout au long de ce projet et surtout de partager nos connaissances 45 Chapitre 8 Annexe API Pour l API de l application de vous laisse la t l charger sur http code google com p dvectoriel downloads list Digrammes UML Comme pour l API vous pouvez t l charger tous les diagrammes UML sur http code google com p dvectoriel downloads list Model ss Ligne MotifRectangulaire Polygone FIGURE 8 1 Diagramme UML du mod le simplifi 46 Model El Mot Vector E couleur Color E couleurBordure Color El enregistrer boolean E hauteur int E historique Historique B largeur int E motif Motif E ur Sting E zoom float getMotifs E lt Motif gt Vector E motifs P motifs retum E public Override Bt IS ajouterMetif E ajouterMotiff createDbi m kd E ouvrir E parcours E remplaceMotiff E setHauteur setLargeur E setMotiff A supprimerMotif E supprimerMotiff E toString E toutDessinerf Bl Vector E zoomln E 200mOut Dessin MonFiltre E desc
53. t 1 float opaciteBordure Valeur de l opacit de la bordure du motif entre 0 et 1 Pour l opacit plus on est proche de 0 plus l objet concern est 1 Rouge Vert Bleu 2 Abstract Window Toolkit Dessin vectoriel 17 4 1 LE MOD LE transparent Plus on est proche de 1 moins l objet est transparent boolean selectionne est vrai si l utilisateur a s lectionn le motif faux sinon int poigneSelectionne Lorsque l utilisateur a s lectionn un motif et que celui ci cliqu sur l une des poign es autour du motif pour le redimensionner cette variable va contenir le num ro de la poign e sur lequel l utilisateur a cliqu static final int COTE _POIGNEE Il y a 9 variables de cette forme lt COTE gt repr sente l endroit du motif ou est situ la poign e comme par exemple pour en haut gauche GAUCHE HAUT HANDLE static final int TAILLE _POIGNEE repr sente la longueur des c t s d une poign e qui est un carr Pour notre application on fixera la taille d une poign e a 9 pixels Cette classe est abstraite donc on ne peut instancier un motif Cela n aurait aucun sens de dessiner un objet Motif car ce serait seulement un point avec une couleur Grace l abstraction de la classe on va pouvoir dire quelles m thodes vont devoir tre red finir pour pouvoir ensuite mod liser un vrai motif comme un rectangle etc Ces m thodes abstraites sont donc essentielles pou
54. ttra d y remedier Pour enregistrer un polygone il s agit de le mettre sous sa forme SVG En svg un polygone est repr sent de la mani re suivante dans le fichier lt polygon points 213 437 192 408 207 376 241 373 262 402 247 434 gt L attribut lt points gt repr sente l ensemble des point xi yi Chaque point est s par par un espace Les abscisses et les ordonn s sont s par s par une virgule Pour voir les autres attributs de la balise voir la classe Motif Pour ouvrir un polygone il suffira de r cup rer l attribut lt points gt et de parser son contenu pour affecter les variables correspondantes Dessin vectoriel 29 4 1 LE MOD LE Classe Ligne Cette classe h rite de Motif Comme son nom l indique elle repr sente un objet de type ligne Une ligne est repr sent e par deux points x1 y1 x2 y2 La classe Motif nous donne d j le point x1 y1 nomm x y dans la classe Motif Quant au point x2 y2 celui ci va tre d fini dans la classe Ligne de la mani re suivante int x2 int y2 Les m thodes abstraites de la classe Motif vont devoir tre red finies en fonction de ses variables suppl mentaires Pour dessiner une ligne on utilisera l objet Graphics de la librairie AWT de Java La m thode drawLine int x1 int yl int x2 int y2 per mettra d y rem dier Pour enregistrer une ligne il s agit de la mettre sous sa forme SVG En SVG une ligne est repr sent e
55. ur et la hauteur ainsi que d autres attributs de la classe Motif Donc en les d finissant dans cette classe nous n aurons pas besoin de r crire des copies de ces m thodes pour chaque classe qui h ritera de MotifRectangulaire Dessin vectoriel 19 4 1 LE MOD LE Classe Rectangle Cette classe h rite de MotifRectangulaire et donc indirectement de Motif Comme son nom l indique elle repr sente un objet de type rectangle Les m thodes qui n ont pas t red fini dans MotifRectangulaire vont tre red finir ici Ces m thodes servent dessiner le motif copier ouvrir enregistrer Ces m thodes sont propres a l objet c est pour a qu elles sont red finies ici Pour dessiner un rectangle on utilisera l objet Graphics de la librairie AWT de Java La m thode fillRect int x int y int largeur int hauteur permettra d y rem dier Pour enregistrer un rectangle il s agit de le mettre sous sa forme SVG En svg un rectangle est repr sent de la mani re suivante dans le fichier lt rect gt Pour voir les attributs de la balise voir la classe Motif Pour ouvrir un rectangle il suffira de r cup rer les attributs de la balise correspondante Classe Ellipse Cette classe h rite de MotifRectangulaire et donc indirectement de Mo tif Comme son nom l indique elle repr sente un objet de type ellipse Les m thodes qui n ont pas t red finies dans MotifRectangulaire vont tre
56. uvrir Racourci ctrl o Dessin vectoriel 39 5 2 LES ACTIONS Vous pouvez aussi y acc der par la barre d option voir le pr c dent Enregistrer Fichier Enregistrer Racourci ctrl fs Vous pouvez aussi y acc der par la barre d option voir le pr c dent Enregistrer sous Fichier Enregistrer sous Racourci ctrl maj Ts Vous pouvez aussi y acc der par la barre d option voir le pr c dent Impression Fichier Impression Racourci ctrl p Vous pouvez aussi y acc der par la barre d option voir le pr c dent Annuler Edition Annuler Racourci ctrl z Vous pouvez aussi y acc der par la barre d option voir le pr c dent R tablir Edition R tablir Racourci ctrl y Vous pouvez aussi y acc der par la barre d option voir le pr c dent Copier Edition Copier Racourci ctrl fc Vous pouvez aussi y acc der par la barre d option voir le pr c dent chapitre chapitre chapitre chapitre chapitre chapitre chapitre Dessin vectoriel 40 5 2 LES ACTIONS Couper Edition Couper Racourci ctrl x Vous pouvez aussi y acc der par la barre d option voir le chapitre pr c dent Coller
57. vers le march professionnel il int gre de nombreuses options propres am liorer la productivit World Wide Web Consortium Extensible Markup Language Encapsulated PostScript Joint Photographic Experts Group Tagged Image File Format Cascading Style Sheets oO D I Oo On Dessin vectoriel 7 1 3 CAHIER DES CHARGES Microsoft Expression Design Microsoft Expression Design permet de r aliser des graphismes de grande qualit pour des applications internet ou de bureau L application est in t gralement compatible avec Expression Blend et permet d exporter faci lement vos graphiques via XAML Ce qui permet d animer facilement vos cr ations graphiques Les effets utilis s par le logiciel sont int gralement non destructifs c est dire qu il est toujours possible de retrouver le graphique de d part apr s l application d un effet En utilisant la puissance du dessin vectoriel et la facilit de prise en main de l interface le logiciel permet de cr er des images de qualit simplement La syntaxe Lors du d veloppement nous coderons en lt fran ais gt c est dire que les attributs les noms de classes les m thodes et les fonctions que nous utiliserons pour cr er cet diteur de dessin vectoriel auront des noms en fran ais Classe majuscule puis minuscule et majuscule pour s parer les mots exemple MaClasse M thode minuscule et majuscule pour s parer les
Download Pdf Manuals
Related Search