dessinner une droite sur une image
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:
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; "> </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; "> </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; "> </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:
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
