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

Version imprimable

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 ?

13/02/2016, 15h09
Watilin
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

20/02/2016, 23h10
Watilin
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.
21/02/2016, 07h57
progdebutant

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

22/02/2016, 15h22
Watilin
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);
22/02/2016, 22h45
progdebutant

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

1 pièce(s) jointe(s)

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.

24/02/2016, 18h24
aboucool54

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
24/02/2016, 19h41
Watilin

Je peux voir ton code ?
25/02/2016, 10h55
aboucool54

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

25/02/2016, 16h02
Watilin

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 ! ;)
25/02/2016, 17h41
aboucool54

2 pièce(s) jointe(s)

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
25/02/2016, 18h41
Watilin

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); ?
26/02/2016, 09h15
aboucool54

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).
26/02/2016, 14h57
Watilin

Quand tu dis « la carte se déplace » tu veux que ce soit animé ?

Dans un premier temps, essaye de faire en sorte que ça marche sans animation, avec le point au centre du canevas et les bonnes coordonnées. Normalement tu as toutes les pièces pour compléter le puzzle.

Reviens poster ta progression sur ce fil, si tu y arrives ou pas, et surtout donne des détails. Si on ne sait pas où tu en es, on aura du mal à t'aider ;)

Excusez moi pour ce temps mis j'avais un problème de connexion bon bref
Oui je crois que j'ai tous les pièces pour compléter le puzzle mais le problème est je ne sais pas pourquoi la carte ne se deplace pas la ou il faut pour que le point soit centré
voici une fois de plus le code

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 
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(centreX-50,centreY-50,100,100);//dessin du point qui doit être au milieu de l'image redessiner
         e.preventDefault();
     }
var visuel= document.getElementById("visualiser"); //le bouton submit du formulaire
visuel.addEventListener('click',pointDisplay,false);

29/02/2016, 14h47
Watilin

Citation:

Envoyé par Watilin

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

Citation:

Envoyé par Watilin

Sur mon dessin j'ai également rajouté offsetLeft et offsetTop pour te montrer qu'ils ne servent à rien dans le calcul.

Citation:

Envoyé par Watilin

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.

