Javascript - Se connecter deux lignes

Question

Dans l'image suivante:

alt text http://rookery9.aviary.com.s3.amazonaws.com/4478500/4478952_3e06_625x625.jpg

Je veux connecter les cases ci-dessus avec en dessous, Appelons le bord inférieur des boîtiers décodeurs comme A et bord supérieur les cases ci-dessous comme B

maintenant, j'ai deux tableaux contenant les points dans la ligne A et B disent

A = [{Ax1, ay1}, {Ax2, Ay2}, ....] et B = [{Bx1, By1}, {Bx2, By2}, ....]

Dans le monde réel, il peut être A = [{100, 100}, {120, 100}, {140, 100}, {160, 100}] et B = [{120, 200}, {140, 200}, {160, 200}, {180, 200}, {200, 200},]

S'il vous plaît regarder les points noirs dans l'image ci-dessus

Comment puis-je obtenir les points connectiong comme le montre les images? Le point de connexion doit être aussi proche du centre de la ligne que possible.

Voici ce que je suis en train de faire, mais au-dessous des fonctions tracer une ligne entre les deux points correspondants de la gauche à partir de la ligne des deux, toute suggessions

drawConnection : function(componentOut, componentIn, connectionKey) { 
     var outDim  = $(componentOut).data('dim'); 
     var inDim  = $(componentIn).data('dim'); 
     var outPorts = $(componentOut).data('ports'); 
     var inPorts = $(componentIn).data('ports'); 
     var abovePorts = {}; 
     var belowPorts = {}; 
     var i = 0; 
     if(outDim.bottomLeft.y < inDim.topLeft.y){ 
      // Now proceed only if they can be connect with a single line 
      if(outDim.bottomLeft.x < inDim.topRight.x && outDim.bottomRight.x>inDim.topLeft.x) { 
       // Now get a proper connecting point 
       abovePorts = outPorts.bottom; 
       belowPorts = inPorts.top; 
       for(i=0; i<abovePorts.length; i++) { 
        for(j=0; j<belowPorts.length; j++) { 
         if(!abovePorts[i].inUse && !belowPorts[j].inUse && (abovePorts[i].x == belowPorts[j].x)){ 
          console.debug("Drawing vertical lines between points ("+abovePorts[i].x+","+abovePorts[i].y+") and ("+abovePorts[i].x+","+belowPorts[j].y+")"); 
          return true; 
         } 
        } 
       } 
      } 
     } 
     return false; 
    }, 

- Mise à jour

Je exactement essayer d'obtenir quelque chose de semblable à ce http://raphaeljs.com/graffle.html, mais devrait être fait les connexions avec des lignes droites comme indiqué ci-dessous

alt text http://rookery9.aviary.com.s3.amazonaws.com/4480500/4480527_1e77_625x625.jpg

Answer 1

Avez-vous essayé Raphael.js: http://raphaeljs.com/?

Answer 2

Une autre approche consiste à utiliser le moteur HTML + CSS du navigateur, au lieu d'utiliser JS.

Vous pouvez utiliser une table.
Une rangée de cellules pour chaque boîte et une rangée de 2 cellules pour le connecteur.
Vous colorez l'une des bordures du connecteur et utilisez les styles margin, float et width pour positionner les boîtes.

J'ai déjà utilisé cette technique pour dessiner des organigrammes il y a longtemps ... quand IE6 était considéré comme le meilleur navigateur!

Answer 3

Un autre aspect intéressant est Processing.js si vous voulez un peu plus de puissance. J'ai déjà utilisé Raphael.js auparavant et c'était assez facile à ramasser et à utiliser. Sachez simplement que les deux utilisent l'élément Canvas qui, à ma connaissance, n'est pas encore supporté dans tous les navigateurs.