[Résolu]Tirer un trait entre deux points

Bonjour
Dans la carte suivante, chaque point est une <figure> avec une <img> pour le point et <figcaption> pour le texte. la balise <figcaption> est en position:absolute;
http://jpmoularde.free.fr/maps/carte.png
Quand les points sont très proches les uns des autres, j'aimerais écarter les textes et mettre un trait (oblique) entre ces deux éléments.
Il me semble que c'est faisable en CSS pur en utilisant des transformations.
Auriez vous un exemple similaire à me proposer?
Modifié par PapyJP (09 Jun 2016 - 18:44)

Bonsoir !

PapyJP a écrit :

Quand les points sont très proches les uns des autres...

Je ne pense pas que vous pouvez cibler ce cas de figure sans Javascript...

Zelena a écrit :
Bonsoir !


Je ne pense pas que vous pouvez cibler ce cas de figure sans Javascript...

ca ne me gêne pas du tout d'utiliser du JavaScript, de toute façon cette page est générée en JavaScript. Le problème est de savoir quoi générer.
Il y a une dizaine d'années j'avais fait un programme JavaScript qui générait des courbes, mais il gênerait les courbes point par point, ça mettait beaucoup de temps pour obtenir un résultat.
A cette époque il n'y avait pas de CSS permettant d'utiliser des transformations. Comme les techniques ont évolué, je suppose qu'il doit y avoir des astuces pour réaliser cela. Par exemple une balise <hr> avec une taille et un transform: skew(xdeg) bien calculé. Mais comme je suppose que les petits génies du CSS ont depuis longtemps trouvé une solution à ce genre de problème, je préfère poser la question plutôt que de réinventer le fil à couper le beurre.
Modifié par PapyJP (09 Jun 2016 - 22:37)

Bonsoir Papy

Ce que je ferais... et ce que je ne ferais pas :
- Je n'utiliserais surtout pas les balises figure et figcaption. En effet, ces dernières déservent les images d'un contenu, or, ici il s'agit d'une image de style représentant un point de coordonnée, ce qui n'a rien à voir...
- Pour la facilité du positionnement (et aussi pour soulager le calcul au maximum) de ne laisserais au javascript que le positionnement du point (un "top" et un "left") et, éventuellement, l'ajout d'une classe dans le html pour positionner le texte qui l'accompagne "en haut à gauche", "en bas à droite", etc. Tout le reste incomberais au style. Édit. j'oubliais : pour répondre à la question sur la manipulation du trait j'utilise transform:rotate().

Le résultat de cette réflexion : Un CodePen pour Papy
Modifié par Olivier C (10 Jun 2016 - 21:49)

Merci Olivier. Je regarderai cela en détail demain.
je ne discuterai pas le point de savoir si une image qui représente la position d'une ville et le nom de cette ville doivent être ou non inclus dans une <figure>, mais il s'agit bien de deux propriétés d'un même objet, et il me semble légitime de les inclure dans une balise qui leur donne un sens, quelle que soit cette balise.
Pour le reste, j'ai bien entendu utilisé des classes pour designer la position du texte par rapport au point, je leur ai donné comme nom celle des points cardinaux, ce qui est très parlant et assez facile à styler, et la position est définie en terme de left et top calculés en Javascript, exprimés en % des dimensions de l'image de fond, ce qui est à la fois simple et responsive.
Modifié par PapyJP (10 Jun 2016 - 23:42)

Bonsoir,


si tu connais les coordonnées du point et celle ou commence le texte, tu peut construire entre ces deux coordonnées un rectangle et dessiné dedans un gradient oblique entre 2 coins

ex avec une ligne noire de 2 pixels :

background:linear-gradient(
    to bottom right, 
    transparent  calc(50% - 1px), 
    black        calc(50% - 1px), 
    black        calc(50% + 1px) , 
    transparent  calc(50% + 1px) 
  );

selon les coordonnées a toi d'appliquer une oblique vers la droite ou la gauche ou ne dessiné q'une bordure si hauteur ou largeur = 0; si l'idée te semble appropriée.

gcyrillus a écrit :
Bonsoir,

si tu connais les coordonnées du point et celle ou commence le texte, tu peut construire entre ces deux coordonnées un rectangle et dessiné dedans un gradient oblique entre 2 coins

ex avec une ligne noire de 2 pixels :

background:linear-gradient(
    to bottom right, 
    transparent  calc(50% - 1px), 
    black        calc(50% - 1px), 
    black        calc(50% + 1px) , 
    transparent  calc(50% + 1px) 
  );

selon les coordonnées a toi d'appliquer une oblique vers la droite ou la gauche ou ne dessiné q'une bordure si hauteur ou largeur = 0; si l'idée te semble appropriée.

Merci gcyrillus, je crois que c'est la solution qui convient à mon cas de figure, je vais la mettre en œuvre.

Edit: après test, c'est tout à fait ce que je cherchais à faire. merci encore
Je n'aurais jamais pensé à tracer la diagonale d'un rectangle en utilisant un gradiant!
Modifié par PapyJP (11 Jun 2016 - 13:04)

@gcyrillus : Formidable, vraiment. Je garde sous le coude moi aussi.