je me suis trompe en mettant conteneur.offsetTop et conteneur.offsetLeft. mais malgré tout ça ne passe passe pas
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 function pointDisplay(e){ x=1200;y=1600; var centreX=Math.round(canvas.width/2); var centreY=Math.round(canvas.height/2); var resultat={}; resultat.x=-(x-centreX); resultat.y=-(y-centreY); ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.fillStyle='rgba(23,145,167,0.4)'; ctx.drawImage(gkhead,resultat.x,resultat.y); ctx.fillRect(centreX-50,centreY-50,100,100); alert(centreX+' '+centreY); //ctx.stroke(); e.preventDefault(); } var visuel= document.getElementById("visualiser"); //le bouton submit du formulaire visuel.addEventListener('click',pointDisplay,false);
je ne sais si c'est la fonction drawImage() qui ne marche pas avec ma technique mais je ne comprend finalement rien je suis totalement perdu.
J'espere au moins que vous comprenez ma préoccupation
je suis vraiment cuit

29/02/2016, 18h42
Watilin

C'est peut-être un problème au niveau des variables globales (canvas et ctx). Pourrais-tu me montrer le script entier ?
Sinon, peut-être que ton script s'exécute alors que le DOM n'est pas prêt. Ajoute ceci juste après la déclaration de visuel :

Code:

console.log(visuel);

Bien entendu, n'oublie pas de vérifier les messages de la console.

ok voici mon code entier

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
 
<div id="corps"><div id="tot"> 
<input type="file" id="fichier" title="Charger carte">
<button id="trace" onclick="dessiner();">Dessiner </button>
<input type="button" value="Sauvegarder" onclick="save();" />
<input type="button" value="Effacer" id="delet" onclick="reset(); " />
Couleur : <select id="color" onchange="changeColor(this.options[this.selectedIndex].value);">
<option value="red" selected="selected">Rouge</option>
</select>
<input type="button" id='forme' value='ouvrir' onclick="afficheDroit(this,'gauche')" />
<input type="button" id='exporter' value='Exporter' onclick="exporte()" />
<div id="dec"></div>
</div>
<div id="cont">
    <div id="gauche" draggable="true">
        <h3>Liste des sites <span style="font-size: 20px;cursor: pointer;" onclick="afficheCache(this,'listsite')">+</span></h3>
        <div id="listsite">
         <?php 
include_once('../include.php');
$d=new PDOFactory;
$db=$d->getMysqlConnexion();
$mang=new sitemanager($db);
$resul=$mang->getsitepoints();$j="A";
foreach($resul as $et){
         ?>
             <ul>
                <li><input type="checkbox" class="check" id="check"/>
                    <label for="check"><a><?php print($et['libelle']);?></a></label>
                    <ul>
                       <li><span>Point <?php print($j);?></span><?php print(' '.$et['a'].' ° '.$et['b'].' \' '.$et['c'].' " N '.$et['x'].' ° '.$et['y'].' \' '.$et['z'].' " O');?></li>
                    </ul>
                </li>
            </ul>
<?php $j++; } ?>
        </div>
     <div id="form_coord">
         <h3>Enregistrer un site <span style="font-size: 20px;cursor: pointer;" onclick="afficheCache(this,'formule')">+</span></h3>
         <form id="formule">
              <label for="code">Code succursale </label></br><input type="text" name="code" id="code" value="0000-AAA-AA-SC-YY" readonly />
            <label for="succursale">Succursales </label></br>
            <select  name="succursale" id="succursale"  class="select" required>
			<option value="">====Selectionner une Succursale==== </option>
                <?php $d=new PDOFactory;$db=$d->getMysqlConnexion();$mang=new succursalemanager($db);
                                $suc=$mang->getsuccursales();
                                foreach ($suc as $elt)
                                {print('<option value='.$elt['id'].'>'.$elt['Vilsect'].'</option>');
                                }$mang=new sitemanager($db);$num=$mang->comptersite();?>
		</select>
			<input type="hidden" name="num" id="num" value="<?php printf("%04d", $num['nbre']+1);?>" />
            <br><label for="produits">Liste des produits </label>
            <select  name="produit" id="produits" class="select" required>
			<option>====Selectionner un produit==== </option>
                <?php 
                    $d=new PDOFactory;$db=$d->getMysqlConnexion();$mang=new produitmanager($db);
                                $produit=$mang->getproduits();
                                foreach ($produit as $elt)
                                {print('<option value='.$elt['Refprod'].'>'.$elt['Nomprod'].'</option>');}?>
            </select>
            </br><label for="date">Date de création du site </label><input type="date" name="datecreat" placeholder="Date de création" id="datepicker" required /><label for="description">Description du site d exploitation </label>
            <textarea  placeholder="Description du site" name='description' id="description"></textarea>
            <div id="posform">
            <fieldset><legend>PointA </legend>
                <legend>Coordonnées N-S</legend>
                    <label for="degren"></label> <input type="number" class="coords" name="degren" id="degren" placeholder="Dégré(°)" required />
                    <label for="minuten"></label> <input type="number" class="coords" name="minuten" id="minuten" placeholder="Minute(\')" required />
                    <label for="seconden"></label> <input type="number" class="coords" name="seconden" id="seconden" placeholder="Seconde(\'\')" required />
                <legend>Coordonnées E-O</legend>
                    <label for="degre"></label> <input type="number" class="coords" name="degre" id="degre" placeholder="Dégré(°)" required />
                    <label for="minute"></label> <input type="number" class="coords" name="minute" id="minute" placeholder="Minute(\')" required />
                    <label for="seconde'"></label> <input type="number" class="coords" name="seconde" id="seconde" placeholder="Seconde(\'\')" required />
             </fieldset><br></div> 
<input type="submit" name="enregistrer" id="subm" value="Enregistrer"  /> 
<button id="visual" >Visualiser </button>
<input type="reset" value="Annuler"  /></form>
     </div>   
    </div>
<div id="droit">
    <div id="conteneur">
<div id="regleh"><img src="horiz.png" id="reg1"></div>
<div id="to"><img src="veris.png" id="regh" ></div>
<div id="lignehgauche"></div>
<div id="lignehdroit"></div>
 <div id="lignelgauche"></div>
 <div id="ligneldroit"></div>
<div id="infobule"></div>
<canvas id="mon_canvas" > 
  Texte alternatif pour les navigateurs ne supportant pas Canvas.
</canvas>
</div></div></div>
</div>
<style>
    #formule{display:none;position: relative;}
#corps{display: inline-block;width: 100%;}
textarea{width:80%;height: 100px;border:1px solid lightskyblue;}
#form_coord{height: 500px;position: relative;}
input[type='text'],input[type='date'],.select{width:80%;border:1px solid lightskyblue;}
#canva{background:none;position:absolute; z-index:9;display:inline-block;}
li{list-style-type: none;}
li:hover,li:focus{;background-color: lightgray;}
#listsite{max-height: 350px;width:auto;overflow: scroll;margin-bottom: 20px;display:none;}
input[type='number']{background-color: #271d1d;color:grey;
display:inline-block;width:30%;height:25px;border-radius: 2px;border:1px solid lightblue;}
fieldset{border:none;margin-top: -20px;}
#posform{padding-top: 20px;}
#droit{display:inline-block;width: 73%;}
#gauche{display: none;width:25%;margin-top:0px;overflow: scroll;}
#cont{display: inline-block;width:100%;}
#regleh{display:inline-block; height:25px;}
#regleh{z-index:999; position:absolute;display:inline-block;background:green;}
#to{z-index:999; position:absolute;display:inline-block;background:green;}
#tot{height:5%; width:100%;z-index:99999;}
#conteneur{width:100%; height:97%; position:absolute; margin-left:0px;overflow: hidden;margin-top: 0px;}
#mon_canvas{position:absolute;}
#infobule{position:absolute;display:inline-block;z-index:99999;color:black;}
#lignehdroit,#lignehgauche{position:absolute;background:orange; height:5174px;z-index:999; width:1px;display:inline-block;}
#lignelgauche,#ligneldroit{position:absolute;background:red;width:100%;z-index:999;height:1px; display:inline-block;}
</style>
<script src="dms.js">/* Geodesy representation conversions */</script>
<script type="text/javascript" charset="utf-8">
var verti= document.getElementById("regh"); // règle verticale
var divverti= document.getElementById("to"); // conteneur de la règle vertical
var regleh = document.getElementById("regleh"); // le conteneur de la règle horizontale
var lignehgauche = document.getElementById("lignehgauche");// ligne de répère horizontale gauche
var lignehdroit = document.getElementById("lignehdroit"); // ligne de répère horizontale droite
var lignelgauche = document.getElementById("lignelgauche"); //ligne de répère vertical haut
var ligneldroit = document.getElementById("ligneldroit");//ligne de répère vertical bas
var conteneur = document.getElementById("conteneur"); // le conteneur globale
var canvas = document.getElementsByTagName('canvas')[0];
var infobule = document.getElementById("infobule");
var formule= document.getElementById("forme");
var dec = document.getElementById('dec');
var coords=document.getElementsByClassName('coords');
var valide=document.getElementById('subm');
var code=document.getElementById("code");		
var num=document.getElementById("num").value;		
var produit=document.getElementById("produits");		
var succ=document.getElementById("succursale");
var visual=document.getElementById("visual");
var datecreat=document.getElementById("datepicker");
var exporter=document.getElementById("exporter");
var supprime=document.getElementById("delet");
var droit=document.getElementById("droit");
var anne1="YY";
var adhe="YY";
var ane="YY";
var suc="AAA";
var typ="AA";
var fichier = document.querySelector('#fichier');
function chargement (fiche){
    var imgType=/image.*/;
    if(fiche.type.match(imgType)){
        var reader = new FileReader();
        reader.onlaodend= function (event){
            var myImg= new Image();
            myImg.onload=function(evt){
                canvas.width=evt.target.width;
                canvas.height=evt.target.height;
                ctx.drawImage(evt.target,0,0);
            };
            myImg.src=event.target.result;
        };
    }
    alert(fiche.files[0].name);
}
datecreat.onchange=function(){anne1=new Date(datecreat.value.toString()).getYear()+1900; adhe=anne1.toString().substr(2);code.value=num+"-"+suc+"-"+typ+"-SC-"+adhe;};
    function afficheCache(button,cible){
        var div=document.getElementById(cible);
        if(div.style.display=="inline-block"){
            div.style.display="none";
            button.innerHTML="+";
        }else{
            div.style.display="inline-block";
            button.innerHTML="-";
        }
    }
    function afficheDroit(button,cible){
        var div=document.getElementById(cible);
        if(div.style.display=="inline-block"){
            div.style.display="none";
            conteneur.style.marginTop=0+'px';
            button.value="Ouvrir";
        }else{
            div.style.display="inline-block";
            button.value="Fermer";
            conteneur.style.marginTop=-550+'px';
        }
    }
 
var x,y;
    function pointDisplay(e){
      var pointA=abscisse(coords[0].value,coords[1].value,coords[2].value,coords[3].value,coords[4].value,coords[5].value);//renvoir le x et le y du pointA
        var centreX=Math.round(canvas.width/2);
        var centreY=Math.round(canvas.height/2);
        var resultat={};
           resultat.x=-(pointA[0]-centreX);
           resultat.y=-(pointA[1]-centreY);
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.fillStyle='rgba(23,145,167,0.4)';
        ctx.drawImage(gkhead,-500,-500);
        ctx.fillRect(centreX-50,centreY-50,100,100);
        e.preventDefault();
     }
    //conversion des coordonnées en pixels
    function abscisse(dx,mx,sx,dy,my,sy){
    var fixe1=3848,//point horizontal a partir duquel commence l'espace de localisation
    ecart1=514,//interval considere sur l'horizontal
    ecart2=518,//interval considere sur la vertical
    fixe2=5485,//point vertical a partir duquel commence l'espace de localisation
    X1,minx,secx,miny,secy,X2;
    X2=(fixe2-ecart1*(dx-2));
    X1=(fixe1-ecart2*(dy-2));
    minx=(mx*ecart1)/60;
    secx=(sx*ecart1)/3600;
    miny=(my*ecart2)/60;
    secy=(sy*ecart2)/3600;
    var recY=Math.round(X2-minx-secx);
    var recX=Math.round(X1-miny-secy);
    var point=[recX,recY];
    return point;
    }
    valide.addEventListener('click',function(e){
                var xhr = new XMLHttpRequest();
                var formulaire = document.getElementById("formule"),
                form = new FormData(formulaire);
                xhr.open('post','site_trait.php',true);
                xhr.onreadystatechange = function()
                {
                    if(xhr.readyState == 4) alert(xhr.responseText);
                };
                 xhr.send(form);
           e.preventDefault();
    },false);
var END_CLICK_RADIUS = 5;
	//le nombre maximun de point
	var MAX_POINTS = 2;
	var points = null;
	var hori= document.getElementById("reg1"); // règle horizontale
	var zoomlevel=1;
	var coeff=1,x,x1,y,y1;var factor=1;
	var gkhead = new Image;
	var ball   = new Image;
	var ctx ;gkhead.src = 'cadastre.jpg';
        gkhead.onload = function(){	
	coeff=(conteneur.offsetWidth/gkhead.width);
	canvas.width =gkhead.width*coeff ; 
	canvas.height = gkhead.height*coeff;
        hori.style.width=gkhead.width*coeff;
		regleh.style.width=gkhead.width*coeff;
		divverti.style.height=gkhead.height*coeff;
		verti.style.height=gkhead.height*coeff;
		regleh.style.paddingLeft=253*coeff;
		divverti.style.paddingTop=310*coeff;
		ctx= canvas.getContext('2d');
		trackTransforms(ctx);//pointDisplay();
		function redraw(){
		//gestion de la regleh
		// nettoyage entier du canvas
			var p1 = ctx.transformedPoint(0,0);
			var p2 = ctx.transformedPoint(canvas.width,canvas.height);
			ctx.clearRect(p1.x,p1.y,p2.x-p1.x,p2.y-p1.y);
			// affichage des points depuis la base de données 
                        ctx.drawImage(gkhead,0,0);
                        <?php                   
                        $a='';$b='';$c='';$x='';$y='';$z='';$i=0;
                        foreach($resul as $et){$a=$et['a'];$b=$et['b'];$c=$et['c'];$x=$et['x'];$y=$et['y'];$z=$et['z'];?>
                        //for(var i=0;i<4;i++){
                        var pointAlat=abscisse(<?php print($a);?>,<?php print($b);?>,<?php print($c);?>,<?php print($x);?>,<?php print($y);?>,<?php print($z);?>);
 
                    <?php }?>
                    }
		redraw();
		var lastX=canvas.width/2, lastY=canvas.height/2;
		var dragStart,dragged;
		canvas.addEventListener('mousedown',function(evt){
			document.body.style.mozUserSelect = document.body.style.webkitUserSelect = document.body.style.userSelect = 'none';
			lastX = evt.offsetX || (evt.pageX - canvas.offsetLeft);
			lastY = evt.offsetY || (evt.pageY - canvas.offsetTop);
			dragStart = ctx.transformedPoint(lastX,lastY);
			dragged = false;
		},false);
		canvas.addEventListener('mousemove',function(evt){
			lastX = evt.offsetX || (evt.pageX - canvas.offsetLeft);
			lastY = evt.offsetY || (evt.pageY - canvas.offsetTop);
			dragged = true;
			if (dragStart){
				var pt = ctx.transformedPoint(lastX,lastY);
				ctx.translate(pt.x-dragStart.x,pt.y-dragStart.y);
				redraw();
			}
		},false);
		canvas.addEventListener('mouseup',function(evt){
			dragStart = null;
			if (!dragged) zoom(evt.shiftKey ? -1 : 1 );
		},false);
		var scaleFactor = 1.1;
		var zoom = function(clicks){
			var pt = ctx.transformedPoint(lastX,lastY);
			ctx.translate(pt.x,pt.y);
                        factor = Math.pow(scaleFactor,clicks);
			ctx.scale(factor,factor);//console.log(factor);
			ctx.translate(-pt.x,-pt.y);//pointDisplay();
			redraw();positioncurseur();
                        if(supprime.onclick){
                                //pointDisplay();
                            }
		};
		var handleScroll = function(evt){
			var delta = evt.wheelDelta ? evt.wheelDelta/40 : evt.detail ? -evt.detail : 0;
			if (delta) zoom(delta);
			return evt.preventDefault() && false;
		};
		canvas.addEventListener('DOMMouseScroll',handleScroll,false);
		canvas.addEventListener('mousewheel',handleScroll,false);
	};
        visual.addEventListener('click',pointDisplay,false);
	function trackTransforms(ctx){
		var svg = document.createElementNS("http://www.w3.org/2000/svg",'svg');
		var xform = svg.createSVGMatrix();
		ctx.getTransform = function(){ return xform; };
		var savedTransforms = [];
		var save = ctx.save;
		ctx.save = function(){
			savedTransforms.push(xform.translate(0,0));
			return save.call(ctx);
		};
		var restore = ctx.restore;
		ctx.restore = function(){
			xform = savedTransforms.pop();
			return restore.call(ctx);
		};
		var scale = ctx.scale;
		ctx.scale = function(sx,sy){
			xform = xform.scaleNonUniform(sx,sy);
			return scale.call(ctx,sx,sy);
		};
		var rotate = ctx.rotate;
		ctx.rotate = function(radians){
			xform = xform.rotate(radians*180/Math.PI);
			return rotate.call(ctx,radians);
		};
		var translate = ctx.translate;
		ctx.translate = function(dx,dy){
			xform = xform.translate(dx,dy);
			return translate.call(ctx,dx,dy);
		};
		var transform = ctx.transform;
		ctx.transform = function(a,b,c,d,e,f){
			var m2 = svg.createSVGMatrix();
			m2.a=a; m2.b=b; m2.c=c; m2.d=d; m2.e=e; m2.f=f;
			xform = xform.multiply(m2);
			return transform.call(ctx,a,b,c,d,e,f);
		};
		var setTransform = ctx.setTransform;
		ctx.setTransform = function(a,b,c,d,e,f){
			xform.a = a;
			xform.b = b;
			xform.c = c;
			xform.d = d;
			xform.e = e;
			xform.f = f;
			return setTransform.call(ctx,a,b,c,d,e,f);
		};
		var pt  = svg.createSVGPoint();
		ctx.transformedPoint = function(x,y){
			pt.x=x; pt.y=y;
			return pt.matrixTransform(xform.inverse());
		};
	}
 //le repêre associer à la souris  
function ligne(){
positioncurseur();
lignehgauche.style.height=y-3;//-conteneur.offsetTop;
lignehdroit.style.height=conteneur.offsetHeight-y;
lignelgauche.style.width=x-3;//conteneur.offsetLeft-2;
ligneldroit.style.width=conteneur.offsetWidth-x;
lignehgauche.style.left=x;
lignehdroit.style.left=x;
lignehdroit.style.background="blue";
lignehdroit.style.top=y+3;
lignelgauche.style.top=y;
ligneldroit.style.top=y;
ligneldroit.style.left=x+3;
}
//exportation de l'image(de la carte)
function exporte(){
                var dataurl=canvas.toDataURL('image/jpeg',1);
                window.location=dataurl;
            }
// obtention de la position de la souris
function getMousePos(canvas, evt) {
        var rect = canvas.getBoundingClientRect();
        return {x: evt.clientX - rect.left,y: evt.clientY - rect.top};
      }
canvas.onmousemove=function(e){
ligne();
var pos=getMousePos(canvas,e);   
infobule.style.left= x+20;
infobule.style.top= y+20;
x1=(x1/coeff)*7;
y1=(y1/coeff)*7; 
infobule.innerHTML="Longitude: "+x1+ " latitude: "+y1+ "</br> x: "+pos.x+ " y: "+pos.y;
};
lignehdroit.onclick=canvas.onclick;
lignehdroit.onmousemove=canvas.onmousemove;
lignehgauche.onmousemove=canvas.onmousemove;
ligneldroit.onmousemove=canvas.onmousemove;
lignelgauche.onmousemove=canvas.onmousemove;
function positioncurseur(){
var ie = false; /*@cc_on ie = true; @*/
if (ie) {
                x=event.x+document.body.scrollLeft-conteneur.offsetLeft;//-Math.round(1*coeff);
                x1=(gkhead.width-(x-gkhead.offsetLeft))*zoomlevel;//-Math.round(255*coeff));
                y=event.y+document.body.scrollTop-conteneur.offsetTop;//-Math.round(1*coeff);
                y1=(gkhead.height-(y-gkhead.offsetTop))*zoomlevel;//-Math.round(310*coeff));
            } else {
                x=event.pageX-conteneur.offsetLeft;//-Math.round(1*coeff);
                x1=(canvas.width-(128*coeff)-(x-canvas.offsetLeft));
                y=event.pageY-conteneur.offsetTop;//-Math.round(1*coeff);
                y1=(canvas.height-(133*coeff)-(y-canvas.offsetTop));//-Math.round(310*coeff));
            }
}
//fonction pour dessiner un trait qui servira a calculer la distance
var etattraceur=false;
function dessiner(){
canvas.addEventListener("click", function(e) {
		//var x = e.clientX-canvas.offsetLeft;
		//var y = e.clientY-canvas.offsetTop;
                positioncurseur();
		if(etattraceur==true) {
			//drawing the next line, and closing the polygon if needed
			if(Math.abs(x*factor - points[0].x) < END_CLICK_RADIUS && Math.abs(y*factor - points[0].y) < END_CLICK_RADIUS) {
				etattraceur = false;
			} else {
				points[points.length] = new Point(x*factor, y*factor);
				if(points.length >= MAX_POINTS) {
					etattraceur = false;
				}
			}
		} else if(points == null) {
			//opening the polygon
			points = new Array();
			points[0] = new Point(x*factor, y*factor);
			etattraceur = true;
		}
	}, false);
canvas.addEventListener("mousemove", function(e) {
		mouseX = e.clientX - canvas.offsetLeft;
		mouseY = e.clientY - canvas.offsetTop;
	}, false);
	//refresh time
	setInterval("draw();", 100);
 }
 
 function draw() {
		ctx.clearRect(0, 0, canvas.width, canvas.height);
                ctx.drawImage(gkhead,0,0);
		ctx.beginPath();
		if(points != null && points.length > 0) {
			ctx.moveTo(points[0].x, points[0].y);
			for(i = 1 ; i < points.length ; i++) {
				ctx.lineTo(points[i].x, points[i].y);
			}
			if(etattraceur) {
				ctx.lineTo(x*factor, y*factor);
			} else {
				ctx.lineTo(points[0].x, points[0].y);
			}
		}
		ctx.stroke();
	}
	//object representing a point
	function Point(x, y) {
		this.x = x;
		this.y = y;
	}
	//resets the application
	function reset() {
		etattraceur = false;
		points = null;
                ctx.clearRect(0,0,canvas.width,canvas.height);
                ctx.drawImage(gkhead,0,0);
                redraw();
	}
	//changes the color of the draw
        function changeColor(color) {
	ctx.strokeStyle = color;
}
 
	function save() {
		if(points == null) {
			alert("Rien a sauvegarder !");
		} else {
			var s = "";
			for(var a in points) {
				s += "(" + points[a].x + "," + (Canvas.height - points[a].y) + ")\n";
			}
 
		}
	}
</script>
</body></html>

c'est pas très propre mais c'est le code complet qui est la avec des modifications

02/03/2016, 01h00
Watilin
Il va falloir que tu sois un peu plus actif dans ta recherche de solution. Ton code est bien plus complexe que ce que j'imaginais, et il y a de nombreux endroits où ça peut partir en cacahuète. Commence par désactiver tout ce qui n'est pas directement en rapport avec le problème dont tu as parlé ici ; je te conseille carrément de refaire une petite page HTML à côté où tu essayerais uniquement de faire marcher ce point précis. C'est ce que j'ai fait de mon côté, et je te montrerai mon code si tu n'y arrives vraiment pas.

En attendant, je ne peux que t'encourager une fois de plus à travailler avec la console, et à placer des console.log et des throw de manière intelligente. Tu peux aussi utiliser le débogueur.

Évite de mélanger PHP et JS, c'est très rarement une bonne idée. Un bon code est un code facile à relire, et deux langages qui se mélangent, c'est la pire situation question lisibilité. Si tu as des données à extraire d'une base de données, je te conseille de les transmettre par une autre URL (avec donc un script PHP consacré uniquement à ça), de préférence au format JSON :
Code:

1 2 3 4 5 6 <?php header('Content-Type: application/json; charset=utf-8'); ... $resul = $mang->getsitepoints(); echo json_encode($resul);
Et récupérer ces données avec une requête Ajax, puis les interpréter avec JSON.parse.

Mais pour l'instant, oublie le PHP, contente-toi de faire marcher ta version HTML simplifiée ;)
03/03/2016, 09h44
aboucool54

Watilin j'ai essayé de faire comme vous l'avez dit mais vraiment je n'y comprend rien ça ne marche toujours pas

Je suis à court de patience avec toi. Tes réponses ne rendent pas compte de ta progression, on pourrait avoir l'impression que tu n'essayes pas et que tu attends que la solution te tombe tout cuit dans le bec. J'espère que c'est juste une impression.

Se contenter de dire « ça ne marche pas », ça ne fait pas avancer les choses. J'ai essayé de te le faire comprendre subtilement, mais après une page entière de conversation on en est toujours au même point.

Je vais te donner mon code parce que je ne vois plus d'autre moyen de t'aider ; si ça ne t'aide pas, je ne pourrai rien faire de plus.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8" />
  <title>Centrer point canvas</title>
  <style>
 
  canvas { outline: dashed thin blue; }
 
  </style>
</head>
<body>
 
<canvas width="600" height="400"></canvas>
<p>
  <label>Longitude <input type="number" id="lng" value="300" /></label>
  <label>Latitude  <input type="number" id="lat" value="200" /></label>
</p>
 
<script> 'use strict';
 
 
var $img = new Image(),
  $canvas = document.querySelector('canvas'),
  $lng = document.querySelector('#lng'),
  $lat = document.querySelector('#lat'),
  cx = $canvas.getContext('2d');
 
function drawCanvas(lng, lat) {
  cx.clearRect(0, 0, $canvas.width, $canvas.height);
 
  // calcul des coordonnées du centre
  var centre = {
    x: Math.round($canvas.width / 2),
    y: Math.round($canvas.height / 2)
  };
 
  // calcul du coin supérieur gauche de l'image
  var image = {
    x: -lng + centre.x,
    y: -lat + centre.y,
  };
 
  // dessin de l'image
  cx.drawImage($img, image.x, image.y);
 
  // dessin du « point » central
  cx.fillStyle = 'red';
  cx.fillRect(centre.x - 10, centre.y - 10, 20, 20);
}
 
$img.onload = function () {
  console.log('image chargée !');
  var coordsChange = function () {
    drawCanvas($lng.value, $lat.value);
  };
 
  $lng.onchange = coordsChange;
  $lat.onchange = coordsChange;
 
  coordsChange();
};
 
$img.onerror = function () {
  alert('erreur du chargement de l’image :x');
};
 
$img.src = 'https://spacefiction.files.wordpress.com/2012/10/ouest_terre_du_milieu.jpg';
 
</script>
 
</body>
</html>

07/03/2016, 12h31
aboucool54

salut watilin je crois que tu ne pas toujours pas compris
je cmprend ton code mais c'est pas ce que je veux
voila ma carte comporte des coordonnés donc lorsque je saisie les coordonnés d'un point, ce point doit se situer d'abord à la coordonné qu'il faut et en suite la carte doit être redessiné de sorte le point qui est sur cette carte soit centré sur le canvas(c'est a dire la partie visible)
Je donne l'impression de ne pas chercher pourtant je cherche et je commence a me découragé car il me semble que c'est plus possible
vraiment aider moi je commence vraiment à desespérer

