Javascript - Соединить две строки

Question

В следующей картине:

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

Я хочу соединить коробки в выше ниже, будем называть нижний край верхних ящиков, как А и верхним краем приведенные ниже коробки как B

Теперь у меня есть два массива, содержащие точки в линии а и Б говорят

а = [{Ax1, Ay1}, {Ах2, Ay2}, ....] и B = [{Bx1, By1}, {Bx2, By2}, ....]

В реальном мире это может быть как A = [{100, 100}, {120, 100}, {140, 100}, {160, 100}] и B = [{120, 200}, {140, 200}, {160, 200}, {180, 200}, {200, 200},]

Пожалуйста, посмотрите на черные точки на картинке выше

Как я могу получить Подключение Подключение очков, как показано на Картины? Точка подключения должна быть как можно ближе к центру линии.

Вот что я пытаюсь, но ниже функции нарисовать линию между двумя точками соответствия от начиная с левой стороны обеих линий Любые 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; 
    }, 

- Обновление

Я точно пытаюсь получить что-то подобное этому http://raphaeljs.com/graffle.html, но соединения должны быть выполнены с прямыми линиями, как показано ниже

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

Answer 1

Вы пробовали Raphael.js: http://raphaeljs.com/?

Answer 2

Другой подход заключается в использовании механизма HTML + CSS браузера вместо использования JS.

Вы можете использовать таблицу.
Один ряд ячеек для каждого блока и 2 ячейки для соединителя.
Вы раскрашиваете одну из границ разъема и используете margin, float и width стилями, чтобы расположить коробки.

Я уже использовал эту технику, чтобы нарисовать организационные диаграммы давным-давно ... когда IE6 считался лучшим браузером!

Answer 3

Еще одна ценность - Processing.js, если вы хотите немного больше энергии. Раньше я использовал Raphael.js, и это было довольно легко подобрать и использовать. Просто имейте в виду, что оба используют элемент Canvas, который, насколько мне известно, не поддерживается во всех браузерах.