dessinner une droite sur une image

**sebac** · 03/03/2010, 11h15

Bonjour j'utilise drawline pour dessiner des droite dans le body de site. L'idée est de cliquer sur l'écran deux fois pour tracer les droites entre deux points mais le problème se pose lorsque ma droite traverse une image, la partie de la droite qui traverse l'image devient alors invisible car masquée par l'image alors que je veux justement que la droite soit visible par dessus l'image: voici la fonction de dessin

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
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));
 
	//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; ">&nbsp;</div>';
	}
 
	//pointe 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; ">&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; ">&nbsp;</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;
}

l'appel de l'image qui se trouve dans dicom.php

Code :

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

1
2
3
4
5
6
7
8
<body onMouseMove="getMouseXY(event); tryDrawLine();" onClick="captureClick();" style="background-color:#6699CC;" onLoad="currentMode='noPositionDefined';">
<div id="myDiv" style="position:absolute; width: 0px; height: 0px; left: 0px; top: 0px; border: 1px none #000000;"></div>
 
<div style="width:800px;height:800px;position:absolute;left:100px;" id='IdTexIm' onmousedown="javascript:degrade(event);" onmouseup="javascript:getImage(event);" >
<img style='position:absolute;width=800px;height:800px' src='dicom.php?quality=100?varStatic=0' id='image' onselectstart="javascript:return false;" ondrag="return false;" ondragstart="return false;" oncontextmenu="return false;" >
</div>
 
</body>

Merci

**SpaceFrog** · 03/03/2010, 11h17

drawline n'est pas une fonction native de js ...
je suppose donc que tu utilises une lib ???

pour l'image dessus ou dessous c'est juste une question de z-index...

**sebac** · 03/03/2010, 11h35

Mon titre est trompeur en fait je n'utilise aucune librairie j'ai définie moi même la fonction drawline postée précédemment.

**E.Bzz** · 03/03/2010, 11h45

Bonjour,
comme indiqué par SpaceFrog, il faut donc que tu définisses, pour les div représentant les "points" du "trait", un z-index supérieur à ceux des images à survoler.

Remarque :
Tu devrais utiliser les classes CSS, ça allègerait ton code

A+