Balise MAP : coordonnées géométriques

Fermé
poussy4 Messages postés 1 Date d'inscription lundi 25 juin 2007 Statut Membre Dernière intervention 25 juin 2007 - 25 juin 2007 à 14:45
Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 - 25 juin 2007 à 18:36
Bonjour,
Je dois insérer des zones cliquables dans un organigramme (image jpg) mais je ne comprend pas DU TOUT la logique de calcul des coordonnées géométriques. j'ai lu un peu partout que les coordonnées sont données avec des valeurs x,y à partir du coin haut gauche de l'image pour 0,0.
Soit :
x1 : angle supérieur gauche, sur l'axe horizontal
y1 : angle supérieur gauche, sur l'axe vertical
x2 : angle inférieur droit, sur l'axe horizontal
y2 : angle inférieur droit, sur l'axe vertical

Moi et la géométrie ça fait 2, quelqu'un pourrait-il m'expliquer ça le plus simplement possible ?
merci d'avance
Poussy4
A voir également:

1 réponse

Dalida Messages postés 6728 Date d'inscription mardi 14 mai 2002 Statut Contributeur Dernière intervention 11 janvier 2016 920
25 juin 2007 à 18:36
salut,

puisque ton rectangle est forcement tracé avec des lignes horizontales et verticales, pour le tracer il suffit de deux points, ok ?

on prend le sommet en haut à gauche et on trace :
   → un ligne horizontale vers la droite, le côté supérieur du rectangle ;
   ↓ un ligne verticale vers le bas, le côté gauche du rectangle.

on prend le sommet en bas à droite et on trace :
   ← un ligne horizontale vers la gauche, le côté inférieur du rectangle ;
   ↑ un ligne verticale vers le haut, le côté droit du rectangle.

l'intersection des lignes verticales ↔ et horizontales ↕ forment les deux autres sommets.

le plus compliqué c'est de raisonner en coordonnées inversées c'est à dire en partant de zéro en haut.

si tu as une image de 350x200px et que tu veux dessiner un rectangle de 15x35px, situé à 20px du bord gauche et à 80px du bord supérieur :
   • X1 = 20 (on est à 20px du bord gauche)
   • Y1 = 80 (on est à 80px du bord supérieur)
   • X2 = 20 + 15 = 35 (X1 + 15px de large)
   • Y2 = 80 + 35 = 115 (X2 + 35px de haut)

t'es oki ?
8