Déplacer mon image et écrire sur mon canvas

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

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.

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

oui

Comment efface seulement que l'image ... précédente.

Tu as montré tout le code ? Tu n'utilises pas requestAnimationFrame ?

non j'utilise pas

Citation:

---

requestAnimationFrame

---

Bah voilà pourquoi ça marche pas.

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.

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.

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.

:mouarf: je sais très bien, c'est la base de tout et c'est tellement évident 8-) !!!

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 ?

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

Je ne veux pas éffacer les deux traits .... mais seulement deplacer l'image à l'aide de la souri.

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.

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.

:? c'est ce que je veux !
sauf que j'utilise la souris pour faire tout ces évènements.
j'ai du utiliser plusieurs canvas pour chaque.
okay je regarde tout sa merci.