Bonsoir, j'arrive à déssiner une droite avec un code que j'ai trouvé sur le net. L'objectif est de capturer la position du point de départ et tracer la droite en draggant jusqu'au second clic, mais le problème est que lorsque je veux tracer une autre droite la précédente s'efface, du coup je ne peux avoir qu'une seule droite en même temps sur ma page alors que je veux pouvoir en avoir plusieurs.
voici le code: fonction de détection du clic
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
function captureClick()
{
	if(currentMode=='noPositionDefined')
	{
		currentMode='firstPositionCaptured';
		startX=mouseX;
		startY=mouseY;
	}
	else
	{
		currentMode='noPositionDefined';
	}
}
position de la souris
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 getMouseXY(aEvent)	//deplacement de l'element draguer
{
  	var myEvent = aEvent ? aEvent : window.event; //recuperation de l'evenement selon le navigateur
	//on recupere cible de l'evenemet
	var target= myEvent.target ? myEvent.target : myEvent.srcElement;
	if(myEvent.offsetX)
	{
		mouseX=myEvent.clientX+document.body.scrollLeft;
		mouseY=myEvent.clientY+document.body.scrollTop;
	}
	else
	{
		mouseX=myEvent.pageX;
		mouseY=myEvent.pageY;
	}
 
}
dessin de la droite
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
31
32
33
34
35
36
37
function drawLine(x1,y1,x2,y2,color,espacementPointille,divId)
{
	if(espacementPointille<1) { espacementPointille=1; }
 
	//on calcule la longueur du segment
	var lg=Math.sqrt((x1-x2)*(x1-x2)+(y1-y2)*(y1-y2));
	var lt=lg/100;// on passe des mm au cm en divisant par 100
	//transformation en string
	var chaine=lt.toString();
	chaine=chaine.substring(0,3);
 
	//on determine maintenant le nombre de points necessaires
	var nbPointCentraux=Math.ceil(lg/espacementPointille)-1;
 
	//stepX, stepY (distance entre deux points de pointillés);
	var stepX=(x2-x1)/(nbPointCentraux+0);
	var stepY=(y2-y1)/(nbPointCentraux+0);
 
	//on recreer un point apres l'autre
	var strNewPoints='';
	for(var i=1 ; i<nbPointCentraux ; i++)
	{
		strNewPoints+='<div style="font-size:1px; width:1px; height:1px; background-color:'+color+'; position:absolute; top:'+Math.round(y1+i*stepY)+'px; left:'+Math.round(x1+i*stepX)+'px; z-index:2;">&nbsp;</div>';
	}
 
	//point de depart
	strNewPoints+='<div style="font-size:1px; width:3px; height:3px; background-color:'+color+'; position:absolute; top:'+(y1-1)+'px; left:'+(x1-1)+'px; z-index:2; ">&nbsp;</div>';
	//point d'arrive
	strNewPoints+='<div style="font-size:1px; width:3px; height:3px; background-color:'+color+'; position:absolute; top:'+(y2-1)+'px; left:'+(x2-1)+'px; z-index:2;">&nbsp;</div>';
 
	strNewPoints+='<div style="font-size:20px; width:3px; height:3px; background-color:'+color+'; position:absolute; top:'+((y2+y1)/2)+'px; left:'+((x2+x1)/2)+'px; z-index:2;">'+chaine+'Cm</div>';
 
	//on suprimme tous les points actuels et on mets les nouveaux div en place
	//obj container des points
	var myContainer=document.getElementById(divId);
	myContainer.innerHTML=strNewPoints;
}
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
function tryDrawLine()
{
	if(currentMode=='firstPositionCaptured')
	{
		drawLine(startX,startY,mouseX,mouseY,"red","2",'myDiv');
	}
}
l'appel des fonctions
Code : Sélectionner tout - Visualiser dans une fenêtre à part
<body onMouseMove="getMouseXY(event); tryDrawLine();" onClick="captureClick();" style="background-color:#6699CC;" onLoad="currentMode='noPositionDefined';">
div dont l'id est utilisé dans la fonction tryDrawLine()
Code : Sélectionner tout - Visualiser dans une fenêtre à part
<div id="myDiv" style="position:absolute; width: 0px; height: 0px; left: 0px; top: 0px; border: 1px none #000000;z-index:2;"></div>
Merci