Discussion :

[aboucool54]

Salut,

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

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function pointDisplay(coordX,coordY){
        //coordX et coordY representent les coordonnées du point à afficher sur la carte
        ctx.drawImage(gkhead,0,0);
 ctx.save();
        ctx.lineWidth = 2;
        ctx.fillRect(coordX,coordY);
       var centreX=Math.round(canvas.width/2);
       var centreY=Math.round(canvas.height/2);
       var col=-(coordX-centreX);<br>       
       var lig=-(coordY-centreY);<br>    
      ctx.drawImage(gkhead,col,lig);
       ctx.fillRect(coordX,coordY,30,30);<br>    
    ctx.fillStyle='rgba(23,145,167,0.4)';
        ctx.fill();

Mais je n'arrive pas à faire afficher le point au centre du canvas comme dans google maps.
Pourriez-vous m'aider ?

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

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

ctx.fillRect(coordX,coordY);

mais c'est peut-être juste une erreur de recopie. Ensuite,

• tu appelles deux fois drawImage, je pense que la première est inutile ;
• il y a cet appel à ctx.fill() qui dépend d'un chemin (path) pour fonctionner, mais je ne vois pas de ctx.beginPath() dans ton extrait de code ;
• ce ctx.save() me laisse supposer que tu utilises translate ou scale à un autre endroit – si c'est le cas et si tu n'utilises pas ctx.restore() correctement, ton point de référence ne sera plus au bon endroit et tout va partir en chips.

[aboucool54]

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

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function pointDisplay(e,coordx,coordy,x,y){
        ctx.beginPath();
        ctx.lineWidth = 2;
         x-=canvas.offsetLeft;//<span style="font-size:14px;">c'est la coordonnée x de début du canvas de vision</span>
         y-=canvas.offsetTop;//<span style="font-size:14px;">c'est la coordonnée Y de début du canvas de vision</span>
        var centreX=Math.round(canvas.width/2)+canvas.offsetLeft;
        var centreY=Math.round(canvas.height/2)+canvas.offsetTop;
        var resultat={};
           resultat.x=-(coordx-centreX);
           resultat.y=-(coordy-centreY);
        var result=convert(1000,1000);
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.drawImage(gkhead,result.x,result.y);
        ctx.fillRect(result.x,result.y,30,30);
        alert(canvas.offsetLeft+' '+canvas.offsetTop);//ça me retour 0,0
        ctx.fillStyle='rgba(23,145,167,0.4)';
        ctx.fill();
        ctx.stroke();

je vous en prie aidez moi

[progdebutant]

Salut

Et comme ça, ça marcherait ?

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
function pointDisplay(e,coordx,coordy,x,y){
        ctx.beginPath();
        ctx.lineWidth = 2;
        var centreX=Math.round(canvas.width/2)+canvas.offsetLeft;
        var centreY=Math.round(canvas.height/2)+canvas.offsetTop;
        var resultat={};
        resultat.x=-(coordx-centreX);
        resultat.y=-(coordy-centreY);
        var result=convert(1000,1000);
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.drawImage(gkhead,resultat.x,resultat.y);
        ctx.fillRect(resultat.x,resultat.y,30,30);
        ctx.fillStyle='rgba(23,145,167,0.4)';
        ctx.fill();
        ctx.stroke();
}

Note que les derniers résult.x et result.y n'existent pas, tu t'étais trompé.
Le var result=convert() il sert à quoi ? Parce que je ne vois pas où tu l'utilises ensuite.
Vire-le pour voir (met-le en commentaires)

[aboucool54]

j'ai dit que j'arrive deplacer(un semblant de deplacement) en redessinant l'image(la carte) a un endroit sur la carte mais j'arrive pas a faire a centre le point ou l'image est redessiné

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function pointDisplay(e){
      var pointAlat,pointAlng;
        tx.beginPath();
        ctx.lineWidth = 2;
         pointAlat-=conteneur.offsetLeft;
         pointAlng-=conteneur.offsetTop;
// Détermine le centre du canvas
        var centreX=Math.round(canvas.width/2);
        var centreY=Math.round(canvas.height/2);
        var resultat={};
           resultat.x=-(pointAlat-centreX);
           resultat.y=-(pointAlng-centreY);
        ctx.clearRect(0, 0, canvas.width, canvas.height);//nettoyer le canvas pour y redessiner l'image afin de pouvoir centrer le point
        ctx.drawImage(gkhead,-centreX,-centreY);//je redessine l'image
        ctx.fillRect(resultat.x,resultat.y,100,100);//dessin du point qui doit être au milieu de l'image redessiner
        ctx.fillStyle='rgba(23,145,167,0.4)';
        ctx.stroke();
        e.preventDefault();
     }

je ne sais pas si je me fait comprendre aider moi j'arrive pas resoudre ce probleme depuis un bon moment maintenant

[Watilin]

Je vois plusieurs problèmes dans ton dernier code :

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

2. Ces trois instructions fonctionnent ensemble :

Code :

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

1
2
3
ctx.beginPath();
ctx.lineWidth = 2;
ctx.stroke();

Cependant, et je te l'ai déjà fait remarquer, ce n'est pas suffisant pour produire quelque chose de visible. Je ne peux que te conseiller de revoir les tutoriels sur le dessin dans un canevas. Tu as un « traceur » invisible que tu initialises avec beginPath, puis tu traces un chemin avec les méthodes moveTo, lineTo, arc, etc. puis tu « matérialises » ton chemin avec stroke ou fill. Voir cet exemple du MDN.

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

4. Dans un précédent post, tu disais que offsetLeft et offsetTop te donnaient 0. Ton canevas se positionne par rapport à son offset parent (tape canvas.offsetParent dans ta console), et en fonction des styles CSS que tu lui as donnés (position, left, top, etc). Je ne suis pas sûr que tu en aies vraiment besoin dans le cas présent.