Bon alors j'ai avancé !!!!!!!!!!!!!!!
a. J'arrive à relier deux éléments ensemble. En traçant une ligne entre les deux ^^.
b. j'arrive à faire en sorte qu'on ne puisse pas relier deux éléments de la même colonne.
c. J'arrive à faire en sorte qu'on ne puisse relier plus d'un élément avec un autre.
d. j'arrive à générer un tableau de résultat.
Mais là je bloque .... j'ai un bug lorsque
1. je lie animal avec mouton
2. je lie Firefox avec navigateur
3. je lie OS avec mouton
Par contre si je fais :
1. je lie animal avec mouton
2. je lie Firefox avec navigateur
3. je lie OS avec navigateur
Tout se passe comme prévu !
var mouseX=0;
var mouseY=0;
var startX=0;
var startY=0;
var oPositionFirst='';
var currentMode='notLoaded';
var reponse = new Array();
reponse[0] = new Array();
var i = 0;
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 tryDrawLine(p_divClass)
{
if(currentMode=='firstPositionCaptured')
{
drawLine(startX,startY,mouseX,mouseY,document.getElementById('couleurSelector').value,document.getElementById('espacementSelector').value,'myDiv',p_divClass);
}
}
function captureClick(p_object)
{
//on enregistre la valeur
oValue = p_object.value;
//on enregistre la position de la colonne
oPosition = p_object.accessKey;
if(oPosition != oPositionFirst)
{
// si il ne sont pas dans la meme colone alors on enregistre la position de la colonne dans la variable global
oPositionFirst = oPosition;
// puis on cherche si un trait reli déjà nos boutons grace aux classes de nos div qui contienne les valeurs des deux boutons
if ($('div').hasClass(oValue)) {
//si un trait a deja été tracé on le supprime
$('.'+oValue).remove();
for (j = 0 ; j < reponse.length ; j++)
{
//ensuite on parcours le tableau de resultat afin de supprimer les entrées dans notre tableau qui coresponde au trait supprimé
if (oValue==reponse[j][0]||oValue==reponse[j][1])
{
//on remplace les valeurs qu'on veut supprimer par les valeur au derniere indice de notre tableau
reponse[j][0] = reponse[reponse.length-1][0];
reponse[j][1] = reponse[reponse.length-1][1];
alert('['+j+'][0]=>'+reponse[j][0]+'['+j+'][1]=>'+reponse[j][1]);
//puis on unset la derniere case
reponse.pop();
// et on decrémente notre compteur
i--;
}
}
}
//si le premier point n'a pas été défini
if(currentMode=='noPositionDefined')
{
reponse[i] = new Array();
currentMode='firstPositionCaptured';
startX=mouseX;
startY=mouseY;
alert('reponse['+i+'][0] ='+oValue);
reponse[i][0] = oValue;
}
else
{
alert('reponse['+i+'][0] ='+oValue);
reponse[i][1] = oValue;
alert(reponse[i][1]);
tryDrawLine(reponse[i][0]+' '+reponse[i][1]);
currentMode='noPositionDefined';
i++;
oPositionFirst='';
}
}
else
{
currentMode='noPositionDefined';
oPositionFirst='';
reponse.pop();
}
}
function afficheResultat(){
for (j=0;j < reponse.length;j++){
alert('['+j+'][0]=>'+reponse[j][0]+'['+j+'][1]=>'+reponse[j][1]);
}
}
//Fonction permettant de tracer une ligne en JS
// Cette fonction créer autant de bloc div flottant que nécessaire et la place de manière régulière le long du segment à tracer.
// Arguments:
// - x1,y2 coordonnés du début du segment
// - x2,y2 coordonnés de la fin du segment
// - color couleur du tracé
// - espacementPointillé, entier décrivant en pixel l'espacement entres les points du tracé
// - divId, id d'un élement HTML comme un div par exemple. Cet objet servira de container pour le code HTML des points.
// Je conseille d'utiliser un div flottant placé en 0,0 de dimension 0,0 en position:absolute
function drawLine(x1,y1,x2,y2,color,espacementPointille,divId,divClass)
{
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 class="'+divClass+'" 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 class="'+divClass+'" 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 class="'+divClass+'" 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= myContainer.innerHTML+ strNewPoints;
}
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Trac顤e ligne en javascript</title>
<script language="javascript" type="text/javascript" src="drawLine.js"></script>
<script language="javascript" type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
</head>
<body onMouseMove="getMouseXY(event); " 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>
Cliquez simplement pour choisir le point de d걡rt, puis d걬ac顬a sourie.
<p>Couleur
<select name="couleurSelector" id="couleurSelector">
<option value="red">red</option>
<option value="green">green</option>
<option value="blue">blue</option>
<option value="white" selected>white</option>
<option value="yellow">yellow</option>
<option value="black">black</option>
</select>
</p>
<p>Pointill鍊 <select name="espacementSelector" id="espacementSelector">
<option value="1">1px</option>
<option value="2">2px</option>
<option value="5" selected>5px</option>
<option value="10">10px</option>
<option value="20">20px</option>
<option value="50">50px</option>
</select>
</p>
<table>
<tr>
<td width="300px">
<button accessKey="gauche" type="button" value="Animal" onClick="captureClick(this);" >Animal</button>
</td>
<td>
<button accessKey="droite" type="button" value="Mouton" onClick="captureClick(this);" >Mouton</button>
</td>
</tr>
<tr>
<td>
<button accessKey="gauche" type="button" value="Firefox" onClick="captureClick(this);" >Firefox</button>
</td>
<td>
<button accessKey="droite" type="button" value="Navigateur" onClick="captureClick(this);" >Navigateur</button>
</td>
</tr>
<tr>
<td>
<button accessKey="gauche" type="button" value="OS" onClick="captureClick(this);" >OS</button>
</td>
<td>
<button accessKey="droite" type="button" value="Jeux" onClick="captureClick(this);" >Jeux</button>
</td>
</tr>
<tr>
<td>
<button accessKey="gauche" type="button" value="Starcraft" onClick="captureClick(this);" >Starcraft</button>
</td>
<td>
<button accessKey="droite" type="button" value="WinXP" onClick="captureClick(this);" >Win XP</button>
</td>
</tr>
</table>
<input type="button" onclick="afficheResultat()" value="afficheResultat"/>
<input type="button" onclick="alert(reponse.length);reponse.pop();alert(reponse.length);" value="pop"/>
</body>
</html>
Je vous en supplie aidez moi !!!! je suis vraiment pas loin....[/i][/i][/i][/i][/i][/i]
