difficulté avec les balises div

**sebac** · 12/04/2010, 21h08

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

**blade159** · 13/04/2010, 13h59

voici un code possible, ce n'est pas parfait, mais cela fonctionne :

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
 
var CurrentDiv;
 
function captureClick()
{
    if(currentMode=='noPositionDefined')
    {
        CurrentDiv = document.createElement("Div");
        currentMode='firstPositionCaptured';
        startX=mouseX;
        startY=mouseY;
 
    }
    else
    {
        currentMode='noPositionDefined';
    }
}
 
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;
    }
 
}
 
function drawLine(x1,y1,x2,y2,color,espacementPointille,divId)
{
    var myContainer = CurrentDiv;
    myContainer.className = "Container";
 
    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
    myContainer.innerHTML=strNewPoints;
    document.getElementById(divId).appendChild(myContainer);
}
 
function tryDrawLine()
{
    if(currentMode=='firstPositionCaptured')
    {
        drawLine(startX,startY,mouseX,mouseY,"red","2",'myDiv');
    }
}

et j'ai créé un style :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<style>
.Container
{
    position:absolute;
    width: 0px;
    height: 0px;
    left: 0px;
    top: 0px;
    border: 1px none #000000;
    z-index:2;
}
</style>

difficulté avec les balises div

JavaScript

Vue hybride

Discussions similaires

Partager

Partager