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

HTML Discussion :

Bouton dans un canvas


Sujet :

HTML

  1. #1
    Futur Membre du Club
    Profil pro
    Inscrit en
    Mai 2010
    Messages
    5
    Détails du profil
    Informations personnelles :
    Localisation : Canada

    Informations forums :
    Inscription : Mai 2010
    Messages : 5
    Points : 5
    Points
    5
    Par défaut Bouton dans un canvas
    Bonjour,

    Voilà, j'aurais une petite question. Je cherche comment faire pour insérer des boutons dans un canvas. Je m'explique. J'ai un rectangle avec 4 cerles et je voudrais que ces cercles soit cliquables afin de les faire changer de couleur. Je pensais à détecter la position de la souris lors du clic mais il me semble que c'est un peu trop fastidieux et qu'il doit y avoir une meilleure solution.

    Merci d'avance.

  2. #2
    Membre confirmé Avatar de llaffont
    Homme Profil pro
    Administrateur systèmes et réseaux
    Inscrit en
    Juin 2007
    Messages
    701
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 46
    Localisation : France, Loire (Rhône Alpes)

    Informations professionnelles :
    Activité : Administrateur systèmes et réseaux
    Secteur : Communication - Médias

    Informations forums :
    Inscription : Juin 2007
    Messages : 701
    Points : 597
    Points
    597
    Par défaut
    Hello,

    Si tu t'es déjà fait "chi##" a créer un canvas avec 4 cercles tu devrais t'en sortir avec une détection du clique.

    Car tes cercles sont dans une plage de coordonnées que tu as déjà fixé pour les créer. il te reste juste à comparer les coordonnées de ton clique avec la plage de tes cercles et puis changer la couleur.

    Où est la difficulté ?

    Mais pas curiosité maladive je vais quand même tester pour voir si c'est réalisable.
    La théorie, c'est quand on sait tout et que rien ne fonctionne.
    La pratique, c'est quand tout fonctionne et que personne ne sait pourquoi.

    Ici, nous avons réuni théorie et pratique : Rien ne fonctionne... et personne ne sait pourquoi !


    Albert Einstein

  3. #3
    Futur Membre du Club
    Profil pro
    Inscrit en
    Mai 2010
    Messages
    5
    Détails du profil
    Informations personnelles :
    Localisation : Canada

    Informations forums :
    Inscription : Mai 2010
    Messages : 5
    Points : 5
    Points
    5
    Par défaut
    Le "problème" c'est que pour créer les cercles, je passe les coordonnées de mon canvas, or lorsque je veux récupérer les coordonnées de ma souris, ce sont celles du document.

  4. #4
    Membre confirmé Avatar de llaffont
    Homme Profil pro
    Administrateur systèmes et réseaux
    Inscrit en
    Juin 2007
    Messages
    701
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 46
    Localisation : France, Loire (Rhône Alpes)

    Informations professionnelles :
    Activité : Administrateur systèmes et réseaux
    Secteur : Communication - Médias

    Informations forums :
    Inscription : Juin 2007
    Messages : 701
    Points : 597
    Points
    597
    Par défaut
    Effectivement ! on utilise "event.page" pour les coordonnées. J'avais lu une fonction qui te permettait de récupérer les coordonnées en fonction de l'objet parent.

    J'esais de te retrouver ça.

    Sinon en attendant tu peux faire 4 canvas l'un à coté de l'autre
    La théorie, c'est quand on sait tout et que rien ne fonctionne.
    La pratique, c'est quand tout fonctionne et que personne ne sait pourquoi.

    Ici, nous avons réuni théorie et pratique : Rien ne fonctionne... et personne ne sait pourquoi !


    Albert Einstein

  5. #5
    Membre confirmé Avatar de llaffont
    Homme Profil pro
    Administrateur systèmes et réseaux
    Inscrit en
    Juin 2007
    Messages
    701
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 46
    Localisation : France, Loire (Rhône Alpes)

    Informations professionnelles :
    Activité : Administrateur systèmes et réseaux
    Secteur : Communication - Médias

    Informations forums :
    Inscription : Juin 2007
    Messages : 701
    Points : 597
    Points
    597
    Par défaut
    J'ai trouvé ça !
    Cela peut être utile car il utilise un élément parent comme point 0.
    Comme j'arrive pas à remettre la main sur mon bout de code.

    http://jqueryui.com/demos/position/
    La théorie, c'est quand on sait tout et que rien ne fonctionne.
    La pratique, c'est quand tout fonctionne et que personne ne sait pourquoi.

    Ici, nous avons réuni théorie et pratique : Rien ne fonctionne... et personne ne sait pourquoi !


    Albert Einstein

  6. #6
    Membre habitué Avatar de scorpking
    Profil pro
    Inscrit en
    Avril 2006
    Messages
    232
    Détails du profil
    Informations personnelles :
    Âge : 37
    Localisation : France

    Informations forums :
    Inscription : Avril 2006
    Messages : 232
    Points : 181
    Points
    181
    Par défaut
    sinon si tu connais la position de ton canevas dans ta page il te suffit de les soustraire pour avoir le point d'origine de ton canevas

    edit : voici un script qui te permet de déterminer quelque soit sa position le décalage par rapport au bord du document il tu suffit d'appliquer ce que je te disais si dessus pour déterminer la position de ta souris dans ton canvas et du coup j'ai la réponse a mon problème qui était exactement le même

    http://www.webbricks.org/bricks/getPos/

  7. #7
    Membre du Club
    Homme Profil pro
    Urbaniste
    Inscrit en
    Septembre 2014
    Messages
    51
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Aveyron (Midi Pyrénées)

    Informations professionnelles :
    Activité : Urbaniste
    Secteur : Conseil

    Informations forums :
    Inscription : Septembre 2014
    Messages : 51
    Points : 49
    Points
    49
    Par défaut
    Bonjour.
    Je sais que la discussion est ancienne mais ça m'intéresse pas mal.
    Si ça peut aider, j'ai trouvé ça : http://www.html5canvastutorials.com/...e-coordinates/
    Si non je suis moi même intéressé par ces questions de bouton dans un canvas. Pour résumer, je fais une carte en html5 canvas et j'aimerais rendre les départements cliquables (il n'y en a que 6), donc le problème est similaire. Cependant, j'ai aussi lu un truc intéressant, c'est la question du survol. Il serait donc possible de changer la couleur d'une zone du canvas juste par survol!!!
    Ca m'intéresse.

  8. #8
    Modérateur

    Profil pro
    Inscrit en
    Septembre 2004
    Messages
    12 551
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Septembre 2004
    Messages : 12 551
    Points : 21 607
    Points
    21 607
    Par défaut
    Mais évidemment, voyons.

    Le canvas c'est toi qui dessines ce qu'il y a dedans, donc si tu dessines le département avec une autre couleur que celle qu'il avait avant, eh ben le département change de couleur bien sûr -_-°.
    N'oubliez pas de consulter les FAQ Java et les cours et tutoriels Java

Discussions similaires

  1. [Python 3.X] Obtenir le bouton sur lequel on a cliqué en dernier dans un canvas
    Par Jufloo dans le forum Tkinter
    Réponses: 2
    Dernier message: 20/04/2015, 08h38
  2. Afficher une élément dans un Canvas après un clic sur un bouton
    Par D-Day dans le forum Windows Presentation Foundation
    Réponses: 3
    Dernier message: 28/02/2010, 19h39
  3. Nouvelle form avec bouton dans barre taches
    Par DarkChamallo dans le forum API, COM et SDKs
    Réponses: 3
    Dernier message: 17/05/2004, 20h44
  4. Icone/bouton dans la barre des taches...
    Par dynobremo dans le forum API, COM et SDKs
    Réponses: 6
    Dernier message: 28/02/2003, 12h05
  5. Réponses: 2
    Dernier message: 31/08/2002, 14h00

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