Discussion :

[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

[aboucool54]

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 :

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

[Watilin]

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.

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

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.

[aboucool54]

je me suis trompe en mettant conteneur.offsetTop et conteneur.offsetLeft. mais malgré tout ça ne passe passe 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
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

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

Sélectionner tout - Visualiser dans une fenêtre à part

console.log(visuel);

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

[aboucool54]

ok voici mon code entier

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

[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 PHP :

Sélectionner tout - Visualiser dans une fenêtre à part

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

[aboucool54]

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

[Watilin]

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

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

[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

[Watilin]

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

1. soit tu décides que toutes les animations ont la même durée (par exemple elles durent toutes 1 seconde),
2. 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

[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

[aboucool54]

Salut Watilin j'espere que vous n'alléz pas m'abandonné maintenant

[aboucool54]

Salut Watilin j'espere que vous n'allez pas m'abandonné maintenant

[Watilin]

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


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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

OI = OM - G

Exprimé en code JavaScript, ça donne :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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.



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

Sélectionner tout - Visualiser dans une fenêtre à part

D = GA - GP

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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.



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.


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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
Mt = MA + fraction * D
It = IA + 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 :

Sélectionner tout - Visualiser dans une fenêtre à part

MA = MB - D

Et donc :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

Mt = MB - D + fraction * D

Ce qui peut se simplifier :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

Mt = MB + 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 :

Sélectionner tout - Visualiser dans une fenêtre à part

It = Mt - G

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

Sélectionner tout - Visualiser dans une fenêtre à part

ctx.save()

apres

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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