Javascript - соединить две линии - PullRequest
Новая
       4

Javascript - соединить две линии

4 голосов
/ 12 июля 2010

На следующем рисунке:

альтернативный текст http://rookery9.aviary.com.s3.amazonaws.com/4478500/4478952_3e06_625x625.jpg

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

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

A = [{Ax1, Ay1}, {Ax2, 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},]

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

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

Вот то, что я пытаюсь получить, но ниже функции рисуют линию между двумя совпадающими точками от начала слева от обоих.линии, любые предложения 

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,, но соединения должны быть сделаны прямыми, как показанониже

альтернативный текст http://rookery9.aviary.com.s3.amazonaws.com/4480500/4480527_1e77_625x625.jpg

Ответы [ 3 ]

7 голосов
/ 12 июля 2010

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

0 голосов
/ 12 июля 2010

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

0 голосов
/ 12 июля 2010

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

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

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

...