--- layout: layouts/page.njk title: Formes --- ## Rectangle Le rectangle est défini par les coordonnées de son sommet en haut à gauche puis par sa largeur et sa hauteur. 100 50 ```svg ``` ## Cercle Le cercle est défini par les coordonnées de son centre et son rayon. 50 ```svg ``` ## Ellipse L'ellipse est définie par les coordonnées de son centre et par ses deux rayons. 50 100 ```svg ``` ## Ligne droite La ligne droite est définie par les coordonnées du point 1 de départ et les coordonnées du point 2 d'arrivée. La ligne ne peut être remplie par une couleur. Il faut définir un contour pour la voir. 50, 50 250, 100 ```svg ``` ## Polyligne La polykigne est une ligne brisée, non fermée, entre plusieurs points. C'est un ensemble de segments réliés entre eux. La forme est dite ouverte car le dernier point n'est pas connecté avec le premier. Elle peut tout de même être remplie avec un couleur de fond. 50, 200 100, 125 200, 175 300, 50 400, 200 ```svg ``` ### liste de points La liste de points consiste en suite de 2 nombres, le premier pour l'abscisse le deuxième pour l'ordonnée. Les points et les coordonnées sont séparés au choix par un espace ou par une virgule. La virgule décimale est représentée par un point : 50.425 ```svg ``` ## Polygone Le polygone est une polyligne dont le dernier point est connecté avec le premier. La forme est automatiquement fermée. 50, 150 150, 200 250, 100 200, 50 ```svg ``` ### Règle de remplissage Dans le cas où les segments se croisent, l'attribut fill-rule définit l'algorithme à utiliser pour déterminer les parties qui sont considérées à l'intérieur de la forme. ```svg ``` evenodd fill-rule est un attribut de présentation vous pouvez l'utiliser dans un feuille de style CSS. ## Les chemins Les chemins sont plus compliqués, ils intègrent des portions en ligne ou en courbe. Des commandes permettent de savoir comment dessiner chaque portion. ```svg ``` Les commandes sont définies par des lettres, les lettres majuscules prennent en compte des coordonnées absolues tandis que les lettres minuscules travaillent en coordonnées relativement au point précédent. M 50, 125 C 350, 100 V H Q Z ```svg ``` Si une plusieurs commandes identiques se suivent il n'est pas nécessaire de répéter la lettre de la commande. Il suffit de mettre les points les uns à la suite des autres comme pour une polyligne. ### Commande M, m `Move to` : se rendre à un point sans dessiner. Toujours pour le premier point. Ensuite si la forme complexe est consititué de plusieurs parties. ### Commande Z, z `ClosePath` Fermer le tracé : Se rendre au premier point en ligne droite. Il n’y a pas de différence entre la commande en majuscule et en minuscule. ### Commande L, l `Line to` : Line droite vers le point. Identique à polyline ### Commande H, h `Horizontal line to` : Ligne Horizontale ### Commande V, v `Vertical line to` : Ligne Verticale V H L v h ```svg ``` ### Commande A, a `Arc` : Arc elliptique 7 nombres sont nécessaires : rayon x, rayon y, inclinaison de l'axe x en dégrés, grand côté ou petit côté, angle positif ou négatif, coordonnées du point d'arrivé. Les cordonnées du centre de l'ellipse et les rayons réels sont calculés pour satisfaire les conditions des points d'arrivée. Pour un rayon rx et un rayon ry donnés, il existe deux ellipses A et B pouvant connecter deux points quelconques. Pour chacune des deux ellipses, il existe deux chemins possibles, ce qui donne quatre arcs possibles. `large-arc-flag` (0 ou 1) détermine si l’arc doit être supérieur ou inférieur à 180 degrés ; au final, il détermine dans quelle direction l’arc va parcourir une ellipse donnée. `sweep-flag` (0 ou 1) détermine si l’arc doit commencer son mouvement à un angle négatif ou positif, permettant ainsi de choisir lequel des deux cercles est parcouru. A B C D ```svg ``` L'illustration dans cette page ne fonctionne pas avec Firefox. ### Commande Q, q, T, t Courbe quadratique : coordonnées du point de contrôle et coordonnées du point d'arrivée ```svg ``` T : Prolongation d'une courbe quadratique : Seules les coordonnées du point d'arrivée sont renseignés. Le point de contrôle de la commande T est le symétrique de la commande Q précédente. ```svg ``` ### Commande C, c, S, s C `CurveTo` : Courbe cubique (ou courbe de Bézier) : 2 points de contrôle et un point d'arrivée ```svg ``` S `Shorthand CuveTo` : Prolongation d'une courbe de Bézier cubique, le premier point d'inflexion est le symétrique du point d'inflexion de la courbe précédente ```svg ``` L'utilisation d'un logiciel comme inkscape n'optimise pas forcement les commandes, mais cela est bien plus pratique pour dessiner des formes complexes. [Exercice](exercice)