Aller au contenu

Exercices Classes

Exercice - Classes d’objets#

Nous allons créer une interface de dessin de formes très simpliste : des rectangles, ellipses et triangles.

L’interface :

  • Créez un formulaire contenant 3 boutons radio pour chaque forme (Rectangle, Ellipse et Triangle). Pensez bien au <label>, à name et value
  • Créez une zone de dessin (une div)
  • Ajoutez un évènement click sur la zone de dessin, et créez un nouvel objet correspondant à la forme souhaitée (case cochée). Passez les coordonnées de la souris (evt.clientX/clientY), moins la position de la zone de dessin récupérée avec el.getBoundingClientRect()

Tout d’abord, pour les formes rectangles et ellipses :

  • Créez la classe Coordonnee (x, y)
  • Créez la classe Taille (largeur, hauteur)
  • Creéz la classe Couleur (r, v, b). Cette classe a une méthode getRVBString() qui renvoie la couleur au format rgb(r,v,b)
  • Créez la classe Forme avec les attributs communs (le constructeur de Forme prends 3 paramètres (coordonnees, taille, couleur) :
    • un objet Coordonnee
    • un objet Taille (générée aléatoirement entre 20 et 100px)
    • un objet Couleur (générée aléatoirement)
    • un objet DOM
  • Créez la class Rectangle qui hérite de Forme (attributs et prototype).
  • Créez la class Ellipse qui hérite de Forme (attributs et prototype).
  • Implémentez la méthode draw() sur l’objet Forme. Cette méthode doit styler l’objet DOM (positionnement absolu, largeur/hauteur, couleur de fond, translation CSS) et l’ajouter dans la zone de dessin
  • Surclasser la méthode draw() de Ellipse pour ajouter des coins arrondis pour générer une ellipse (50%)
  • Utilisez ces classes pour créer vos formes. La classe Forme ne sera jamais instanciée.

Ensuite :

  • Créez une méthode delete() sur Forme pour supprimer une forme déjà créée
  • Cette méthode doit être appelée lors du click droit (évènement contextmenu) sur l’objet DOM associé à la forme

Enfin :

  • Créez la classe Triangle qui hérite de Forme (attributs et prototype)
  • Surclassez la méthode draw() pour dessiner un SVG* dans l’objet DOM
  • Attention, un triangle n’a donc pas de couleur de fond sur l’objet DOM associé (comme c’est le cas sur les rectangles et ellipses)
  • Finalisez avec pointer-events pour gérer le clic sur la forme uniquement

* SVG envisagé 

<svg viewBox="0 0 100 100" fill="..." width="100%" height="100%" preserveAspectRatio="none">
  <polygon points="50,0 100,100 0,100">
</svg>