Donc en fait tu veux que ça soit animé. Je t'avais posé la question mais tu n'as pas répondu.

Ne désespère pas, ce que tu veux faire est possible. Pour animer un mouvement il faut que tu dessines chaque étape du mouvement, frame par frame. Les navigateurs modernes fournissent la fonction requestAnimationFrame qui fonctionne à peu près de la même manière que setTimeout.
Code:

1 2 3 4 5 6 7 8 9 10 11 function frameLoop(time) { if (/* animation pas finie */) { // planifie l'affichage de la prochaine frame requestAnimationFrame(frameLoop); } // … calculs de valeurs en fonction de time // appel de la fonction de dessin avec les valeurs calculées pointDisplay(…); }
Ton mouvement va d'un instant A, où la carte est dans sa position de départ, à un instant B, où ton marqueur est au milieu du canevas. Pour décomposer le mouvement entre ces instants A et B, il faut commencer par choisir une vitesse (et éventuellement, une fonction d'easing, mais tu peux garder ça pour plus tard). Et pour choisir une vitesse, tu as deux options :

soit tu décides que toutes les animations ont la même durée (par exemple elles durent toutes 1 seconde),
soit tu choisis une vitesse fixe.

Le choix 2 est plus facile, mais l'animation sera plus longue sur les grands mouvements.

Une fois que tu as ta vitesse, tu peux calculer les coordonnées dont tu as besoin pour dessiner la frame, en te servant de la valeur de time que ta fonction frameLoop reçoit en paramètre (grâce à requestAnimationFrame). Ce même paramètre time te servira à déterminer si l'animation est finie ou pas.

Tu as, en gros, deux paires de coordonnées à calculer : celles de ton marqueur, disons le point M, et celles de ton image, point I. À l'instant A, ton script doit avoir en mémoire les anciennes coordonnées (appelons-les oldLng et oldLat), car elles servent de point de départ au mouvement. Comme tes points I et M se déplacent ensemble, tu peux utiliser le même vecteur, et ce vecteur c'est (oldLng - lng) ; (oldLat - lat). Ne te reste plus qu'à le mutiplier par une valeur calculée à partir de time (ou pas, ça dépend comment tu as choisi de calculer la vitesse d'animation) et à trouver les formules pour en tirer les coordonnées de I et M.

