Bonjour,

Je cherche a définir des champs 'draggable' sur une img afficher à l'aide d'un canvas, ces champs doivent etre draggable vers une div afficher dans l'écran.

J'arrive à afficher mon img dans mon canvas, à dessiner des rectangle par dessus mais je n'arrive pas à les rendre draggable.

Pour dessiner sur le canvas j'ai réalisé une petite fonction JS :

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
window.onload = function(){
    var canvas = document.getElementById("canvasframe");
    var context = canvas.getContext("2d");
    var destX = 0;
    var destY = 0;
	var taillel = 450;
	var tailleh = 350;
    var imageObj = new Image();
 
    imageObj.src = "ecran/ecran1.png";
    imageObj.onload = function(){
		//Effet 3D
		context.shadowOffsetX = 5;
		context.shadowOffsetY = 5;
		context.shadowBlur = 5;
		context.shadowColor = "grey";
		//Dessin de l'image selon ses parametres
		context.drawImage(imageObj, destX, destY, taillel, tailleh);
		//Definition d'un trait par dessus l'image
		var rectangle1 = context.rect(10,60,70,20);
		context.lineWidth = 2;
                context.draggable = true;
		context.stroke();
 
		var rectangle2 = context.rect(85,60,70,20);
		context.lineWidth = 2;
		context.stroke();		
    };
 
};
Cette fonction affiche 'écran1.png' dans la div correspondante coté HTML :

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
<canvas id="canvasframe" width="460px" height="360px" class="canvas_screen" >
                        Texte si le navigateur ne supporte pas le HTML Canvas
</canvas>
Le but est de rendre draggable les deux éléments ( rectangle1 et rectangle2) définis dans la fonction JS vers une div et de pouvoir récuperer leurs id associés.