Déplacer mon image et écrire sur mon canvas

Version imprimable

Voir 40 message(s) de cette discussion en une page

Bonjour !

sur mon même canvas je voudrai déplacer mon image et écrire, le tout avec ma souri...
mais je me trouve confronté à des problèmes.
lorsque je déplace mon image l’écriture s'efface automatique.

je vous présente mon code qui permet de déplacer mon image:
Code:

1 2 3 4 5 6 7 8 9 10 11 if(res=='move' && isActiving && crayon==false){ canMouseX=parseInt(e.clientX-offsetX); canMouseY=parseInt(e.clientY-offsetY); if(isDragging){ ctx.clearRect(0,0,canvasWidth,canvasHeight); ctx.drawImage(img,canMouseX-50/2,canMouseY-50/2,50,50); } }
mon souci vient du code : ctx.clearRect(0,0,canvasWidth,canvasHeight);, ce qui me permet d’effacer automatiquement la position de l'image précédente.
ayant peu de connaissance en JavaScript, je ne sais pas comment résoudre mon problème.
j'ai besoin d'aide merci.

Cordialement
solaar

13/03/2015, 12h21
-Rpass-

Salut,

d'où provient canvasWidtht et canvasHeight ?

Code:

1
2
3
4
5
6
canvas = document.getElementById('deseign_paper');	
	if (canvas.getContext){
        ctx = canvas.getContext("2d");
 
		canvasWidth = canvas.width;
    	canvasHeight = canvas.height;

il a été declarer ici dans le loaded du body.

13/03/2015, 14h33
-Rpass-

du coup cela vide l'intégralité de ton canvas : image et texte vu que tu indiques la taille du canvas ... il faudrait indiquer la taille de l'image précisément ainsi que sa position
13/03/2015, 14h52
solaar

oui
13/03/2015, 17h40
solaar

Comment efface seulement que l'image ... précédente.
13/03/2015, 19h07
Watilin

Tu as montré tout le code ? Tu n'utilises pas requestAnimationFrame ?
13/03/2015, 19h15
solaar

non j'utilise pas

Citation:

requestAnimationFrame
13/03/2015, 20h50
Watilin

Bah voilà pourquoi ça marche pas.
14/03/2015, 11h08
NoSmoking

Bonjour,

Citation:

sur mon même canvas je voudrai déplacer mon image et écrire, le tout avec ma souri...

peut être fais tu une erreur d'approche.

Un canvas n'est rien de plus qu'un calque sur lequel tu écris, ton approche est lorsque j'ai un élément à déplacer je gomme mon calque et je réécris TOUT, il te faut donc sauvegarder le tracé de l'écriture pour pouvoir le réafficher après avoir déplacé ton image.

Une autre approche est de superposer des calques, un pour l'image et un pour le texte, il te suffirais de gommer/redessiner uniquement le calque souhaité. Tu pourrais même rajouter une "couche" pour la gestion de la souris.
14/03/2015, 18h24
solaar

Citation:

il te faut donc sauvegarder le tracé de l'écriture pour pouvoir le réafficher après avoir déplacé ton image.

Oui j'ai également pensé à sa !
mais comment me prendre.... je vais rechercher sur le net ...

Citation:

Une autre approche est de superposer des calques, un pour l'image et un pour le texte ...

pour cette idée je pense pas qu'elle pourras m'apporter un résultat..... mais je vais aussi tenter le coup ... puis apporter mes résultats.
15/03/2015, 10h36
NoSmoking

Citation:

mais comment me prendre.... je vais rechercher sur le net ...

il existe un autre endroit où l'on peut trouver, dans sa tête :mouarf:

Il te suffit de "pusher" le point à tracer/ajouter dans un buffer.
15/03/2015, 11h49
solaar

:mouarf: je sais très bien, c'est la base de tout et c'est tellement évident 8-) !!!
15/03/2015, 16h47
Watilin
Je vais expliquer un peu mon intervention car je réalise que j'ai été un peu rude :aie:

En gros dans le code que tu as montré il y a ça :
1. calcul des nouvelles coordonnées
2. effacement du canvas
3. dessin de l'image avec les coordonnées calculées
Ce que tu ne montres pas c'est comment ce code est répété : puisque tu n'utilises pas requestAnimationFrame, est-ce que c'est setTimeout ou setInterval, ou bien est-ce que tu fais ça directement dans un gestionnaire d'évènement ?

1 pièce(s) jointe(s)

Pièce jointe 171847