Je vais te laisser chercher un peu. Bon courage ;)

08/03/2016, 09h43
aboucool54

merci encore Monsieur vous êtes vraiment gentile avec moi mais il me semble que vous ne m'avez pas bien compris ou je ne suis pas claire dans mes explication.
Bon voila, ce que je veux faire c'est comme google maps supposons que votre carte google maps est centré sur la france et que je saisie des coordonnées d'un point A (avec pointAlat et pointAlng) se situant en afrique(au sahara par exemple), la carte vas se déplacer de sorte a ce que cette partie de l'Afrique avec le point A soit visible au centre de notre cadre comme sur ce site http://www.coordonnees-gps.fr/, c'est exactement le même fonctionnement que je veux faire avec canvas
J'espère que vous me comprenez maintenant.pour l'animation j'ai deja jeté un oeil dessus et je crois que je pourrai m'en sortir
09/03/2016, 16h33
aboucool54

Salut Watilin j'espere que vous n'alléz pas m'abandonné maintenant
09/03/2016, 16h45
aboucool54

Salut Watilin j'espere que vous n'allez pas m'abandonné maintenant
14/03/2016, 22h52
Watilin

4 pièce(s) jointe(s)
Bon alors dans mon précédent post je t'avais dit que tu allais avoir besoin des informations de l'état précédent, avant de commencer à faire le déplacement. Décomposons donc le processus en trois instants : l'instant P (P comme « précédent »), l'instant A (début du mouvement) et l'instant B (fin du mouvement).

