Discussion :

[zevince]

Bonjour,

d�licat de trouver un titre explicite, ma question ne semble pas trouver beaucoup de r�ponses sur le net..

Je r�alise une application du type dessin dans le navigateur (pour des seances d'entrainement de foot), je pars donc sur une balise canvas, une seule largeur de trait et diff�rentes couleurs, de ce cot� la pas de soucis.

J'ai �galement besoin de pouvoir ins�rer des images au clic utilisateur, �a j'ai aussi r�ussi a trouver la technique..

La ou ca devient un peu plus costaud.. C'est quand il faut pouvoir faire du drag and drop sur ces images ins�r�es de fa�on dynamique dans le canvas, pour pouvoir les placer plus pr�cis�ment...

j�ins�re mon image comme ceci :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
	  var img_elem = new Image();
 
	  img_elem.addEventListener('load', function () {
		context.drawImage(this, mouseX, mouseY);
	  }, false);
	  img_elem.src = img;

j'ai essay� de rajouter un "img_elem.draggable = true;", vu qu'a priori, en HTML5, c'est juste cet attribut a rajouter.. Mais �a ne change rien..

Auriez vous des pistes ou des infos sur le sujet ? Je tourne sur google depuis un moment et je tombe a chaque fois sur le m�me genre d'infos.. Soit du dessin, soit du drag and drop, mais rien qui s'applique a ce cas la... je suis un peu bloqu� !

Merci d'avance aux experts !

[Bovino]

Le probl�me, c'est que l'API HTML5 Drag and Drop s'applique au balisage HTML, or une balise canvas ne poss�de pas de balisage, elle ne peut donc pas g�rer cette API.
La solution selon moi serait de stocker les positions de tes images et lors du clic sur la balise, r�cup�rer la position o� le clic est intervenu et si cette position correspond � celle d'une image, la d�placer lors de l'�v�nement mousemove jusqu'au rel�chement.

[zevince]

Solution qui me semble d�licate a g�rer.. Mais au moins, c'est une piste s�rieuse.. Je vais creuser dans cette direction.. !

Merci