Javascript - 连接两行

Question

在下图中:

替代文字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},]

请查看上图中的黑点

如何获得图片中显示的连接点？连接点必须尽可能靠近线的中心.

这是我想要得到的,但是下面的函数在两条线的左边开始的两个匹配点之间划线,Any 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的东西,但连接应该用直线做,如下图所示

替代文字http://rookery9.aviary.com.s3.amazonaws.com/4480500/4480527_1e77_625x625.jpg

Answer 1

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