Voir le résultat Retour à la page du projet
Afficher/Masquer les commentaires
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8"/>
<title>Création d'un graphe</title>On appelle la bibliothèque KINETICjs.
Cette biblothèque rajoute des fonctions de programmation.
<script src="kinetic-v5.0.2.min.js"></script>
</head>
<body>
<div>
<header>
<h1>Création d'un graphe</h1>
</header>
On crée la section où se trouvera la fenêtre graphique.
Elle est identifiée par son id ici container.
<div id="container"></div>
On crée un formulaire form contenant un bouton.
En cliquant sur le bouton avec onclick on lancera la fonction tracechemin().
<form>
<input type="button" value="rajouter un chemin" onClick="tracechemin()">
</form>
Le code source du programme en JavaScript débute ici.
<script>
La première action est de créer une scène (ici stage) pour contenir nos créations. Le constructeur de cet objet attend 3 paramètres. Le premier est l'identifiant du contenant HTML, dans notre cas cet identifiant est container. Les deux paramètres suivants définissent la largeur et la hauteur de la scène.
var stage = new Kinetic.Stage({
container : 'container',
width : 600,
height : 500
});
Il faut ensuite définir au moins un calque (ici layer pour dessiner :
var layer = new Kinetic.Layer();
On définit le nombre de sommets et de chemins, qui seront rangés dans les tableaux (Array) appelés chemin et Sommet.
var sommets=10;
var n=0; //nombre de chemins
var chemin=new Array([]);
var Sommet=new Array([]);
On utilise une boucle pour créer les sommets.
for (i=0; i<sommets;i++){
Chaque sommet sera constitué d'un cercle et d'un numéro.
Pour cela on va créer un groupe noeud en utilisant la méthode new Kinetic.Group.
Ce groupe aura la propriété d'être "glissable" draggable.
var noeud = new Kinetic.Group({
x: 50+i*50,
y: 250+Math.pow(-1, i)*(20-20*i),
draggable:true
});
On utilise une fonction pour fabriquer un noeud.
On crée un objet cercle circles avec new Kinetic.Circle et un notre numéro en text avec new Kinetic.Text.
On ajoutera ces deux objets dans le groupe noeud avec noeud.add(circles) et noeud.add(text) pour obtenir notre sommet.
(function() {
var circles = new Kinetic.Circle({
radius: 10,
stroke: "black",
fill:"white",
strokeWidth: 1
});
var text = new Kinetic.Text({
x:-6,
y:-6,
text: 1+i,
fontSize: 14,
fontFamily: "Arial",
Stroke: "blue",
StrokeWidth: 1
});
noeud.add(circles);
noeud.add(text);
})();
On place notre sommet appelé noeud dans le calque (layer).
layer.add(noeud);
On rajoute le sommet appelé noeud dans le tableau (Sommet).
Sommet.push(noeud);
On définit l'aspect du pointeur de la souris à l'écran en fonction que l'on se trouve sur un sommet ou non.
Sommet[i+1].on('mouseover', function() {
document.body.style.cursor = 'pointer';
});
Sommet[i+1].on('mouseout', function() {
document.body.style.cursor = 'default';
});
};
On vient de fermer notre boucle qui créer les 10 sommets déplaçables.
Pour les voir à l'écran, on rajoute notre calque (layer) dans notre scène.
stage.add(layer);
Enfin on crée la fonction tracechemin() pour relier les sommets.
Il faudra que chaque chemin se déplace avec les deux sommets qu'il relie.
Pour cela il faudra redéfinir les fonctions de déplacement de chaque sommet Sommet[k].on.
function tracechemin() {
var k = prompt("Entrez le premier sommet :", "numéro du sommet");
var l = prompt("Entrez le deuxième sommet :", "numéro du sommet");
var ligne = new Kinetic.Line({
points: [Sommet[k].x(), Sommet[k].y(), Sommet[l].x(), Sommet[l].y()],
stroke: "red",
strokeWidth: 2,
});
chemin.push([ligne,k,l]);
n=chemin.length;
Sommet[k].on('dragmove', function() {
document.body.style.cursor = 'pointer';
for (t=1; t<n+1 ;t++) {
if (chemin[t][1]==k || chemin[t][2]==k ){
a=chemin[t][1];
b=chemin[t][2];
chemin[t][0].points([Sommet[a].x(),Sommet[a].y(),Sommet[b].x(),Sommet[b].y()]);
}
}
layer.draw();
});
Sommet[k].on('dragend', function() {
document.body.style.cursor = 'default';
layer.draw();
});
Sommet[l].on('dragmove', function() {
document.body.style.cursor = 'pointer';
for (r=1; r<n+1 ;r++) {
if (chemin[r][1]==l || chemin[r][2]==l){
a=chemin[r][1];
b=chemin[r][2];
chemin[r][0].points([Sommet[a].x(),Sommet[a].y(),Sommet[b].x(),Sommet[b].y()]);
layer.draw()
}
}
layer.draw();
});
Sommet[l].on('dragend', function() {
document.body.style.cursor = 'default';
layer.draw();
});
layer.add(chemin[n-1][0]);
stage.add(layer);
}Fin de la fonction tracechemin().
On ferme les balises </script>, </div>, </body> et </html>.
</script>
</div>
</body>
</html>