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:

---

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 ?

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:

---

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.

Merci c'est vrai c'est une erreur de recopie
voici

Code:

---

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

Salut ;)

Et comme ça, ça marcherait ?

Code:

---

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)

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:

---

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

Je vois plusieurs problèmes dans ton dernier code :

:arrow: 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);.

:arrow: 2. Ces trois instructions fonctionnent ensemble :

Code:

---

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.

:arrow: 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.

:arrow: 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.

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.

merci pour cet éclairage j'ai fais comme ça mais ça ne marche pas

Code:

---

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

Ok, on va voir en détail les endroits où ça déconne.

Code:

---

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:

---

1 2	var pointAlat = undefined; var pointAlng = undefined;

---

Ensuite on arrive à ces instructions :

Code:

---

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:

---

1 2	pointAlat = pointAlat - conteneur.offsetLeft; pointAlng = pointAlng - conteneur.offsetTop;

---

Si on remplace les valeurs par ce qu'on connaît, ça donne :

Code:

---

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:

---

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:

---

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:

---

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);

---

Et puis il y a aussi ça dans ton code :

Code:

---

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:

---

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.

ok je vois j'ai foire en mettant x et y ça devrait être pointAlat et pointAlng

Code:

---

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:

---

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

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 :
Pièce jointe 201667
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:

---

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.

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

Je peux voir ton code ?

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

voici le code

Code:

---

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

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:

---

// … 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 :aie:

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:

---

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 ! ;)

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
Pièce jointe 201945
j’aimerai que l'image se deplace de sorte àvoir un affichage centré du point sur le canvas comme ceux-ci:
Pièce jointe 201944
j'espere que je pu être claire maintenant

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); ?

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).