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 :

Rendre une image cliquable dans un canvas [API HTML5]


Sujet :

JavaScript

  1. #1
    Membre régulier
    Inscrit en
    Février 2009
    Messages
    204
    Détails du profil
    Informations forums :
    Inscription : Février 2009
    Messages : 204
    Points : 123
    Points
    123
    Par défaut Rendre une image cliquable dans un canvas
    Bonjour,

    j'ai un canvas où la même image est affiché selon un FPS (par un setIntervall ou par un requestAnimationFrame).

    Pour rendre l'image cliquable, voici comment je fais :
    -j'attache un écouteur onclick='trouver_image();' sur l'objet canvas. Ainsi, quand on clique sur le canvas, ça va déclencher la fonction trouver_image().
    -La fonction trouver_image() exécute une boucle for sur un array d'images dessinées sur le canvas.
    Si le click détecte un pixel de couleur, c'est qu'on a cliqué sur l'image, donc on récupère l'image appartenant à ce pixel de couleur, et par conséquent on déclenche une autre fonction, par exemple afficher_niveau1().

    Le problème est que quand je clique sur l'image, le canvas a du mal à déclencher la fonction afficher_niveau1(),
    càd que des fois il n'exécute pas cette fonction, des fois il exécute la fonction avec un petit retard.
    Or ce que je veux, c'est que quand on clique sur l'image, la fonction afficher_niveau1() se déclenche immédiatement.

    Donc je voudrais savoir d'où vient le problème ?

    Merci d'avance, cordialement.

  2. #2
    Modérateur

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

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 048
    Points : 44 562
    Points
    44 562
    Par défaut
    Bonjour,
    il n'exécute pas cette fonction, des fois il exécute la fonction avec un petit retard.
    (...)
    Donc je voudrais savoir d'où vient le problème ?
    cela peut provenir de l’ordonnancement de ton code, succession des opérations... ou encore de la non optimisation de ton code.... ou encore

  3. #3
    Membre régulier
    Inscrit en
    Février 2009
    Messages
    204
    Détails du profil
    Informations forums :
    Inscription : Février 2009
    Messages : 204
    Points : 123
    Points
    123
    Par défaut
    => c'est presque ça, et j'ai vu d'où venais le problème. C'est à cause du laps de temps qui s'écoule
    entre 2 rafraîchissement du canvas.

    J'ai mis un écouteur onmousedown sur la canvas de manière à ce que quand je clique sur une image, je met la valeur true à la propriété clicked pour cette image.
    Et j'ai aussi mis un écouteur onmouseup sur la canvas de manière à ce que quand je relache le bouton de la souris après avoir cliqué sur l'image, je met la valeur false à la propriété clicked pour cette image.

    Donc si je clique sur l'image et je relache le bouton de la souris entre 2 rafraichissement, le 2ème rafraichissement ne verra pas la valeur true de propriété clicked de l'image cliquée.

    Merci pour ton aide

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

Discussions similaires

  1. [MySQL] Rendre une image cliquable
    Par Flushovsky dans le forum PHP & Base de données
    Réponses: 1
    Dernier message: 25/11/2010, 15h49
  2. Comment creer des images cliquables dans un canvas?
    Par morchea dans le forum SWT/JFace
    Réponses: 3
    Dernier message: 23/11/2009, 11h54
  3. Réponses: 5
    Dernier message: 09/01/2009, 14h43
  4. Rendre une image cliquable
    Par setthe dans le forum wxPython
    Réponses: 8
    Dernier message: 24/10/2008, 22h23
  5. [HTML] Comment rendre une image cliquable?
    Par Nixar dans le forum Balisage (X)HTML et validation W3C
    Réponses: 3
    Dernier message: 11/03/2008, 09h58

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