ce qui me fatigue c'est sa :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
if(res=='move' && isActiving && crayon == false){
 
	canMouseX=parseInt(e.clientX-offsetX);
	canMouseY=parseInt(e.clientY-offsetY);
 
	// if the drag flag is set, clear the canvas and draw the image
      if(isDragging){
 
	  ctx.save();
	  ctx.drawImage(img,canMouseX-50/2,canMouseY-50/2,50,50);
	  ctx.restore()
 
 
	  //ctx.clearRect(canMouseX,canMouseY,canvasWidth,canvasHeight,50,50);
	}
}

en utilisant save and restore ....
lorsque l'utilisateur fini l'ecriture

16/03/2015, 17h30
solaar

Je ne veux pas éffacer les deux traits .... mais seulement deplacer l'image à l'aide de la souri.
17/03/2015, 05h55
Watilin

1. Tu n'as pas répondu à ma question. Je vais être plus précis : dans ton code tu as e.clientX et e.clientY. De toute évidence e est un évènement du pointeur. Je voudrais voir la déclaration de la fonction qui reçoit ce e en paramètre.

2. Tu n'as pas compris le fonctionnement de save et restore : ils sauvegardent et restorent l'état du contexte (ctx dans ton code), c'est-à-dire les transformations géométriques (scale, translate, etc.) et les propriétés de style (fillStyle, lineWidth, etc.). L'état du contexte et le contenu du canevas sont deux choses différentes.
Pour sauvegarder le contenu du canevas tu dois faire appel à getImageData. Mais tu n'en as pas besoin si tu choisis de superposer deux canevas, l'un affichant ton texte et l'autre ton image, comme te l'a suggéré NoSmoking.

Bonjour !
Merci pour l'aide je vous laisse le code :

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
 
function findxy(res, e) {	
 
if (res == 'down') {        
        prevX = currX;
        prevY = currY;	
 
        currX = e.clientX - canvas.offsetLeft;
        currY = e.clientY - canvas.offsetTop;      
 
        flag = true;
        dot_flag = true;  		
 
    if (dot_flag && crayon && erase == false ) { 
		ctx.beginPath();
		ctx.fillStyle = x;
        ctx.fillRect(currX, currY, 2, 2);
		ctx.save();
		ctx.closePath();
		dot_flag = false;
    }
 
	  if (dot_flag && crayon == false && erase ) { 
 
	  ctx.clearRect(0,0,ctx.canvas.width,ctx.canvas.height);
		ctx.drawImage(img,canMouseX-50/2,canMouseY-50/2,50,50);
		dot_flag = false;
    }
}
 
if (res == 'up' || res == "out") {flag = false;}
 
if (res == 'move' && crayon && erase == false) {
   		if (flag) {
		prevX = currX;
    	prevY = currY;
    	currX = e.clientX - canvas.offsetLeft;
    	currY = e.clientY - canvas.offsetTop;
    	draw();
		//Display eraser tool
			var my_erase=document.getElementById('my_erase');
			my_erase.style.display="block";
			}
		}	
}

Citation:

Pour sauvegarder le contenu du canevas tu dois faire appel à getImageData.

je me document .

j'ai résolue mon problème en créant un autre canvas transparent ;

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
 
 	mycanvas = document.createElement("canvas");
	mycanvas.id = "CursorLayer";
	mycanvas.width = 184; mycanvas.height = 164;
	mycanvas.style.zIndex = 8;
	mycanvas.style.position = "absolute";
	mycanvas.style.border = "1px solid";
	mycanvas.style.top="25px";
	mycanvas.style.background="transparent";
 
	document.body.appendChild(mycanvas);
 
	ctx_mycanvas = mycanvas.getContext('2d');
 
	img = document.getElementById(env);
	ctx_mycanvas.drawImage(img,0,0,50,50);	
 
	canvasOffset=$("#CursorLayer").offset(); 
	offsetX=canvasOffset.left;
	offsetY=canvasOffset.top;
 
    canvasWidth=mycanvas.width;
	canvasHeight=mycanvas.height;
 
  	mycanvas.addEventListener("mousemove",function(e){imgxy('move', e)}, false);
  	mycanvas.addEventListener("mousedown",function(e){imgxy('down', e)}, false);
  	mycanvas.addEventListener("mouseup",function(e){imgxy('up', e)}, false);
  	mycanvas.addEventListener("mouseout",function(e){imgxy('out', e)}, false);

je cherche maintenant à faire pivoter mon image à l'aide de la souri.

21/03/2015, 15h21
NoSmoking

Citation:

je cherche maintenant à faire pivoter mon image(...)

Peut être devrais tu jeter un coup d'oeil à cette discussion http://www.developpez.net/forums/d14...-photo-canvas/.
Post #2 et #6 j'ai proposé des exemples.

Voir 40 message(s) de cette discussion en une page