Pièce jointe 203909
Comme dans mon dessin de la page 1, le point O correspond à l'origine du canevas, son coin supérieur gauche. C'est à cet endroit qu'apparaîtrait une forme si tu choisissais de la dessiner avec les coordonnées (0 ; 0). Tous les vecteurs partant de O te donnent les coordonnées d'un point dans le repère du canevas, par exemple le vecteur OM te donne les coordonnées du point M qui représente ton marqueur ; ses coordonnées correspondent au centre du canevas (canvas.width/2 ; canvas.height/2). Si tu as eu à peu près les mêmes cours de maths que moi au collège, tu connais tout ça.

Dans la même logique, le point I est le coin supérieur gauche de l'image dans le repère du canevas. Ce sont les coordonnées de ce point que tu passes à drawImage.

On a également le vecteur G (que j'aurais pu appeler IM) qui donne la distance entre I et M. Autrement dit, c'est les coordonnées du point M dans le repère de ta carte. Ce vecteur correspond aux coordonnées géographiques (longitude, latitude) de ton application, c'est pourquoi je l'ai appelé G.

Une chose importante à noter c'est la relation entre ces trois vecteurs :

Code:

G = OM - OI

Cette relation est toujours vraie. On va s'en servir pour recalculer les coordonnées de I à chaque frame de l'animation, pour les passer à drawImage.
En la retravaillant un (tout petit) peu, on obtient :

Code:

OI = OM - G

Exprimé en code JavaScript, ça donne :
Code:

1 2 image.x = marker.x - lng; image.y = marker.y - lat;
Durant l'animation, les coordonnées de M seront constamment mises à jour mais lng et lat ne changeront pas. J'y reviendrai plus tard.

Pièce jointe 203911
À l'instant A, l'animation commence, mais il s'est passé plusieurs choses avant :
- l'utilisateur a saisi de nouvelles coordonnées géographiques, il a donc modifié le vecteur G ;
- on a déplacé le point M pour le positionner aux nouvelles coordonnées ; il n'est donc plus au centre du canevas.
C'est à cet instant que tu dois calculer toutes les valeurs relatives à ton animation (vitesse, etc.) dont je t'ai parlé dans mon post précédent, pour remonter la flèche pointillée rouge (je vais l'appeler D comme « déplacement ») en sens inverse. Et c'est ici que tu as besoin d'utiliser les anciennes valeurs de G à l'instant P, car les coordonnées de D sont simplement :

Code:

D = G_A - G_P

Tu les reconnais les coordonnées (oldLng - lng) ; (oldLat - lat) dont je t'ai déjà parlé ? ;)
Code:

1 2 3 4 var displacement = { x: oldLng - lng, y: oldLat - lat };
Tu peux aussi mémoriser I_A, les coordonnées de I à l'instant A, c'est légèrement redondant mais tu trouveras peut-être que ça rend les calculs un peu plus simples.

Pièce jointe 203910
Là normalement tu remarques un truc dont je t'ai déjà parlé : on utilise le même vecteur (D) pour déplacer les points M et I. Note aussi que le vecteur G n'a pas changé.

Les pointillés bleus, je les ai mis juste pour qu'on voie l'ancienne position de l'image, mais ils n'interviennent pas dans les calculs.

En fait, à chaque frame, on va faire légèrement avancer les points M et I le long du vecteur D. En termes un peu plus formels, à chaque instant t entre A et B, il va falloir calculer les coordonnées de M_t et I_t.

Pièce jointe 203908
Concrètement, tu dois calculer un multiplicateur, une fraction entre 0 et 1, à partir de ta vitesse d'animation et du paramètre time que tu reçois. Puis tu multiplies D par cette fraction :
Code:

1 2 M_t = M_A + fraction * D I_t = I_A + fraction * D
Comme d'habitude en géométrie, il faut bien identifier quelles données sont connues et lesquelles on a besoin de calculer. Par exemple, M_B est connu : c'est le centre du canevas. En revanche, on ne connaît pas immédiatement M_A, mais en regardant les dessins on trouve facilement que :

Code:

M_A = M_B - D

Et donc :

Code:

M_t = M_B - D + fraction * D

Ce qui peut se simplifier :

Code:

M_t = M_B + D * (fraction - 1)

Maintenant, reprends la relation dont j'ai parlé plus haut : OI = OM - G, qu'on peut écrire plus simplement I = M - G. Comme je l'ai dit, le vecteur G ne change pas dans le temps. Cette relation étant toujours vraie, on peut l'appliquer à l'instant t :

Code:

I_t = M_t - G

Et comme on a calculé M_t juste avant, on a tout ce qu'il faut !
Code:

1 2 3 4 5 marker.x = center.x + displacement.x * (fraction - 1); marker.y = center.y + displacement.y * (fraction - 1); image.x = marker.x - lng; image.y = marker.y - lat;
Et voilà. Ces formules je les ai testées, je sais qu'elles marchent. Bien sûr je n'ai pas donné tous les détails, mais tu as suffisamment de pièces du puzzle et tu devrais réussir à les assembler. Je te laisse chercher ;)
17/03/2016, 16h24
aboucool54

monsieur Watilin je ne sais comment vous remercier pour ce service. merci pour cette demonstration. mais le probleme n'est pas la pour le moment j'ai détecté le probleme qui fais le carré ne s'affiche pas lors du déplacement de la carte. Le probleme est que la carte redessine(deplace) sans le point, j'ai essayé un

Code:

ctx.save()

apres

Code:

ctx.fillRect(pointAlat[0]-10,pointAlat[1]-10,100,100);

histoire d'enregistré la carte avant de redessine a la position souhaiter afin d'afficher le point au centre du canvas.

concernant l'animation je veux faire celui de google maps avec canvas c'est exactement ça que je veux

excusé moi du retard seulement que j'avais pas connexion merci encore
17/03/2016, 18h46
Watilin

Le problème c'est que là comme ça je ne peux pas dire où ça cloche. Assure-toi que le marqueur est bien dessiné après la carte dans ta fonction de dessin. Je te demanderais bien de me montrer tout de code, mais ce n'est pas une solution non plus. As-tu essayé de faire une page de test avec le moins de code possible, comme je te l'avais conseillé ?

Note : la méthode save ne sert pas à sauvegarder l'image, mais à sauvegarder l'état du contexte (couleur, épaisseur du trait, transformations du point d'origine, etc.) et s'utilise conjointement avec restore. Avec les formules que je t'ai données, tu n'as pas besoin de déplacer le point d'origine, donc a priori tu n'as pas besoin d'utiliser save et restore.