Discussion :

[allowed]

Salutation !

J'ai téléchargé ce compte a rebours sur internet, ca fait 3 jours que je cherche sans succès une solution afin d'écarter les cercles les un des autres et voici les diverses questions que je me pose :

- Comment peut-on choisir la distance entre deux élément a l'intérieur du canvas?

- Peut-on modifier le css d'un élément canvas à l'aide du stylesheet??

Le lien se trouve juste à la fin.

Je vous remercie pour votre aide ! J'aimerais mieux comprendre le fonctionnement de celui-ci, donc si avez une explication en plus de la solution je vous en serais plus que reconnaissant, bonne journée à tous !

https://jsfiddle.net/50o47fye/

[SylvainPV]

Canvas, c'est une API de dessin. Les règles CSS ne s'appliquent pas à ce qui y est dessiné, car ces cercles ne sont pas des éléments HTML. Seul le texte est constitué d'éléments HTML (des <h4> et des <span> si tu regardes avec l'inspecteur de développement de ton navigateur).

Les cercles et le texte sont dessinés à des coordonnées précises :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

textElement.css("left", Math.round(i++ * this.data.attributes.item_size));

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var x = (i * this.data.attributes.item_size) + (this.data.attributes.item_size / 2);

On voit ici que le code se base actuellement uniquement sur la propriété item_size. Donc si on augmente cette valeur, les cercles ne seront pas espacés davantage, ils seront juste d'une plus grande taille. J'ai donc ajouté une autre valeur en config, horizontal_spacing.

Tout le code avec TC_Instance et TC_Class est un beau bordel selon moi. Il y a du code jQuery qui initialise des éléments inexistants dans ta démo, j'ignore si tu les as enlevé pour simplifier le problème ou si c'est juste du dead code, mais il faudrait faire le ménage.

Voilà à quoi je suis arrivé : https://jsfiddle.net/50o47fye/1/

Il y a un décalage des noeuds texte qui vient masquer les arcs canvas. A priori ça vient de règles en !important dans le CSS qui viennent écraser celles qui sont calculées par le plugin. J'imagine que c'est toi qui a voulu bricoler avec... et tout casser en passant

[allowed]

Bonjour,

Merci pour votre aide, je comprends mieux le code maintenant. Je suis en train de chercher une formule afin d'écarter les cercles sans réduire leur taille initial, est-ce possible ?? sans modifier une grande partie du code ???

Pour le TC Class, oui c'est normal j'ai gardé ce dont j'avais besoin afin que vous puissiez vous repérer facilement.

[SylvainPV]

Ben oui c'est possible, c'est exactement ce que je viens de faire... Tu as regardé mon lien ?

[allowed]

Oui je suis justement dessus depuis tout a l'heure, en augmentant la distance ça réduit la taille des cercles, je souhaiterais augmenter d'avantage l'espace entre les cercles et la taille des cercles, comment je peux faire ?? Merci !!

[SylvainPV]

La taille des cercles est calculée en fonction de l'espace restant, quand tu soustrais l'espacement horizontal à la largeur fixe du canvas. Pour des cercles plus grands, il faut un canvas plus large : l'attribut style:width dans le HTML