IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Canvas, Supprimer la méthode clip()


Sujet :

JavaScript

  1. #1
    Membre chevronné Avatar de dmganges
    Homme Profil pro
    Retraité. Ne recherche pas un emploi.
    Inscrit en
    Septembre 2011
    Messages
    1 411
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 72
    Localisation : France, Hérault (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Retraité. Ne recherche pas un emploi.
    Secteur : Service public

    Informations forums :
    Inscription : Septembre 2011
    Messages : 1 411
    Points : 2 060
    Points
    2 060
    Par défaut Canvas, Supprimer la méthode clip()
    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 !!!

  2. #2
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 135
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 135
    Points : 44 923
    Points
    44 923
    Par défaut
    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

  3. #3
    Membre chevronné Avatar de dmganges
    Homme Profil pro
    Retraité. Ne recherche pas un emploi.
    Inscrit en
    Septembre 2011
    Messages
    1 411
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 72
    Localisation : France, Hérault (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Retraité. Ne recherche pas un emploi.
    Secteur : Service public

    Informations forums :
    Inscription : Septembre 2011
    Messages : 1 411
    Points : 2 060
    Points
    2 060
    Par défaut
    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...

  4. #4
    Membre chevronné Avatar de dmganges
    Homme Profil pro
    Retraité. Ne recherche pas un emploi.
    Inscrit en
    Septembre 2011
    Messages
    1 411
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 72
    Localisation : France, Hérault (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Retraité. Ne recherche pas un emploi.
    Secteur : Service public

    Informations forums :
    Inscription : Septembre 2011
    Messages : 1 411
    Points : 2 060
    Points
    2 060
    Par défaut Couleur externe d'un objet d'un cercle par exemple
    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 !

  5. #5
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 135
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 135
    Points : 44 923
    Points
    44 923
    Par défaut
    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();

  6. #6
    Membre chevronné Avatar de dmganges
    Homme Profil pro
    Retraité. Ne recherche pas un emploi.
    Inscrit en
    Septembre 2011
    Messages
    1 411
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 72
    Localisation : France, Hérault (Languedoc Roussillon)

    Informations professionnelles :
    Activité : Retraité. Ne recherche pas un emploi.
    Secteur : Service public

    Informations forums :
    Inscription : Septembre 2011
    Messages : 1 411
    Points : 2 060
    Points
    2 060
    Par défaut
    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

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Supprimer tous les clip crées
    Par lea94140 dans le forum Flash
    Réponses: 1
    Dernier message: 30/11/2006, 21h26
  2. Supprimer une méthode générée par Matisse
    Par Babaôrom dans le forum NetBeans
    Réponses: 2
    Dernier message: 21/11/2006, 10h13
  3. [FLASH MX2004] Probleme clip et méthode hitTest()
    Par ruready dans le forum Flash
    Réponses: 10
    Dernier message: 06/07/2005, 12h07
  4. Méthode pour supprimer tous les enfants d'un élément
    Par Pymm dans le forum Général JavaScript
    Réponses: 6
    Dernier message: 10/05/2005, 13h10

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo