Discussion :

[dmganges]

Bonjour,
Voila ma première demande en JS, autant dire que je débute.

Je dessine un astrolabe.
Dans un premier temps je faisais le cercle externe total, puis les courbes à l'intérieur.
Les courbes occupent la totalité interne du cercle.
Je voulais que certaines courbes s'arrêtent à une position bien déterminée : l'horizon qui est une courbe dans le cercle.

J'ai trouvé la méthode clip() qui me permet de réaliser ce que je souhaite très facilement.

Cependant après avoir tracé les courbes d’azimut, j'ai d'autres tracés à réaliser, mais ceux-ci doivent occuper la totalité du cercle externe initial.

Si vous m'avez suivi jusqu'ici, ma question est rudimentaire :
Est-il possible sur supprimer la méthode clip() initialement appelée ?
Et ce bien sûr sans que les azimuts redescendent jusqu'en bas ?


Deux images :
Astro_SansClip_1, ce que j'obtiens sans clip, mais je ne veux pas des azimuts (en noir) qui descendent jusqu’en bas du cercle
Astro_clip_1, intéressant car je limite bien les azimuts à l'horizon, mais on voit que les autres cercles tracés sont incomplets

MERCI d'avance pour vos suggestions !!!

[NoSmoking]

Bonjour,
sauvegarde le context avant le clip et restaure le après

Code :

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

1
2
3
4
5
6
context.save();
// blabla
context.clip();
//reblabla
context.restore();
//rereblala

[dmganges]

Superbe !
MERCI beaucoup NoSmoking !
Je découvre JS sur le tard, je n'avais pas compris le fonctionnement de save() restore()
Cela m'évite des calculs abominables...

[dmganges]

Bonjour,
La question précédente est bien
que j'ai enlevé car ma question suivante est du même ordre et l'image ci-dessus facilite les choses.

Je souhaiterai ajouter une zone de 20px à l'intérieur du cercle externe de l'astrolabe.
Cette zone serait similaire à un cadran d'horloge, elle serait simplement graduée sur 24h au lieu de 12h.

Je pourrais bien sûr commencer par tracer ce cadran, mais il diminuerait d'autant la partie interne, la plus utile.
Hors on constate que sur le pourtour de l'astrolabe cet espace de 20px environ est disponible (peu utilisé), qu'il suffirait d'y donner une couleur différente et d'y inscrire les graduations qui conviennent.

J'ai besoin de fonctionnalités qui encore me semblent rudimentaires :

- Est-il possible de colorier la partie externe d'un cercle ?
- Éventuellement en faire la zone de travail [clip()] ?
En quelque sorte faire le complément à un clip()

J'ai passé l'après-midi à chercher sur le net, j'ai vu de belles choses complexes de réalisées, je ne voudrais pas m'embarquer dans une usine à gaz s'il y a une solution basique.
MERCI d'avance pour votre compréhension et vos suggestions !

[NoSmoking]

Est-il possible de colorier la partie externe d'un cercle ?

Oui en utilisant la méthode stroke().

Code :

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

1
2
3
4
oCtx.arc( centerX, centerY, radius, 0, 2 * Math.PI, false);
oCtx.lineWidth = 10;
oCtx.strokeStyle = 'red';
oCtx.stroke();

[dmganges]

MERCI NoSmoking,

En fait j’utilise bien stroke() pour tracer toutes les lignes... mais avec une épaisseur de 1.
Obnubilé par le fait de vouloir colorier l'extérieur d'un cercle, je ne pensais pas à tracer un cercle d'épaisseur > 1
Faut dire que je suis comme les gamins, tellement pressé de voir le résultat...
Je pose les valises et je reprends les bases !

Là c'est bon, je trace bien par dessus et sans perdre de l'espace utile