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 :

Centrer un point lors du déplacement d'une image dans canvas comme dans google maps


Sujet :

JavaScript

  1. #1
    Futur Membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    Septembre 2014
    Messages
    25
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Côte d'Ivoire

    Informations professionnelles :
    Activité : Étudiant
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Septembre 2014
    Messages : 25
    Points : 6
    Points
    6
    Par défaut Centrer un point lors du déplacement d'une image dans canvas comme dans google maps
    Salut,

    Je ne sais pas si le titre reflète la réalité de mon problème mais bon voila.
    Je travaille sur une image (une carte de dimension 3973x5617px). J'ai un formulaire qui me permet de saisir les coordonnées dd.mm.ssO et dd.mm.ssN que j'arrive a convertir en pixels. J'arrive également à déplacer la carte vers le point avec ça :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    function pointDisplay(coordX,coordY){
            //coordX et coordY representent les coordonnées du point à afficher sur la carte
            ctx.drawImage(gkhead,0,0);
     ctx.save();
            ctx.lineWidth = 2;
            ctx.fillRect(coordX,coordY);
           var centreX=Math.round(canvas.width/2);
           var centreY=Math.round(canvas.height/2);
           var col=-(coordX-centreX);<br>       
           var lig=-(coordY-centreY);<br>    
          ctx.drawImage(gkhead,col,lig);
           ctx.fillRect(coordX,coordY,30,30);<br>    
        ctx.fillStyle='rgba(23,145,167,0.4)';
            ctx.fill();
    Mais je n'arrive pas à faire afficher le point au centre du canvas comme dans google maps.
    Pourriez-vous m'aider ?

  2. #2
    Expert éminent
    Avatar de Watilin
    Homme Profil pro
    En recherche d'emploi
    Inscrit en
    Juin 2010
    Messages
    3 093
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : En recherche d'emploi

    Informations forums :
    Inscription : Juin 2010
    Messages : 3 093
    Points : 6 754
    Points
    6 754
    Par défaut
    J'ai l'impression que tu te mélanges un peu les pinceaux avec les fonction du canevas. Déjà, il y a cet appel à fillRect auquel il manque des paramètres :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    ctx.fillRect(coordX,coordY);
    mais c'est peut-être juste une erreur de recopie. Ensuite,
    • tu appelles deux fois drawImage, je pense que la première est inutile ;
    • il y a cet appel à ctx.fill() qui dépend d'un chemin (path) pour fonctionner, mais je ne vois pas de ctx.beginPath() dans ton extrait de code ;
    • ce ctx.save() me laisse supposer que tu utilises translate ou scale à un autre endroit – si c'est le cas et si tu n'utilises pas ctx.restore() correctement, ton point de référence ne sera plus au bon endroit et tout va partir en chips.
    La FAQ JavaScript – Les cours JavaScript
    Touche F12 = la console → l’outil indispensable pour développer en JavaScript !

  3. #3
    Futur Membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    Septembre 2014
    Messages
    25
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Côte d'Ivoire

    Informations professionnelles :
    Activité : Étudiant
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Septembre 2014
    Messages : 25
    Points : 6
    Points
    6
    Par défaut
    Merci c'est vrai c'est une erreur de recopie
    voici
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    function pointDisplay(e,coordx,coordy,x,y){
            ctx.beginPath();
            ctx.lineWidth = 2;
             x-=canvas.offsetLeft;//<span style="font-size:14px;">c'est la coordonnée x de début du canvas de vision</span>
             y-=canvas.offsetTop;//<span style="font-size:14px;">c'est la coordonnée Y de début du canvas de vision</span>
            var centreX=Math.round(canvas.width/2)+canvas.offsetLeft;
            var centreY=Math.round(canvas.height/2)+canvas.offsetTop;
            var resultat={};
               resultat.x=-(coordx-centreX);
               resultat.y=-(coordy-centreY);
            var result=convert(1000,1000);
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.drawImage(gkhead,result.x,result.y);
            ctx.fillRect(result.x,result.y,30,30);
            alert(canvas.offsetLeft+' '+canvas.offsetTop);//ça me retour 0,0
            ctx.fillStyle='rgba(23,145,167,0.4)';
            ctx.fill();
            ctx.stroke();
    je vous en prie aidez moi

  4. #4
    Membre habitué
    Homme Profil pro
    rien
    Inscrit en
    Décembre 2015
    Messages
    282
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Aveyron (Midi Pyrénées)

    Informations professionnelles :
    Activité : rien

    Informations forums :
    Inscription : Décembre 2015
    Messages : 282
    Points : 144
    Points
    144
    Par défaut
    Salut

    Et comme ça, ça marcherait ?

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
     
    function pointDisplay(e,coordx,coordy,x,y){
            ctx.beginPath();
            ctx.lineWidth = 2;
            var centreX=Math.round(canvas.width/2)+canvas.offsetLeft;
            var centreY=Math.round(canvas.height/2)+canvas.offsetTop;
            var resultat={};
            resultat.x=-(coordx-centreX);
            resultat.y=-(coordy-centreY);
            var result=convert(1000,1000);
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            ctx.drawImage(gkhead,resultat.x,resultat.y);
            ctx.fillRect(resultat.x,resultat.y,30,30);
            ctx.fillStyle='rgba(23,145,167,0.4)';
            ctx.fill();
            ctx.stroke();
    }
    Note que les derniers résult.x et result.y n'existent pas, tu t'étais trompé.
    Le var result=convert() il sert à quoi ? Parce que je ne vois pas où tu l'utilises ensuite.
    Vire-le pour voir (met-le en commentaires)

  5. #5
    Futur Membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    Septembre 2014
    Messages
    25
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Côte d'Ivoire

    Informations professionnelles :
    Activité : Étudiant
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Septembre 2014
    Messages : 25
    Points : 6
    Points
    6
    Par défaut
    j'ai dit que j'arrive deplacer(un semblant de deplacement) en redessinant l'image(la carte) a un endroit sur la carte mais j'arrive pas a faire a centre le point ou l'image est redessiné
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    function pointDisplay(e){
          var pointAlat,pointAlng;
            tx.beginPath();
            ctx.lineWidth = 2;
             pointAlat-=conteneur.offsetLeft;
             pointAlng-=conteneur.offsetTop;
    // Détermine le centre du canvas
            var centreX=Math.round(canvas.width/2);
            var centreY=Math.round(canvas.height/2);
            var resultat={};
               resultat.x=-(pointAlat-centreX);
               resultat.y=-(pointAlng-centreY);
            ctx.clearRect(0, 0, canvas.width, canvas.height);//nettoyer le canvas pour y redessiner l'image afin de pouvoir centrer le point
            ctx.drawImage(gkhead,-centreX,-centreY);//je redessine l'image
            ctx.fillRect(resultat.x,resultat.y,100,100);//dessin du point qui doit être au milieu de l'image redessiner
            ctx.fillStyle='rgba(23,145,167,0.4)';
            ctx.stroke();
            e.preventDefault();
         }
    je ne sais pas si je me fait comprendre aider moi j'arrive pas resoudre ce probleme depuis un bon moment maintenant

  6. #6
    Expert éminent
    Avatar de Watilin
    Homme Profil pro
    En recherche d'emploi
    Inscrit en
    Juin 2010
    Messages
    3 093
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : En recherche d'emploi

    Informations forums :
    Inscription : Juin 2010
    Messages : 3 093
    Points : 6 754
    Points
    6 754
    Par défaut
    Je vois plusieurs problèmes dans ton dernier code :

    1. pointAlat et pointAlng sont indéfinies. Du coup, resultat.x et resultat.y sont indéfinies également, et au final l'appel ctx.fillRect(resultat.x, resultat.y, 100, 100); est équivalent à ctx.fillRect(undefined, undefined, 100, 100);.

    2. Ces trois instructions fonctionnent ensemble :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    ctx.beginPath();
    ctx.lineWidth = 2;
    ctx.stroke();
    Cependant, et je te l'ai déjà fait remarquer, ce n'est pas suffisant pour produire quelque chose de visible. Je ne peux que te conseiller de revoir les tutoriels sur le dessin dans un canevas. Tu as un « traceur » invisible que tu initialises avec beginPath, puis tu traces un chemin avec les méthodes moveTo, lineTo, arc, etc. puis tu « matérialises » ton chemin avec stroke ou fill. Voir cet exemple du MDN.

    3. Tu dois changer le fillStyle avant d'appeler fillRect ou n'importe quelle autre méthode commençant par fill, autrement ta modification ne sera pas prise en compte. La couleur de remplissage par défaut est le noir.

    4. Dans un précédent post, tu disais que offsetLeft et offsetTop te donnaient 0. Ton canevas se positionne par rapport à son offset parent (tape canvas.offsetParent dans ta console), et en fonction des styles CSS que tu lui as donnés (position, left, top, etc). Je ne suis pas sûr que tu en aies vraiment besoin dans le cas présent.
    La FAQ JavaScript – Les cours JavaScript
    Touche F12 = la console → l’outil indispensable pour développer en JavaScript !

  7. #7
    Membre habitué
    Homme Profil pro
    rien
    Inscrit en
    Décembre 2015
    Messages
    282
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Aveyron (Midi Pyrénées)

    Informations professionnelles :
    Activité : rien

    Informations forums :
    Inscription : Décembre 2015
    Messages : 282
    Points : 144
    Points
    144
    Par défaut
    Salut Aboucool, à mon avis tu devrais analyser chaque point que Watilin t'as indiqué si tu veux te débrouiller de ce problème.
    N'hesite pas à poser des questions si tu comprends pas un des points.

  8. #8
    Futur Membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    Septembre 2014
    Messages
    25
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Côte d'Ivoire

    Informations professionnelles :
    Activité : Étudiant
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Septembre 2014
    Messages : 25
    Points : 6
    Points
    6
    Par défaut
    merci pour cet éclairage j'ai fais comme ça mais ça ne marche pas
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
     
    function pointDisplay(e){
          var pointAlat,pointAlng;
            ctx.fillStyle='rgba(23,145,167,0.4)';
             pointAlat-=conteneur.offsetLeft;//conteneur.offsetLeft retourne 649
             pointAlng-=conteneur.offsetTop;//conteneur.offsetTop retourne 363
    // Détermine le centre du canvas
            var centreX=Math.round(canvas.width/2);
            var centreY=Math.round(canvas.height/2);
            var resultat={};
               resultat.x=-(pointAlat-centreX);
               resultat.y=-(pointAlng-centreY);
            ctx.clearRect(0, 0, canvas.width, canvas.height);//nettoyer le canvas pour y redessiner l'image afin de pouvoir centrer le point
            ctx.drawImage(gkhead,resultat.x,resultat.y);//je redessine l'image
            ctx.fillRect(x,y,100,100);//dessin du point qui doit être au milieu de l'image redessiner
             e.preventDefault();
         }
    mais j'arrive pas a faire affiché le point au centre de mon canvas lors du redessinage de la carte s'il vous plais aider moi je suis vraiment perdu avec ce problème

  9. #9
    Expert éminent
    Avatar de Watilin
    Homme Profil pro
    En recherche d'emploi
    Inscrit en
    Juin 2010
    Messages
    3 093
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : En recherche d'emploi

    Informations forums :
    Inscription : Juin 2010
    Messages : 3 093
    Points : 6 754
    Points
    6 754
    Par défaut
    Ok, on va voir en détail les endroits où ça déconne.

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    var pointAlat, pointAlng;
    Ici, tu déclares deux variables, mais sans les initialiser. Ces deux variables sont donc indéfinies : undefined, ce qui signifie (sans surprises) qu'elles n'ont pas été définies. C'est comme si tu avais écrit :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    var pointAlat = undefined;
    var pointAlng = undefined;
    Ensuite on arrive à ces instructions :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    pointAlat -= conteneur.offsetLeft; //conteneur.offsetLeft retourne 649
    pointAlng -= conteneur.offsetTop; //conteneur.offsetTop retourne 363
    L'affectation x -= y équivaut à x = x - y, donc tes instructions sont équivalentes à :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    pointAlat = pointAlat - conteneur.offsetLeft;
    pointAlng = pointAlng - conteneur.offsetTop;
    Si on remplace les valeurs par ce qu'on connaît, ça donne :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    pointAlat = undefined - 649;
    pointAlng = undefined - 363;
    Et là il se passe un truc : l'interpréteur ne sait pas faire une soustraction avec une valeur qui n'est pas définie. Il fait alors un tour de magie : il renvoie NaN, valeur spéciale qui signifie Not a Number.

    Ensuite :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    resultat.x = - (NaN - centreX);
    resultat.y = - (NaN - centreY);
    Tu peux deviner ce qui se passe : le NaN se propage à resultat.x et resultat.y… Et finalement :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    ctx.drawImage(gkhead, NaN, NaN);
    Ce NaN a la fâcheuse habitude de passer silencieusement dans la plupart des cas, sans provoquer de message d'erreur. Ici, ton appel à drawImage ne va simplement rien faire. Pour t'aider à déboguer, tu peux ajouter des tests de sûreté aux endroits stratégiques :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    if (isNaN(pointAlat) || isNaN(pointAlng)) {
      throw new Error("il y a un problème avec pointAlat ou pointAlng");
    }
    ctx.drawImage(gkhead, pointAlat, pointAlng);
    La FAQ JavaScript – Les cours JavaScript
    Touche F12 = la console → l’outil indispensable pour développer en JavaScript !

  10. #10
    Membre habitué
    Homme Profil pro
    rien
    Inscrit en
    Décembre 2015
    Messages
    282
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Aveyron (Midi Pyrénées)

    Informations professionnelles :
    Activité : rien

    Informations forums :
    Inscription : Décembre 2015
    Messages : 282
    Points : 144
    Points
    144
    Par défaut
    Et puis il y a aussi ça dans ton code :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    ctx.fillRect(x,y,100,100);//dessin du point qui doit être au milieu de l'image redessiner
    Ce carré sera dessiné au point x,y mais c'est son centre (du carré) que tu dois mettre en x,y et non son coin haut/gauche.
    Ce qui devrait donner :

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    ctx.fillRect(x-50,y-50,100,100);//dessin du point qui doit être au milieu de l'image redessiner
    C'est à dire décaler le petit carré de sa moitié de largeur et moitié de hauteur.

    D'ailleurs, je me pose une question, ce x et y tu le sors d'où ? C'est à ce que tu as dis déjà la conversion de coordonnées google en points cartésiens, mais je ne vois pas la conversion dans ton code.

  11. #11
    Futur Membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    Septembre 2014
    Messages
    25
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Côte d'Ivoire

    Informations professionnelles :
    Activité : Étudiant
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Septembre 2014
    Messages : 25
    Points : 6
    Points
    6
    Par défaut
    ok je vois j'ai foire en mettant x et y ça devrait être pointAlat et pointAlng
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
     
    function pointDisplay(e){
          var pointAlat,pointAlng;
            ctx.fillStyle='rgba(23,145,167,0.4)';
             pointAlat-=conteneur.offsetLeft;//conteneur.offsetLeft retourne 649
             pointAlng-=conteneur.offsetTop;//conteneur.offsetTop retourne 363
    // Détermine le centre du canvas
            var centreX=Math.round(canvas.width/2);
            var centreY=Math.round(canvas.height/2);
            var resultat={};
               resultat.x=-(pointAlat-centreX);
               resultat.y=-(pointAlng-centreY);
            ctx.clearRect(0, 0, canvas.width, canvas.height);//nettoyer le canvas pour y redessiner l'image afin de pouvoir centrer le point
            ctx.drawImage(gkhead,resultat.x,resultat.y);//je redessine l'image
            ctx.fillRect(pointAlat,pointAlng,100,100);//dessin du point qui doit être au milieu de l'image redessiner
             e.preventDefault();
         }
    maintenant pour le centrage du point je crois qu'on ne se comprend, moi je veux que mon point ce redessine lors au centre lors du drawimage comme dans google maps lors de la recherche d'un point.
    je vous explique:
    - j'ai un formulaire qui me permet de saisir les coordonnées
    -une carte (image avec 3973x5617 de dimension) dans le canvas(de dimension 1263x1785 ) qui est initialiser comme ça
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    ctx.drawImage(gkhead,0,0);
    mon image
    j'aimerai que lorsqu'on click sur le bouton submit ça m'affiche le point au sur carte de sorte a ce qu'il soit visible au milieu du canvas
    j'espere que maintenant je suis plus claire

  12. #12
    Expert éminent
    Avatar de Watilin
    Homme Profil pro
    En recherche d'emploi
    Inscrit en
    Juin 2010
    Messages
    3 093
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : En recherche d'emploi

    Informations forums :
    Inscription : Juin 2010
    Messages : 3 093
    Points : 6 754
    Points
    6 754
    Par défaut
    As-tu fait un dessin ? Tes formules pour resultat.x et resultat.y sont correctes, mais ta façon de les appliquer ne l'est pas. J'ai l'impression que tu ne comprends pas quel est le point d'origine de ton canevas. Du coup je t'ai fait un dessin :
    Nom : centrer-point-canvas.png
Affichages : 349
Taille : 75,4 Ko
    Le point O est le point d'origine. Il correspond aux coordonnées (0, 0). Toutes les méthodes de dessin de ton canevas se basent sur ce point.
    Ton image est le rectangle bleu. Étant beaucoup plus grande que le canevas, seule une partie est visible. Son point de référence est le point P, et ses coordonnées dans le système du canevas (donc par rapport au point O) sont négatives (flèche verte). Si tu utilises directement drawImage(gkhead, -pointAlat, -pointAlng), le point que tu veux afficher apparaîtra sur O. Il faut simplement rajouter la flèche rose, les coordonnées du centre du canevas (le point C) :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    var centreX = Math.round(canvas.width / 2);
    var centreY = Math.round(canvas.height / 2);
    var resultat = {};
    resultat.x = -pointAlat + centreX;
    resultat.y = -pointAlng + centreY;
    ctx.drawImage(gkhead, resultat.x, resultat.y);
    Note bien que ta formule et la mienne sont équivalentes. Je te refais juste la démonstration pour mettre en évidence le rôle du point O dans l'histoire.
    Sur mon dessin j'ai également rajouté offsetLeft et offsetTop pour te montrer qu'ils ne servent à rien dans le calcul.

    Reste ce problème de NaN que tu n'as pas corrigé. Dès l'instant où tu déclares les variables pointAlat et pointAlng avec var, tu crées des variables locales à ta fonction ; et s'il existait des variables globales avec le même nom, les globales sont masquées. Elles ne sont pas supprimées, mais elles sont inaccessibles depuis l'intérieur de cette fonction. Voir portée des fonctions.
    La FAQ JavaScript – Les cours JavaScript
    Touche F12 = la console → l’outil indispensable pour développer en JavaScript !

  13. #13
    Futur Membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    Septembre 2014
    Messages
    25
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Côte d'Ivoire

    Informations professionnelles :
    Activité : Étudiant
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Septembre 2014
    Messages : 25
    Points : 6
    Points
    6
    Par défaut
    merci pour cette explication en image
    la formule est exacte selon moi j'arrive toujours pas a mettre le point au centre du canvas
    j'ai donnees des valeurs a mes variables pointAlat et pointAlng et j'ai vu que la fonction drawImage ne suis pas le point
    aider moi je compte sur vous pour m'en sortir

  14. #14
    Expert éminent
    Avatar de Watilin
    Homme Profil pro
    En recherche d'emploi
    Inscrit en
    Juin 2010
    Messages
    3 093
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : En recherche d'emploi

    Informations forums :
    Inscription : Juin 2010
    Messages : 3 093
    Points : 6 754
    Points
    6 754
    Par défaut
    Je peux voir ton code ?
    La FAQ JavaScript – Les cours JavaScript
    Touche F12 = la console → l’outil indispensable pour développer en JavaScript !

  15. #15
    Futur Membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    Septembre 2014
    Messages
    25
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Côte d'Ivoire

    Informations professionnelles :
    Activité : Étudiant
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Septembre 2014
    Messages : 25
    Points : 6
    Points
    6
    Par défaut
    merci encore pour cet illustration. pour la formule il me semble que c'est bon, mais ça ne marche toujours pas.
    j'ai affecté des valeurs a mes variable pointAlat et pointAlng j'ai remarqué que lorsque le point se situe dans le champs(canvas) il n'est pas centré dans celui-ci mais visibles et pareil quand le point se situe sur une partie hors du champs (canvas) le point n'est plus visible

  16. #16
    Futur Membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    Septembre 2014
    Messages
    25
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Côte d'Ivoire

    Informations professionnelles :
    Activité : Étudiant
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Septembre 2014
    Messages : 25
    Points : 6
    Points
    6
    Par défaut
    voici le code
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    function pointDisplay(e){
    //avec ces valeurs(630 et 405 le point s'affiche dans le canvas mais avec 2452 et 3678 par exemple le point ne s'affiche pas dans le champs canvas
          var pointAlat=630,pointAlng=405;
            ctx.fillStyle='rgba(23,145,167,0.4)';
             pointAlat-=conteneur.offsetLeft;//conteneur.offsetLeft retourne 649
             pointAlng-=conteneur.offsetTop;//conteneur.offsetTop retourne 363
    // Détermine le centre du canvas
            var centreX=Math.round(canvas.width/2);
            var centreY=Math.round(canvas.height/2);
            var resultat={};
               resultat.x=-(pointAlat-centreX);
               resultat.y=-(pointAlng-centreY);
            ctx.clearRect(0, 0, canvas.width, canvas.height);//nettoyer le canvas pour y redessiner l'image afin de pouvoir centrer le point
            ctx.drawImage(gkhead,resultat.x,resultat.y);//je redessine l'image
            ctx.fillRect(pointAlat,pointAlng,100,100);//dessin du point qui doit être au milieu de l'image redessiner
             e.preventDefault();
         }
    donc voila le code aidez moi

  17. #17
    Expert éminent
    Avatar de Watilin
    Homme Profil pro
    En recherche d'emploi
    Inscrit en
    Juin 2010
    Messages
    3 093
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : En recherche d'emploi

    Informations forums :
    Inscription : Juin 2010
    Messages : 3 093
    Points : 6 754
    Points
    6 754
    Par défaut
    Peux-tu m'expliquer précisément ce que tu cherches à faire avec offsetLeft et offsetTop ? Selon moi, tu n'en as pas besoin, mais j'ai peut-être mal compris tes objectifs.

    À propos de ceci :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    // … mais avec 2452 et 3678 par exemple le point ne s'affiche pas dans le champs canvas
    Dans un de tes posts précédents tu disais que les dimensions de ton canevas étaient 1263×1785. Si tu dessines un point en dehors du canevas, c'est normal qu'il ne soit pas visible. Imagine que tu es un peintre et que le canevas est une toile blanche : si tu peins en dehors de la toile, bah ça marche pas

    Quant à ton point que tu veux placer au centre du canevas, il te suffit de réutiliser tes variables centreX et centreY. Sans oublier d'ajouter l'amélioration suggérée par progdebutant :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    ctx.fillRect(centreX-50, centreY-50, 100, 100);
    Prends une feuille et un stylo, et fais des schémas. Ça aide vraiment, je t'assure. Essaye !
    La FAQ JavaScript – Les cours JavaScript
    Touche F12 = la console → l’outil indispensable pour développer en JavaScript !

  18. #18
    Futur Membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    Septembre 2014
    Messages
    25
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Côte d'Ivoire

    Informations professionnelles :
    Activité : Étudiant
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Septembre 2014
    Messages : 25
    Points : 6
    Points
    6
    Par défaut
    j'ai fait une illustration pour que tu me comprenne mon problème
    imaginons que le point se situe sur la partie orange(c'est ta dire la partie non visible) comme ça
    Nom : illustre.png
Affichages : 332
Taille : 283,9 Ko
    j’aimerai que l'image se deplace de sorte àvoir un affichage centré du point sur le canvas comme ceux-ci:
    Nom : Sans titre-1.jpg
Affichages : 340
Taille : 62,2 Ko
    j'espere que je pu être claire maintenant

  19. #19
    Expert éminent
    Avatar de Watilin
    Homme Profil pro
    En recherche d'emploi
    Inscrit en
    Juin 2010
    Messages
    3 093
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 35
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : En recherche d'emploi

    Informations forums :
    Inscription : Juin 2010
    Messages : 3 093
    Points : 6 754
    Points
    6 754
    Par défaut
    Non du coup, là je ne comprends plus :/ Ton point n'est-il pas censé être toujours au centre de ton canevas ?

    As-tu essayé mon instruction ctx.fillRect(centreX-50, centreY-50, 100, 100); ?
    La FAQ JavaScript – Les cours JavaScript
    Touche F12 = la console → l’outil indispensable pour développer en JavaScript !

  20. #20
    Futur Membre du Club
    Homme Profil pro
    Étudiant
    Inscrit en
    Septembre 2014
    Messages
    25
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Côte d'Ivoire

    Informations professionnelles :
    Activité : Étudiant
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Septembre 2014
    Messages : 25
    Points : 6
    Points
    6
    Par défaut
    si le carré rouge represente mon point, la partie orange est normalement opaque et le bleu represente le canvas. on suppose que je saisisse les coordonnés de mon point rouge qui doit se situer dans la partie orange qui est normalement opaque et lorsque je clique sur submit la carte se deplace de sorte a placé le point au centre du carré bleu(c'est a dire le canvas).

Discussions similaires

  1. déplacement d'une image entre 2 points
    Par roulian46 dans le forum Interfaces Graphiques en Java
    Réponses: 5
    Dernier message: 09/12/2010, 00h50
  2. Centrer une image et un texte dans un div
    Par flexx dans le forum Balisage (X)HTML et validation W3C
    Réponses: 2
    Dernier message: 17/01/2006, 21h11
  3. [javascript] Alt n'affiche rien lors du survol d'une image
    Par LE NEINDRE dans le forum Général JavaScript
    Réponses: 8
    Dernier message: 26/12/2005, 18h56
  4. [VB.NET] Déplacement d'une image
    Par ludovic85 dans le forum Windows Forms
    Réponses: 3
    Dernier message: 01/02/2005, 13h07
  5. [TForm] Problème lors du déplacement d'une fenêtre sans barre de titre
    Par Benjamin GAGNEUX dans le forum Composants VCL
    Réponses: 3
    Dernier message: 14/10/2004, 18h10

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