Javascript - 连接两条线

Question

如下图:

alt text 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 , 但应该用直线连接，如下所示

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

Answer 1

你试过 Raphael.js 了吗:http://raphaeljs.com/ ？