Créer organigramme de HTML5

Question

Je veux créer l'organigramme en utilisant le HTML5 avec mise en page Grille

Informations détaillées: - Doit être capable de faire glisser 5 éléments à la feuille (événement, état, action, données, fin - Les éléments peuvent se connecter entre eux (glisser la ligne d'un élément à l'autre) - L'élément d'état comporte un connecteur vrai/faux - Les éléments doivent être alignés sur la grille - Doit être possible de redimensionner les éléments et de leur donner un nom - Fonctionne si nécessaire comme MS Visio (facile à apprendre)

Puis-je obtenir la procédure étape par étape comme mentionné ci-dessus.

Présent je suis capable de faire glisser les objets.

Maintenant, l'étape suivante est que je veux connecter les deux objets

qui est similaire à la mise en page de diagramo.

Comment afficher les connecteurs de chaque objet lorsque je le survole?

Answer 1

La façon dont vous laissez vos utilisateurs faire glisser les 5 éléments sur votre panneau/toile, de la même manière que vous devriez laisser vos utilisateurs glisser un connecteur sur le panneau/toile.

Le choix évident étant, un connecteur vertical et un connecteur horizontal, qui totalise jusqu'à 7 éléments au total. 5 avec vos objets de base et 2 pour vos connecteurs.

Vous pouvez également avoir besoin d'un moyen permettant à votre utilisateur de définir la hauteur du connecteur pour les connecteurs verticaux.

Et un moyen pour régler la largeur des connecteurs horizontaux. Si cela vous convient, vous pouvez également ajouter des connecteurs diagonaux, du nord-ouest au sud-est et du nord-est au sud-ouest si vous choisissez de le faire.

Answer 2

Pour connecter deux objets en faisant glisser la ligne d'un objet à un autre objet essayer ..

var X,Y,temp=0;//Global Varaibles 

canvas.addEventListener('mousedown',function(evt){ 

X = evt.clientX; 
Y = evt.clientY; 
temp = 1; 
},false); 

canvas.addeventListener('mouseup',function(evt){ 
temp=0; 
},false); 

canvas.addEventListener('mousemove',function(evt){ 
if(temp == 1) 
{ 
context.clearRect(0,0,canvas.width,canvas.height); 
//re draw all the objects 
context.beginPath(); 
context.strokeStyle = '#000000'; 
context.moveTo(X,Y); 
context.lineTo(evt.clientX,evt.clientY); 
context.stroke(); 
context.closePath(); 
} 
},false); 

Voir la démo en violon: Jsfiddle Demo